Kendo TabStrip模板内部在Kendo网格中不起作用

Question

I have two kendo grids. In those grids I have a column which is a checkbox. User can select row or all at once using that column.

It's working fine for one grid which is independent in a page. But another grid is inside a tabstrip. And in that grid, this checkbox column is not working.

Error CS0412 'item': a parameter or local variable cannot have the same name as a method type parameter.

Error CS0412 '__razor_template_writer': a parameter or local variable cannot have the same name as a method type parameter.

 public class DemoJobs { public string DemoString { get; set; } public int DemoInt { get; set; } public decimal DemoDecimal { get; set; } } public ActionResult GetDemoJobs([DataSourceRequest]DataSourceRequest request) { List<DemoJobs> demoJobs = new List<DemoJobs>(); DemoJobs d = new DemoJobs(); d.DemoString = "First"; d.DemoInt = 1; d.DemoDecimal = 1; demoJobs.Add(d); d = new DemoJobs(); d.DemoString = "Second"; d.DemoInt = 2; d.DemoDecimal = 2; demoJobs.Add(d); d = new DemoJobs(); d.DemoString = "Third"; d.DemoInt = 3; d.DemoDecimal = 3; demoJobs.Add(d); var jsonObj = Json(demoJobs.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); jsonObj.MaxJsonLength = int.MaxValue; return jsonObj; } 

 function selectedRow(e) { var grid = $("#gridDemoJobs").data("kendoGrid"); var checkboxes = grid.tbody.children().find("[type=checkbox]"); checkboxes.each(function (i, chkBox) { if ($(chkBox).is(":checked")) { chkBox.parentElement.parentElement.className = "k-state-selected"; } }) } function checkAll(ele) { var state = $(ele).is(':checked'); var grid = $('#gridDemoJobs').data('kendoGrid'); if (state == true) { $('.chkFormols').prop('checked', true); selectAllRows(true); } else { $('.chkFormols').prop('checked', false); selectAllRows(false); } }; function selectAllRows(isSelectAll) { var grid = $("#gridDemoJobs").data("kendoGrid"); var rows = grid.tbody.children(); rows.each(function (i, row) { if (isSelectAll) { row.className = "k-state-selected"; } }) } 

 <div class="panel"> <div class="panel-body"> <div class="row" style="padding-top: 10px;"> <div class="col-sm-4 col-md-4 col-lg-4"> @(Html.Kendo().Grid<ServicePROWeb.Controllers.CONTController.DemoJobs>() .Name("gridDemoJobs") .AutoBind(true) .Columns(columns => { columns.Template(@<text><input name="chkStatus" type="checkbox" class="chkFormols" /></text>) .ClientTemplate("<input type='checkbox' class='chkFormols' onClick='selectedRow(this)'/>") .HeaderTemplate("<input type='checkbox' id='chkSelectAll' onClick='checkAll(this)' />").Width(25); columns.Bound(p => p.DemoString).Title("String"); columns.Bound(p => p.DemoInt).Title("Int"); columns.Bound(p => p.DemoDecimal).Title("Decimal"); }) .DataSource(dataSource => dataSource .Ajax() .Batch(true) .ServerOperation(false) .Read(read => read.Action("GetDemoJobs", "CONT")) ) ) </div> </div> </div> </div> <div class="panel"> <div class="panel-body"> <div class="row" style="padding-top: 10px;"> <div class="col-sm-4 col-md-4 col-lg-4"> @(Html.Kendo().TabStrip() .Name("demoTabStrip") .Collapsible(false) .Items(tabstrip => { tabstrip.Add().Text("Demo Job Tab") .Selected(true) .Content(@<div class="jobAllocation"> @(Html.Kendo().Grid<ServicePROWeb.Controllers.CONTController.DemoJobs>() .Name("gridDemoJobsInside") .AutoBind(true) .Columns(columns => { **@*columns.Template(@<text><input name="chkStatus" type="checkbox" class="chkFormols" /></text>) .ClientTemplate("<input type='checkbox' class='chkFormols' onClick='selectedRow(this)'/>") .HeaderTemplate("<input type='checkbox' id='chkSelectAll' onClick='checkAll(this)' />").Width(25);*@** columns.Bound(p => p.DemoString).Title("String"); columns.Bound(p => p.DemoInt).Title("Int"); columns.Bound(p => p.DemoDecimal).Title("Decimal"); }) .DataSource(dataSource => dataSource .Ajax() .Batch(true) .ServerOperation(false) .Read(read => read.Action("GetDemoJobs", "CONT")) ) ) </div>); }) ) </div> </div> </div> </div> 

Answer 1

It's actually a syntax issue related to nesting inline templates in the Razor code. I have worked around the problem by declaring the Grid as a helper and render it by calling the helper inside the TabStrip template.

 @helper RenderSelectableGrid() { @(Html.Kendo().Grid<TelerikMvcApp5.Controllers.GridController.DemoJobs>() .Name("gridDemoJobsInside") .AutoBind(true) .Columns(columns => { columns.Template(@<text><input name="chkStatus" type="checkbox" class="chkFormols" /></text>) .ClientTemplate("<input type='checkbox' class='chkFormols' onClick='selectedRow(this)'/>") .HeaderTemplate("<input type='checkbox' id='chkSelectAll' onClick='checkAll(this)' />").Width(25); columns.Bound(p => p.DemoString).Title("String"); columns.Bound(p => p.DemoInt).Title("Int"); columns.Bound(p => p.DemoDecimal).Title("Decimal"); }) .DataSource(dataSource => dataSource .Ajax() .Batch(true) .ServerOperation(false) .Read(read => read.Action("GetDemoJobs", "Grid")) ) ) } 

 @(Html.Kendo().TabStrip() .Name("demoTabStrip") .Collapsible(false) .Items(tabstrip => { tabstrip.Add().Text("Demo Job Tab") .Selected(true) .Content(@<div class="jobAllocation"> @RenderSelectableGrid() </div>); }) )