Prevent certain SlickGrid columns from being reordered

Question

The drag/drop column reordering is a great feature, but how do I prevent the users from moving particular (non-data) columns?

For example, I am using the Checkbox Selectors for my mutli-select Grid, but this column should always be locked to the left, while the other columns can be freely reordered.

Answer 1

I looked at the sortable demos on jQuery UI and modified the setupColumnReorder function in slick.grid.js to exclude certain items. By excluding the checkbox column I was able to prevent it from getting reordered, even by dragging other columns before it.

function setupColumnReorder() {
var checkBoxColumn = $headers.children([0]).attr('id');
$headers.sortable({
items: "div:not('.slick-resizable-handle','#"+checkBoxColumn+"')",
...

Since my checkbox column is always first, I just grab the id like so. A bit of a hack, but it worked.

Answer 2

I tried this:

function setupColumnReorder() {
var checkBoxColumn = $headers.children([0]).attr('id');
$headers.sortable({
items: "div:not('.slick-resizable-handle','#"+checkBoxColumn+"')",
...

but i had problems when dragging other columns before it. Then i tried this:

grid.onColumnsReordered.subscribe(function (e, args) {
   if (myGridColumns[0].id != grid.getColumns()[0].id)
   {
       grid.setColumns(myGridColumns);
   }
   else 
   {
       myGridColumns= grid.getColumns();
    }
});

and it was just fine.