How to freeze column

[deib97]

First posting, I use CI and have view "page_customers.php"like this.

<table id="dg-customers" class="easyui-datagrid" data-options="iconCls:'icon-reload',fit:true,toolbar: '#tb-customers',border:false"></table>

and other view "page_customers_js.php" like this

$(document).ready(function() {
   
    $('#dg-customers').datagrid({ 
        url:'<?=site_url('ajax/ajaxGetCustomers')?>',
      fitColumns: true,
        striped: true,
        rownumbers: true,
        singleSelect: true,
        pagination: true,
        pageSize: 30,
        frozenColumns:[[
        {field:'cus_code',title:'Kode',width:50,sortable:true},
        {field:'cus_name',title:'Nama',width:200,sortable:true},
        ]],
        columns:[[ 
            {field:'cus_cont',title:'Contact Person',width:150,sortable:true},
            {field:'cus_telp',title:'No. Telp',width:175,sortable:true},
            {field:'cus_fax',title:'Fax',width:200,sortable:true},
            {field:'cus_adr',title:'Alamat',width:400,sortable:true},
            {field:'cus_city',title:'Kota',width:150,sortable:true},
            {field:'cus_npwp',title:'NPWP',width:150,sortable:true},
        ]],
      onHeaderContextMenu: function(e, field){
         e.preventDefault();
         if (!$('#tmenuCustomers').length){
            createColumnMenuCustomers();
         }
         $('#tmenuCustomers').menu('show', {
            left:e.pageX,
            top:e.pageY
         });
      },
        onDblClickRow: function(index,data){
             $('#editCustomers').click();
        }
    });
   
    function createColumnMenuCustomers(){
      var tmenu = $('<div id="tmenuCustomers" style="width:100px;"></div>').appendTo('body');
      var fields = $('#dg-customers').datagrid('getColumnFields');
      for(var i=0; i<fields.length; i++){
         $('<div iconCls="icon-ok"/>').html(fields).appendTo(tmenuCustomers);
      }
      tmenu.menu({
         onClick: function(item){
            if (item.iconCls=='icon-ok'){
               $('#dg-customers').datagrid('hideColumn', item.text);
               tmenu.menu('setIcon', {
                  target: item.target,
                  iconCls: 'icon-empty'
               });
            } else {
               $('#dg-customers').datagrid('showColumn', item.text);
               tmenu.menu('setIcon', {
                  target: item.target,
                  iconCls: 'icon-ok'
               });
            }
         }
      });
    }

How could I show grid with freeze column?
Thanks

[stworthy]

If you set the 'fitColumns' to true, the columns will be expanded/contracted to fit the grid width and prevent horizontal scrolling. So please set the 'fitColumns' to false to enable horizontal auto scroll in datagrid.

Code:

$('#dg-customers').datagrid({  
  fitColumns: false,
  //...
});

[deib97]

Its work. Thanks stworthy. 

If you set the 'fitColumns' to true, the columns will be expanded/contracted to fit the grid width and prevent horizontal scrolling. So please set the 'fitColumns' to false to enable horizontal auto scroll in datagrid.

Code:

$('#dg-customers').datagrid({  
  fitColumns: false,
  //...
});