jQuery UI Widgets › Forums › Grid › JqxGrid with "columnsResize" property
Tagged: columnsresize, grid, jqxgrid, maxWidth, minwidth
This topic contains 2 replies, has 2 voices, and was last updated by srinath4ever 10 years, 3 months ago.
-
Author
-
Hi,
Can we set MinWidth and MaxWidth to JqxGrid table column when we use ‘columnsResize’ property on to it? I want to restrict users to minimize/maximize a column after certain width. Please tell me whether this is possible or not.
Thanks,
Srinath
BMC SoftwareHello Srinath,
You can set ‘minwidth’ and ‘maxwidth’ to jqxGrid column when ‘columnsresize’ is set to true. The following example shows how to restrict resizing of the first column.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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="generatedata.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = generatedata(); var source = { localdata: data, datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, columnsresize: true, columns: [ { text: 'First Name', datafield: 'firstname', width: 100, minwidth: 100, maxwidth: 150 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', minwidth: 100, resizable: false, width: 'auto', cellsalign: 'right', cellsformat: 'c2' } ] }); // trigger the column resized event. $("#jqxgrid").on('columnresized', function (event) { var column = event.args.columntext; var newwidth = event.args.newwidth var oldwidth = event.args.oldwidth; $("#eventlog").text("Column: " + column + ", " + "New Width: " + newwidth + ", Old Width: " + oldwidth); }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"></div> <div style="margin-top: 30px;" id="eventlog"></div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thanks Nadezhda. It worked.
Thanks
Srinath
BMC Software -
AuthorPosts
You must be logged in to reply to this topic.