title: How to Lock/Freeze the First Column of Kendo Grid with Hierarchy?
body: <p>I am using Telerik Kendo UI Grid in ASP.NET MVC. I tried to apply the new feature of Kendo which is the <code>.Locked() and .Lockable()</code> Property to lock/freeze the first column of my grid(<strong>with hierarchy</strong>).But, when I tried to run my program, it got an error. </p>
  
  <p>I have also tried <a href="http://jsfiddle.net/dmathisen/gFwtm/3/" rel="nofollow">this example</a> 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.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>@(Html.Kendo().Grid&lt;Kendo.Mvc.Examples.Models.EmployeeViewModel&gt;()
      .Name("grid")
      .Columns(columns =&gt;
      {
          columns.Bound(e =&gt; e.FirstName).Width(110).Locked(true);
          columns.Bound(e =&gt; e.LastName).Width(110);
          columns.Bound(e =&gt; e.Country).Width(110);
          columns.Bound(e =&gt; e.City).Width(110);
          columns.Bound(e =&gt; e.Province).Width(110);
          columns.Bound(e =&gt; e.Town).Width(110);
          columns.Bound(e =&gt; e.Barangay).Width(110);
          columns.Bound(e =&gt; e.Street).Width(110);
          columns.Bound(e =&gt; e.HouseNo).Width(110);
          columns.Bound(e =&gt; e.Building).Width(110);
          columns.Bound(e =&gt; e.FloorNo).Width(110);
          columns.Bound(e =&gt; e.Title);
      })              
      .Sortable()
      .Pageable()
      .Scrollable()
      .ClientDetailTemplateId("template")
      .HtmlAttributes(new { style = "height:430px;" })
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .PageSize(6)
          .Read(read =&gt; read.Action("HierarchyBinding_Employees", "Grid"))           
      )       
      .Events(events =&gt; events.DataBound("dataBound")))
  
   &lt;script id="template" type="text/kendo-tmpl"&gt;
  @(Html.Kendo().Grid&lt;Kendo.Mvc.Examples.Models.OrderViewModel&gt;()
          .Name("grid_#=EmployeeID#")
          .Columns(columns =&gt;
          {
              columns.Bound(e =&gt; e.LastName).Width(110).Locked(true);
              columns.Bound(e =&gt; e.Country).Width(110);
              columns.Bound(e =&gt; e.City).Width(110);
              columns.Bound(e =&gt; e.Province).Width(110);
              columns.Bound(e =&gt; e.Town).Width(110);
              columns.Bound(e =&gt; e.Barangay).Width(110);
              columns.Bound(e =&gt; e.Street).Width(110);
              columns.Bound(e =&gt; e.HouseNo).Width(110);
              columns.Bound(e =&gt; e.Building).Width(110);
              columns.Bound(e =&gt; e.FloorNo).Width(110);
              columns.Bound(e =&gt; e.Title);
          })
          .DataSource(dataSource =&gt; dataSource
              .Ajax()
              .PageSize(10)
              .Read(read =&gt; read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
          )
          .Pageable()
          .Sortable()
          .ToClientTemplate()
  )
  </code></pre>
  
  <p></p>