Title: [SOLVED] Datagrid/Treegrid column priority (responsive)
Post by: Pierre on April 25, 2017, 07:33:04 AM
Hello development is it possible to implement "Autohide" option where columns are displayed based on defined priority, like you can see here: http://demos.jquerymobile.com/1.4.5/table-column-toggle/ With other words, we try to create some universal application for desktop/mobile where datagrid/treegrid are displayed using all columns on desktop, some on tablet and 1 or 2 columns on phone (based on column priority). Thank you.
Title: Re: Datagrid/Treegrid column priority (responsive)
Post by: stworthy on April 26, 2017, 12:54:41 AM
Here is the extended method to build the column toggle datagrid. (function($){ function init(target){ var widths = [320,480,640,800,960,1120]; var dg = $(target); var opts = dg.datagrid('options'); var onResize = dg.datagrid('getPanel').panel('options').onResize; dg.datagrid('getPanel').panel('options').onResize = function(width,height){ var width = $(this).panel('panel').outerWidth(); var priority = getPriority(width); var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields')); for(var i=0; i<fields.length; i++){ var col = dg.datagrid('getColumnOption', fields[i]); if (col.priority && col.priority>priority){ dg.datagrid('hideColumn', fields[i]); } else { dg.datagrid('showColumn', fields[i]); } } onResize.call(this, width, height); }
function getPriority(width){ for(var i=0; i<widths.length; i++){ if (width<widths[i]){ return i; } } return widths.length; } }
$.extend($.fn.datagrid.methods, { columnToggle: function(jq){ return jq.each(function(){ init(this); $(this).datagrid('resize'); }); } }); })(jQuery);
Usage example: $('#dg').datagrid({ width: '80%', fitColumns: true, columns: [[ {field:'itemid',title:'Item ID',width:100}, {field:'productid',title:'Product',width:100}, {field:'listprice',title:'List Price',width:100,priority:1}, {field:'unitcost',title:'Unit Price',width:100,priority:2}, {field:'attr1',title:'Attribute',width:100,priority:3}, {field:'status',title:'Status',width:100,priority:4} ]] }); $('#dg').datagrid('columnToggle');
Title: Re: Datagrid/Treegrid column priority (responsive)
Post by: Pierre on April 26, 2017, 05:59:38 AM
You are the master, thank you ;D I created complete example if someone else need it: http://code.reloado.com/ecituq3/5/edit#preview Thank you again.
|