Kendo MVC Grid Columns not locking

Question

I have a Kendo Grid that I am building dynamically from a System.Data.DataTable. I am having issues trying to lock the columns.

I am setting a few columns to locked based on their title as you will see in my code. The boolean check is coming back as true or false where expected and that value is correctly being set in the .Locked() property. But the grid is not locking that column, nor is it giving me the Lockable option in the column menu.

Please see my code below:

   @model MvcProject.UnitOfWork.ViewModels.Reports.FacilityEquipmentDistributionVm


   @(Html.Kendo().Grid<dynamic>()
   .Name("resultsGrid")
                   .Columns(columns =>
                        {
                            columns.Group(group => group
                                .Title("Facility Equipment Distribution Report : Date run - " + DateTime.Now.ToShortDateString())
                                .Columns(header =>
                                {

                                    foreach (System.Data.DataColumn column in Model.CombinedTable.Columns)
                                    {
                                        string title = "";
                                        bool showColumn;

                                        if (Model.ColumnTitles.TryGetValue(column.ColumnName, out title))
                                        {

                                        }
                                        else
                                        {
                                            title = column.ColumnName;
                                        }

                                        if (Model.ColumnsToShow.TryGetValue(column.ColumnName, out showColumn))
                                        {

                                        }
                                        else
                                        {
                                            showColumn = false;
                                        }

                                        bool lockColumn = (title == "PropertyRef" || title == "PropertyName" || title == "Address" || title == "Prefix" || title == "Floor");

                                       header.Bound(column.ColumnName)
                                            .Title(title)
                                            .Visible(showColumn)
                                            .Locked(lockColumn)
                                            .Lockable(true)
                                            .Width(title.Length * 8);

                                    }

                                })
                            );
                        })

                    .HtmlAttributes(new { style = "height: 900px;" })
                        .Pageable(p => p
                            .ButtonCount(5)
                            .PageSizes(true)
                            .Refresh(true)
                        )

                        .Scrollable(s => s.Height("auto").Enabled(true))
                        .Sortable()
                        .Reorderable(reorderable => reorderable.Columns(true))
                        .Filterable()
                        .Groupable()
                        .ColumnMenu()
                        .Resizable(r => r
                            .Columns(true)
                        )
                            .Excel(excel => excel
                                .FileName("Facility Equipment Distribution.xlsx")
                                .Filterable(true)
                                .ProxyURL(Url.Action("_GridExportSave", "Reports"))
                                .AllPages(true)
                            )
                        .DataSource(d => d
                            .Ajax()

                            .Read(read => read.Action("_FacilityEquipmentDistributionResults_Read", "Reports").Data("Genesis.Reports.Space.Search.getPaginationData"))
                                .ServerOperation(true)
                                .PageSize(20)
                            )
                            .ToolBar(tools =>
                            {
                                tools.Pdf();
                                tools.Excel();
                            })
    //PDF removed for now until it is patched
                            .Pdf(pdf => pdf
                                 .AllPages()
                                .FileName("FacilityEquipmentDistribution.pdf")
                                .ProxyURL(Url.Action("_GridExportSave", "Reports"))
                            )
                            //.Events(events => events.DataBound("Genesis.Reports.Space.Search.loadTT"))

)

Any help would be much appreciated.

Kind Regards,

Gareth

Answer 1

As it says in kendo documentation(lock columns):

In order to use this method, the grid must be initialized with at least one locked column, and there should be locked columns left after the target column is unlocked.

So i would try adding one locked column at the begining and then have it unlocked/removed.

    var grid = $("#grid").data("kendoGrid");
    grid.lockColumn("Lock columns");
    grid.unlockColumn("unlock first column");

http://jsfiddle.net/calinaadi/p2710yoL/

Answer 2

Radoslav from Telerik got back to me and said:

"When the columns are grouped only the root groups can be lockable and locked, unfortunately the columns into the group does not support such functionality. So in your case in order to have locked columns you need to remove the group and add columns directly to the grid. "

As we have an initial grouped column as a "hacky" way of having a title on our grid, we cannot do it as we are only able to lock the root column therefore we would only be able to lock our "hacky" column.