jQuery UI Widgets › Forums › Grid › question about responsive in grid
Tagged: column, fluid, grid, hide, hidecolumn, jqxgrid, responsive, show, width, window
This topic contains 2 replies, has 2 voices, and was last updated by jperera 9 years, 7 months ago.
-
Author
-
Hello everybody,
I was trying to simulate the behavior that occurs in any grid with boostrap for responsive design, for example i would like to if you reduce the width in your browser some columns less important in the grid automatically hide.
Is this possible? If it is could any send me something as example or documentation for it?/Thank you very much…
Jose
Hello Jose,
Here is how you may achieve this functionality:
<!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.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/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.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/products.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ProductName', type: 'string' }, { name: 'QuantityPerUnit', type: 'int' }, { name: 'UnitPrice', type: 'float' }, { name: 'UnitsInStock', type: 'float' }, { name: 'Discontinued', type: 'bool' } ], root: "Products", record: "Product", id: 'ProductID', url: url }; var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) { if (value < 20) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: '100%', source: dataAdapter, pageable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Product Name', datafield: 'ProductName', width: 250 }, { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 }, { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' } ] }); $(window).resize(function () { width = $(window).width(); if (width < 1000) { $('#jqxgrid').jqxGrid('hidecolumn', 'UnitsInStock'); } else { $('#jqxgrid').jqxGrid('showcolumn', 'UnitsInStock'); } }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar, I will try to do it….
-
AuthorPosts
You must be logged in to reply to this topic.