KendoUI Grid选择行选择复选框，反之亦然

Question

如何在Kendo Grid的复选框选中的事件中选择行？

       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？

Answer 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; }
 }

Answer 2

这是网格的客户端模板方法的片段。

"<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
    };