Print Page - Resize columns in Datagrid rows [Solved]

Hello,

Is it possible to resize the columns in the datagrid using the data rows as well. Currently when we try to resize the column, the same can be done using the mouse, on the header section of the datagrid only. I wanted that the same functionality would be available for all the rows as well. Is it possible to extend the expanding logic and functionality to the entire column instead of just restricting it to the header section of the datagrid ???

Thanks & Regards,
Darrel.

Please extend a method 'columnResizing' to achieve this functionality.

Code:

(function($){
  function setResizable(target){
    var state = $.data(target, 'datagrid');
    var panel = state.panel;
    var opts = state.options;
    var dc = state.dc;
    var header = dc.header1.add(dc.header2);
    var cells = opts.finder.getTr(target,0,'allbody').find('div.datagrid-cell');

    var resizeHandle = opts.resizeHandle == 'right' ? 'e' : (opts.resizeHandle == 'left' ? 'w' : 'e,w');
    cells.each(function(){
      $(this).resizable({
        handles:resizeHandle,
        disabled: (function(cell){
          var field = $(cell).parent().attr('field');
          var hcell = header.find('td[field="'+field+'"] .datagrid-cell');
          return hcell.attr('resizable') ? hcell.attr('resizable')=='false' : false;
        })(this),
        minWidth:25,
        onStartResize: function(e){
          state.resizing = true;
          $(this).closest('tr').css('cursor', $('body').css('cursor'));
          if (!state.proxy){
            state.proxy = $('<div class="datagrid-resize-proxy"></div>').appendTo(dc.view);
          }
          state.proxy.css({
            left:e.pageX - $(panel).offset().left - 1,
            display:'none'
          });
          setTimeout(function(){
            if (state.proxy) state.proxy.show();
          }, 500);
        },
        onResize: function(e){
          state.proxy.css({
            left:e.pageX - $(panel).offset().left - 1,
            display:'block'
          });
          return false;
        },
        onStopResize: function(e){
          $(this).closest('tr').css('cursor', '');
          $(this).css('height','');
          var field = $(this).parent().attr('field');
          var col = $(target).datagrid('getColumnOption',field);
          col.width = $(this)._outerWidth();
          col.boxWidth = col.width - col.deltaWidth;
          col.auto = undefined;
          $(this).css('width', '');
          $(target).datagrid('fixColumnSize', field);
          state.proxy.remove();
          state.proxy = null;
          $(target).datagrid('fitColumns');
          opts.onResizeColumn.call(target, field, col.width);
          setTimeout(function(){
            state.resizing = false;
          }, 0);
        }
      });
    });
  }
  
  $.extend($.fn.datagrid.methods, {
    columnResizing: function(jq){
      return jq.each(function(){
        var opts = $(this).datagrid('options');
        var onLoadSuccess = opts.onLoadSuccess;
        opts.onLoadSuccess = function(){
          setResizable(this);
          onLoadSuccess.call(this);
        }
        setResizable(this);
      })
    }
  });
})(jQuery);

Usage example:

Code:

$('#dg').datagrid('columnResizing');

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Darrel on February 21, 2016, 08:10:07 AM