行选择上的 KendoUI Grid 选择复选框，反之亦然答案

【问题标题】：KendoUI Grid select checkbox on row selection or vice versa行选择上的 KendoUI Grid 选择复选框，反之亦然
【发布时间】：2014-04-05 16:36:27
【问题描述】：

如何在 Kendo Grid 中的 checkbox 的选中事件上选择行？

       columns: [
           { field: "cost_ID", title: "Tick", sortable: false, width: 30, headerTemplate: "<input type='checkbox' class='check_row' id='chkSelectAll' onclick='checkAll(this)'/>",template:"<input class='check_row' type='checkbox' name='gridcheckbox' id='#=cost_ID#' />" }

如何获取每一行的复选框 ID？

【问题讨论】：

标签： jquery asp.net-mvc checkbox kendo-ui kendo-grid

【解决方案1】：

这样试试，

查看

<div id="divasd">
    </div>

      @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
        .Name("grid12")
        .Columns(columns =>
        {
            columns.Bound(p => p.studentclass).ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
            columns.Bound(p => p.SampleDescription);
            columns.Bound(p => p.SampleCode);
            columns.Bound(p => p.SampleItems);

   })
            .Pageable()
            .Navigatable()
            .Sortable()
            .Groupable()
            .Events(events => events.DataBound("_GridItemDataBound"))
            .DataSource(dataSource => dataSource
            .Ajax()
                .Model(model => model.Id(p => p.inx))
               .Read(read => read.Action("Read", "Test"))   
         )
      )

脚本

   $('#grid12').on("click", ".chkbxq", function (e) {
                    var selectedTd = $(this).is(':checked');

                    var rowIndex = $(this).parent().index();
                    var cellIndex = $(this).parent().parent().index();
                    var grid = $("#grid12").data("kendoGrid");
                    var datatItem = grid.dataItem(grid.tbody.find('tr:eq(' + cellIndex + ')'));

                    if (selectedTd == true) {
                        sampleItem = datatItem.SampleItems;
                        sampleCode = datatItem.SampleCode;
                        sampledescription = datatItem.SampleDescription;

                        datavalueitem = sampleItem + "--" + sampleCode + "--" + sampledescription;

                        $.ajax({
                            url: '@Url.Action("NewGridView", "Test")',
                            type: "Post",
                            data: { sampleItem: sampleItem, sampleCode: sampleCode, sampledescription: sampledescription },
                            dataType: 'json',
                            success: function (result) {
                                $("#mygrid").val(null);
                                var customDataList = $('#grid');
                                customDataList.empty();
                                customDataList.append(result.Data);
                                customDataList.append(result.Data);
                                $("#divasd").html('');
                                $("#divasd").append(result.Data);
                                $("#divasd").kendoGrid({
                                                     dataSource: result,
                                                     sortable: true,
                                                     pageable: {
                                                     refresh: true,  
                                                     pageSizes: true
                                                     },
                                                     columns: [{
                                                     field: "SampleDescription",
                                                     width: 90,
                                                     }, {
                                                     field: "SampleCode",
                                                     width: 90,
                                                     }, {
                                                     width: 100,
                                                     field: "SampleItems"
                                                     }
                                                     ]
                                                     });
            }
                        });
                    }


                });

控制器

  public JsonResult NewGridView(string sampleItem, string sampleCode, string sampledescription)
      {

    List<SampleModel> sampleAddList = new List<SampleModel>();
    SampleModel sampleAdd = new SampleModel();
    sampleAdd.SampleCode = sampleCode;
    sampleAdd.SampleDescription = sampledescription;
    sampleAdd.SampleItems = sampleItem;

    sampleAddList.Add(sampleAdd);
    var result = sampleAddList;
    return Json(result, JsonRequestBehavior.AllowGet);
  }

型号

 public class SampleModel
 {
        public int inx { get; set; }
        public bool studentclass { get; set; }
        public string SampleDescription { get; set; }
        public string SampleCode { get; set; }
        public string SampleItems { get; set; }
 }

【讨论】：

【解决方案2】：

这是来自网格的客户端模板方法的 sn-p。

"<select id='\\#= OrderDetailId \\#' onchange=SaveIncludeInForecast('\\#= OrderDetailId \\#','\\#= ProposalId \\#'); style='Width: 80px; color: 'navy' > " +
                                    "<option id='yes'  value='1'>Yes</option>" +
                                    "<option id='no' selected value='0'>No</option>"

您会看到我将 id 设置为 OrderDetailId。然后在我的 JS 函数中，我传入 OrderDetailId。

 function SaveIncludeInForecast(orderDetailId, proposalId) {                 
    var ddl = '#' + orderDetailId;

    var dataToSend = {            
        val: $(ddl).val()!=0?true:false
    };

【讨论】：