Cannot cancel a Grid ColumnReorder.

[Galen Giebler]

I am sure I am missing something simple (again..)..
I have a grid that is reorderable, but I would like to prevent one column from being moved.
My event function is called but setting e.preventDefault() and returning false have no effect.

Here is my event function:

function onColumnReorderLeft(e) {
    if (e.oldIndex == 2 || e.newIndex == 2) {
        e.preventDefault();
        return false;
    }
}

Here is the grid declaration

@(Html.Kendo().Grid(Model.DataLeftSide)
              .Name("VesselsInPortLeft")
              .DataSource(dataSource => dataSource.Server()
                                                  .PageSize(200)
                                                  .Model(model => model.Id(d => d.veid))
                         )
    .CellAction(cell =>
    {
        if (cell.Column.Title.Equals(""))
        {
            cell.HtmlAttributes["style"] = "background-color: lightgray";
        }
        else if (cell.Column.Title.Equals("Name"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            String.Format("#{0}", cell.DataItem.vesselnamebackcolor.Substring(2)), String.Format("#{0}", cell.DataItem.vesselnameforecolor.Substring(2)));
        }
        else if (cell.Column.Title.Equals("LOC"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            String.Format("#{0}", cell.DataItem.currentberthbackcolor.Substring(2)), String.Format("#{0}", cell.DataItem.currentberthforecolor.Substring(2)));

            cell.HtmlAttributes["title"] = cell.DataItem.currentberthdesc;
        }
        else if (cell.Column.Title.Equals("Activity"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            String.Format("#{0}", cell.DataItem.currentactivitybackcolor.Substring(2)), String.Format("#{0}", cell.DataItem.currentactivityforecolor.Substring(2)));

            cell.HtmlAttributes["title"] = cell.DataItem.currentactivitydesc;
        }
        else if (cell.Column.Title.Equals("Flag"))
        {
            cell.HtmlAttributes["title"] = cell.DataItem.FlagName;
        }

    }
    )
    .Columns(columns =>
    {
        columns.Bound(d => d.veid).Hidden().IncludeInMenu(false);
        columns.Bound(d => d.vesselidused).Hidden().IncludeInMenu(false);
        //columns.Bound(d => d.Selected).Title("").Width(25).IncludeInMenu(false).Sortable(false);
        columns.Template(@<text></text>).Title("").Width(25).IncludeInMenu(false);
        columns.Bound(d => d.vesselname).Title("Name");
        columns.Bound(d => d.flagshortname).Title("Flag").Width(60);
        columns.Bound(d => d.currentberthabbr).Title("LOC").Width(60);
        columns.Bound(d => d.currentactivityabbr).Title("Activity").Width(80);
        columns.Bound(d => d.agentname).Title("Agent");
    })
    .Sortable(sortable => sortable
                        .AllowUnsort(true)
                        .SortMode(GridSortMode.MultipleColumn))
    .Scrollable(scr=>scr.Height(680)) //scr=>scr.Height(452) scr=>scr.Height("100%")
    .Filterable()
    .ColumnMenu()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
    .Events(events => events.Change("onChangeLeft").ColumnResize("onColumnResizeLeft").ColumnReorder("onColumnReorderLeft"))
    )

Thanks for you help!

[Dimiter Madjarov]

Hello Galen,


The reason for the issue is that the event is fired after the columns have been reordered, so it cannot be prevented. As a workaround you could move the column at the old index instead.
E.g.

function columnReorder(e) {
    var that = this;
    setTimeout(function () {
        that.reorderColumn(e.oldIndex, e.column);
    });
}

I hope that this approach will work in the current scenario.

 

Regards,
Dimiter Madjarov
Telerik

[Galen Giebler]

That should work, I will let you know if not... Thanks!
G