Column Re-Ordering about jsgrid HOT 3 OPEN

Column reordering w/o drag and drop is that simple: change the option of grid where fields brought in desired order (the order itself could be with any external ui):

$("#jsGrid").jsGrid("option", "fields", fields);

The DnD column reordering could be implemented with jquery ui.sortable.
Just add following onRefreshed event handler to grid config:

    onRefreshed: function(e) {
        var $headerRow = $("#jsGrid .jsgrid-header-row");
        var $headerCells = $headerRow.find("th");
        var fields = e.grid.option("fields");

        $.each(fields, function(index, field) {
            $headerCells.eq(index).data("JSField", field);
        });

        $headerRow.sortable({
            axis: "x",
            placeholder: "header-cell-placeholder",
            start: function(e, ui){
                ui.placeholder.width(ui.helper.width());
            },
            update: function(e, ui) {
                var fields = $.map($headerRow.find("th"), function(cell) {
                    return $(cell).data("JSField");
                });

                $("#jsGrid").jsGrid("option", "fields", fields);
            }
        });
    }

Here on each grid refresh we add references to fields in header cell data, and set the grid option fields on sortable update. Here is working fiddle: http://jsfiddle.net/tabalinas/780bfqkk/

Since it's not that complicated to implement column reordering from outside, I think it's enough for the moment to add a demo with column reordering. Build-in column reordering functionality, may be postponed for a while.

from jsgrid.

I'm having a little difficulty implementing this column reordering - we use a promise to fulfil the data (which comes from a database asynchronously) and this implementation is throwing a max call stack exceeded error.

I've just started looking at this so if you have any insight it would be appreciated.

from jsgrid.

Hi tabalinas ! Is it possible to have the whole column dragging (not just the header) when dragging a column ?

from jsgrid.