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

时间:2018-07-12 06:18:35

标签: javascript kendo-grid kendo-asp.net-mvc kendo-tabstrip

我有两个剑道网格。在那些网格中,我有一列是一个复选框。用户可以使用该列一次选择行或全部。

它对于在页面中独立的一个网格工作正常。但是另一个网格位于选项卡中。并且在该网格中,此复选框列不起作用。

错误CS0412'项目':参数或局部变量的名称不能与方法类型参数相同。

错误CS0412'__razor_template_writer':参数或局部变量不能与方法类型参数具有相同的名称。

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>

1 个答案:

答案 0 :(得分:0)

这实际上是与在Razor代码中嵌套内联模板有关的语法问题。我已通过将Grid声明为助手来解决此问题,并通过在TabStrip模板内调用该助手来呈现它。

@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>);
    })
)