CODEWITHSUNDEEP
model-view-controllerkendo-uikendo-gridfreeze
Rigel1121
Rigel1121

Reputation: 2026

How to Lock/Freeze the First Column of Kendo Grid with Hierarchy?

I am using Telerik Kendo UI Grid in ASP.NET MVC. I tried to apply the new feature of Kendo which is the .Locked() and .Lockable() Property to lock/freeze the first column of my grid(with hierarchy).But, when I tried to run my program, it got an error.

I have also tried this example yet it only applies to basic Kendo Grid. In the example, the synchronization of the two grids applies only in vertical scrolling. What I wanted to happen is that when I click the expand icon in the froze grid, the row will expand so in the second grid follows. Can somebody help me, Please.

Here is my code:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(110).Locked(true);
        columns.Bound(e => e.LastName).Width(110);
        columns.Bound(e => e.Country).Width(110);
        columns.Bound(e => e.City).Width(110);
        columns.Bound(e => e.Province).Width(110);
        columns.Bound(e => e.Town).Width(110);
        columns.Bound(e => e.Barangay).Width(110);
        columns.Bound(e => e.Street).Width(110);
        columns.Bound(e => e.HouseNo).Width(110);
        columns.Bound(e => e.Building).Width(110);
        columns.Bound(e => e.FloorNo).Width(110);
        columns.Bound(e => e.Title);
    })              
    .Sortable()
    .Pageable()
    .Scrollable()
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(6)
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))           
    )       
    .Events(events => events.DataBound("dataBound")))

 <script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid_#=EmployeeID#")
        .Columns(columns =>
        {
            columns.Bound(e => e.LastName).Width(110).Locked(true);
            columns.Bound(e => e.Country).Width(110);
            columns.Bound(e => e.City).Width(110);
            columns.Bound(e => e.Province).Width(110);
            columns.Bound(e => e.Town).Width(110);
            columns.Bound(e => e.Barangay).Width(110);
            columns.Bound(e => e.Street).Width(110);
            columns.Bound(e => e.HouseNo).Width(110);
            columns.Bound(e => e.Building).Width(110);
            columns.Bound(e => e.FloorNo).Width(110);
            columns.Bound(e => e.Title);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate()
)

Upvotes: 0

Views: 8447

Answers (2)

Rigel1121
Rigel1121

Reputation: 2026

I just solved my problem using THIS and by adding some workarounds. I used two grids. In the first grid, I've put the column that needs to be locked. And, I put the rest columns to the second grid. Then all I have to do is to combine and synchronize the grids. That is when the first hierarchy detail is opened in first grid, the first hierarchy detail in the second grid will also open. And so on to the other hierarchy levels.I used JavaScript to do that. See below(applicable only for the first hierarchy level):

var grid = $('#grid_2').data('kendoGrid');
var hierarchy_level= grid.tbody.find('>tr.k-master-row');
var x = 0;
$("#grid_1").find("tr.k-master-row:first").click(function () {
 if (x == '1') {
   grid.collapseRow(allMasterRows.eq(0));
   x = 0;
 } else {
   grid.expandRow(allMasterRows.eq(0));
   x = 1;
 }
});

Then by combining the two grids. I used this one:

$("#grid_1,#grid_2").wrap('<td ></td>').parent().wrapAll('<table><tbody><tr></tr></tbody></table>');

Upvotes: 1

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

According to kendo documentation:

Row template and detail features are not supported in combination with column locking.

So I'm afraid you have to choose if you want to have locked colum or hierarchy grid.

Upvotes: 0

Related Questions