9

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.

VividD
  • 10,456
  • 6
  • 64
  • 111
Kevin
  • 541
  • 3
  • 6
  • 17

2 Answers2

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.

Zarko
  • 446
  • 1
  • 5
  • 9
  • Sure this is good to stop the actual redordering of columns but the issue is that the user can still drag the column giving him the false sense that the column can be reordered like the others. I'm a bit surprised that there is no flag/option to mark X many column from the left as not "orderable". I mean they do have resizable option on each column? Maybe there is a good reason but I'm just not seeing it... – Marko Feb 10 '14 at 18:56
  • You can solve this problem by making two tables. In left table you will put fixed columns and bind them for specific fields. And in right table you will put the rest of columns. It will not be the perfect solution but it will work as you intended. But you must be careful when updating data. – Zarko Feb 12 '14 at 18:19
2

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.

psd
  • 21
  • 2