[SOLVED] Datagrid/Treegrid column priority (responsive)

[Pierre]

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.

[stworthy]

Here is the extended method to build the column toggle datagrid.

Code:

(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:

Code:

$('#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');

[Pierre]

You are the master, thank you 
I created complete example if someone else need it:
http://code.reloado.com/ecituq3/5/edit#preview
Thank you again.