jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Set Column Width Dynamically
Tagged: jqxgrid
This topic contains 2 replies, has 2 voices, and was last updated by Syai 12 years ago.
-
Author
-
Hi,
We’ve a requirement to show different columns of Grid according to different user. For some users less number of columns will be shown and for some other users more number of columns will be shown in the same grid. My question is, will it be possible to set the width of particular columns on “Load Complete” of Grid so that the width of the columns will be adjusted according to different users. Can anyone suggest me how to achieve this?Thanks in advance,
Regards,
Syai,
OsmosysHi Syai,
In order to show the columns with a different width when the loading of the jqxGrid is complete you can use the ‘ready’ function and the ‘setcolumnproperty’ method as shown:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // prepare the data var data = {}; var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; var 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" ]; var 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" ]; var generaterow = function (i) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var 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; return row; } for (var i = 0; i < 10; i++) { var row = generaterow(i); data[i] = row; } var source = { localdata: data, datatype: "local", 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' } ], addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command // call commit with parameter true if the synchronization with the server is successful //and with parameter false if the synchronization failed. commit(true); }, }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { ready: function () { $("#jqxgrid").jqxGrid('setcolumnproperty', 'quantity', 'width', 300); }, width: 500, height: 350, source: dataAdapter, theme: theme, columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' } ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style="float: left;" id="jqxgrid"> </div> <div style="margin-left: 10px; float: left;"> </div> </div></body></html>
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Mariya,
Thank you very much for the solution. It is working like charm.
Regards,
Syai,
Osmosys -
AuthorPosts
You must be logged in to reply to this topic.