Slickgrid column reordering not working correctly

Question

I am using the Slickgrid javasript library, and I have initialized my grid with the following options:

var options = 
{
  enableCellNavigation: true,
  enableColumnReorder: true,
  syncColumnCellResize: false,
  asyncEditorLoading: true
};

I have the rest of my slickgrid implemented, and it is working great. The only issue I have experienced is that the column reordering is not working as it should.

I am able to drag a column header to another position, but when it hovers over where I would like to drop it, the other column headers are not shifting over as they should according to previous examples I have seen. I usually need to mess around with the column header until a space opens up.

I have not seen any documentation on column headers not being able to reorder, so I wouldn't even know where, or what might be causing these problems.

Does anybody have any similar problems such as these with Slickgrid, or any suggestions?

ahmiz ahmiz · Accepted Answer · 2011-10-12T14:18:20

I'd just started using SlickGrid recently and I encountered a similar issue.

I was doing it in this way:

var options = { ... };
var dataView = ...;

// initialize columns with empty array
var columns = [];

// intialize myGrid with the empty columns
var myGrid = new Slick.Grid(
                  "#myGrid", dataView,
                  columns, options);

// initialize columns here (e.g. after loading dynamic column header data)
columns.push(
  {id:"sel", name:"#", field:"num", sortable: true},
  {id:"title", name:"Title", field:"title", sortable: true},
  {id:"duration", name:"Duration", field:"duration", sortable: true});

// update the columns
myGrid.setColumns(columns);

You might ask why I was doing it in that way. Well, I had some column headers from dynamic content and was trying to keep the content loading in the same method as my row data loading. In any case, everything else (e.g. event handlers, updating of rows, etc.) seemed to work fine when I did it in the above manner, except for the strange column reordering behavior that you described.

After much trial and error and comparing my code with the provided examples, it turns out my mistake was in not setting the columns properly during initialization. Apparently, the odd behavior occurs when you call new Slick.Grid with an empty columns array.

What I did to fix it was to simply initialize the grid with a dummy non-empty columns array and then still call setColumns later to set the actual columns. e.g.

// intialize myGrid with dummy column array
var myGrid = new Slick.Grid(
                  "#myGrid", dataView,
                  [{id: "dummy"}], options);

Everything else worked as expected after I made this single change.

This took me a little while to figure out, but I hope it helps you or someone else who might have encountered a similar issue.

Slickgrid column reordering not working correctly

1 Answers