jQWidgets Forums
jQuery UI Widgets › Forums › Vue › How to assign different theme to a component
Tagged: theme style
This topic contains 3 replies, has 2 voices, and was last updated by Martin 4 years, 6 months ago.
-
Author
-
Hi,
I have troubles with assigning different theme to a component.I have modified the
jqwidgets/demos/Vue.js/pivotgrid/designer/
demo app so that it uses for example the “metro” theme:index.htm
– added the link to jqx.metro.css.<!DOCTYPE html> <html lang="en"> <head> <title>jQWidgets Vue Example</title> <link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.metro.css" type="text/css" /> </head> <body> <div id="app"></div> <script src="dist/main.bundle.js"></script> </body> </html>
App.vue
– addedtheme="metro"
<template> <table> <tr> <td> <JqxPivotDesigner style="width: 250px; height: 400px;" ref="pivotDesigner" theme="metro" :type="'pivotGrid'"> </JqxPivotDesigner> </td> <td> <JqxPivotGrid style="width: 550px; height: 400px;" ref="pivotGrid" theme="metro" :source="pivotDataSource" :treeStyleRows="false" :autoResize="false" :multipleSelectionEnabled="true"> </JqxPivotGrid> </td> </tr> </table> </template> ... rest of file omitted.
Then run
yarn yarn start
But the “metro” style is not applied. Only the “base” style is applied unfortunately.
What am I doing wrong?
Thank you for any help.
AlesHello Ales,
You can use the
createComponent
method to create a pivot grid on demand and set its “theme” property in the options.
Here is an example:<template> <table> <tr> <td> <JqxPivotGrid style="width: 550px; height: 400px;" ref="pivotGrid" :autoCreate="false"> </JqxPivotGrid> </td> </tr> </table> </template> <script> import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue'; export default { components: { JqxPivotGrid }, data: function () { return { pivotDataSource: this.pivotDataSource } }, beforeCreate: function () { }, mounted: function() { const createPivotDataSource = function () { // prepare sample data let data = new Array(); let firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; let lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; let productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; let priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ]; for (let i = 0; i < 500; i++) { let row = {}; let productindex = Math.floor(Math.random() * productNames.length); let price = parseFloat(priceValues[productindex]); let quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; data[i] = row; } // create a data source and data adapter let source = { localdata: data, datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; let dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter let pivotDataSource = new jqx.pivot( dataAdapter, { customAggregationFunctions: { 'var': function (values) { if (values.length <= 1) return 0; // sample's mean var mean = 0; for (var i = 0; i < values.length; i++) mean += values[i]; mean /= values.length; // calc squared sum var ssum = 0; for (var i = 0; i < values.length; i++) ssum += Math.pow(values[i] - mean, 2) // calc the variance var variance = ssum / values.length; return variance; } }, pivotValuesOnRows: false, rows: [{ dataField: 'firstname', text: 'First Name' }, { dataField: 'lastname' }], columns: [{ dataField: 'productname', align: 'left' }], filters: [ { dataField: 'productname', text: 'Product name', filterFunction: function (value) { if (value == "Black Tea" || value == "Green Tea") return true; return false; } } ], values: [ { dataField: 'price', 'function': 'sum', text: 'Sum', align: 'left', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'center' }, cellsClassName: 'myItemStyle', cellsClassNameSelected: 'myItemStyleSelected' }, { dataField: 'price', 'function': 'count', text: 'Count', className: 'myItemStyle', classNameSelected: 'myItemStyleSelected' } ] } ); return pivotDataSource; }; this.pivotDataSource = createPivotDataSource(); const settings = { theme: 'metro', source: this.pivotDataSource, treeStyleRows: false, autoResize: false, multipleSelectionEnabled: true } this.$refs.pivotGrid.createComponent(settings); } } </script>
Best Regards,
Martin YotovjQWidgets team
https://www.jqwidgets.comThank you Martin,
It works fine. What baffled me is that when you put a JqxButton on a page and set the theme directly in the template, it works without manually creating the component.<JqxButton theme="metro">Button</JqxButton>
Ales
Hello Ales,
Yes, you are right. The approach that I suggested you it specifically for the jqxPivotGrid.
Best Regards,
Martin YotovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.