How to use client template expressions in ajax binding of kendo mvc grid?

Question

I have a two-level hierarchical grid with which I switch from server binding using ajax. Reading ajax for both data layers works correctly, however it is difficult for me to use ClientTemplate to render my columns based on conditional logic.

Below is the version for binding to the server. I understand that I have to use ClientTemplate and # = # expressions for the same effect, but I have two problems:

• How to increase the value of the variable "i" for each line, so that I can use CheckBoxFor and as html helper methods?
• How to convert @ to use ClientTemplate expression. Note that conditional logic uses the properties of the View Model, as well as the properties of the associated element (MyViewModel) with conditional logic, using a mixture of properties from Model

Converting this expression to an expression will be most useful.

var i = -1; @(Html.Kendo().Grid<MyViewModel>() .Name("grid") .Columns(columns => { columns.Bound(c => c.Selected).Title("") .Template( @<text> @{i++;} @if (Model.Permissions.HasInsertAccess && item.Status == Status.Created) { <input type="hidden" name="MyViewModels.Index" value="@i" /> @Html.CheckBoxFor(m => m.MyViewModels[i].Selected) } </text>); columns.Bound(c => c.Id) .Template(@<text>@Html.HiddenFor(m => m.MyViewModels[i].Id)@item.Id</text>) 

Answer 1

Try using the code snippet below.

VIEW

 @model MvcApplication1.Models.TestModels <script type="text/javascript"> var rowNumber = 0; function resetRowNumber(e) { rowNumber = 0; } function renderNumber(data) { return ++rowNumber; } function renderRecordNumber(data) { var page = parseInt($("#Grid").data("kendoGrid").dataSource.page()) - 1; var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize(); return parseInt(rowNumber + (parseInt(page) * parseInt(pagesize))); } </script> @(Html.Kendo().Grid<MvcApplication1.Models.TestModels>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.ID); columns.Bound(p => p.Name); columns.Template(t => { }).Title("Row No").ClientTemplate("# if ( '" + @Model.Permissions.HasValue.ToString().ToLower() + "' == 'true') { #" + "<input type='text' name='MyViewModels.Index' value='#= renderNumber(data) #' /> " + "# } #"); }) .Pageable(x => x.PageSizes(new int[] { 10, 20, 30, 50 }).Refresh(true)) .Sortable() .Filterable() .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("Grid_Read", "Home")) ) .Events(ev => ev.DataBound("resetRowNumber")) ) 

CONTROLLER

 public ActionResult Index() { TestModels model = new TestModels(); model.Permissions = true; //Please comment this line and check return View(model); } public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request) { List<TestModels> models = new List<TestModels>(); for (int i = 0; i < 50; i++) { TestModels t1 = new TestModels(); t1.ID = i; t1.Name = "Name" + i; models.Add(t1); } return Json(models.ToDataSourceResult(request)); } 

MODEL

 public class TestModels { [Display(Name = "ID")] public int ID { get; set; } [Display(Name = "Name")] public string Name { get; set; } public bool? Permissions { get; set; } } 

Try using the code snippet above. Let me know if there is any problem.