Search code examples
javascriptangularjsslickgrid

SlickGrid : How to stop certain columns from being reordered?

I need to stop certain columns in SlickGrid from being reordered. I just couldn't find a way for it. There is no option on each column to allow reordering as in case of 'resizable' or something like that. The below flag makes all the columns 'reorder-able' :

var options = {
  enableColumnReorder: true
};

Do let me know if there is any workaround. TIA

Solution

  • Unfortunately, there are no direct options to achieve this, but if we explore source code we will find out that they use jquery sortable plugin. So we can "inject" into sortable call to add option cancel or items for `sortable plugin.

    In column options: 

    headerCssClass: "disable-reorder"

    In initialization:

    var origSortable = $.fn.sortable;
$.fn.sortable = function (options) {
  if (options !== null && typeof options === 'object'){
    options.cancel = '.disable-reorder';
  }
  return origSortable.apply(this, arguments);
};

data = [
  //some data
];
grid = new Slick.Grid("#myGrid", data, columns, options);

    That will prevent headers with class .disable-reorder to be not reorderable.

    This is ugly and hacky way, but I couldn't found any other options.

    Full fiddle