问题
I have following Kendo Grid ans associated jQuery. On a button click, I need to know whether checkbox is checked. But at present it is showing 'false' always. How can we correct it?
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function ()
{
$('#btnMove').click(function () {
var sourcegrid = $('#GridParent').data('kendoGrid'); //SOURCE GRID
var destinationgrid = $('#ChildGrid').data('kendoGrid'); // DESTINATION GRID
alert('Button Clicked');
var grid = $("#GridParent").data("kendoGrid");
var datatItem = grid.dataItem(grid.tbody.find('tr:eq(2)'));
var selectedTd = $(datatItem).find('td:eq(0)').is(':checked');
alert(selectedTd);
//destinationgrid.dataSource.add(datatItem);
</script>
@model IEnumerable<KendoPratapSampleMVCApp.Models.StudentDetails>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm())
{
@(Html.Kendo().Grid<KendoPratapSampleMVCApp.Models.StudentDetails>()
.Name("GridParent")
.Columns(columns => {
columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' />").ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(30);
columns.Bound(p => p.studentId).Filterable(false).Width(90);
columns.Bound(p => p.studentName).Filterable(false).Width(90);
columns.Bound(p => p.StudentBranch).Filterable(false).Width(90);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.HtmlAttributes(new { style = "height:250px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "StudentDtls"))
)
)
<input id="btnMove" type="button" value="Move" />
Update: Image
Edit : HTML Markup
<h2>Index</h2>
<form action="/StudentDtls" method="post"><div class="k-widget k-grid" id="GridParent" style="height:250px;"><div class="k-grid-header"><div class="k-grid-header-wrap"><table><colgroup><col style="width:30px" /><col style="width:90px" /><col style="width:90px" /><col style="width:90px" /></colgroup><tr><th class="k-header" data-field="studentclass" data-title="studentclass" scope="col"><input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' /></th><th class="k-header" data-field="studentId" data-title="student Id" scope="col"><a class="k-link" href="/StudentDtls/Orders_Read?GridParent-sort=studentId-asc">student Id</a></th><th class="k-header" data-field="studentName" data-title="student Name" scope="col"><a class="k-link" href="/StudentDtls/Orders_Read?GridParent-sort=studentName-asc">student Name</a></th><th class="k-header" data-field="StudentBranch" data-title="Student Branch" scope="col"><a class="k-link" href="/StudentDtls/Orders_Read?GridParent-sort=StudentBranch-asc">Student Branch</a></th></tr></table></div></div><div class="k-grid-content" style="height:200px"><table><colgroup><col style="width:30px" /><col style="width:90px" /><col style="width:90px" /><col style="width:90px" /></colgroup><tbody><tr class="t-no-data"><td colspan="4"></td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">No items to display</span></div></div><script>
jQuery(function(){jQuery("#GridParent").kendoGrid({"columns":[{"title":"studentclass","width":"30px","template":"\u003cinput id=\u0027checkbox\u0027 onclick=\u0027grdChkBoxClick(this); \u0027 class=\u0027chkbxq\u0027 type=\u0027checkbox\u0027 /\u003e","field":"studentclass","sortable":false,"filterable":false,"encoded":true},{"title":"student Id","width":"90px","field":"studentId","filterable":false,"encoded":true},{"title":"student Name","width":"90px","field":"studentName","filterable":false,"encoded":true},{"title":"Student Branch","width":"90px","field":"StudentBranch","filterable":false,"encoded":true}],"pageable":{"buttonCount":10},"sortable":true,"selectable":"Multiple, Row","filterable":true,"resizable":true,"reorderable":true,"dataSource":{"transport":{"prefix":"","read":{"url":"/StudentDtls/Orders_Read"}},"pageSize":20,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"studentId":{"type":"string"},"studentName":{"type":"string"},"StudentBranch":{"type":"string"},"studentclass":{"type":"number"}}}}}});});
回答1:
hi try this code,
$('#Submit1').click(function () {
var grid = $("#grid12").data("kendoGrid");
var selected = grid.tbody.find('td').find('.chkbxq').is(':checked');
var checkid = grid.tbody.find('td').find('.chkbxq').attr('id');
var cellIndex = grid.tbody.find('td').find('.chkbxq:checked').parent().index();
var rowIndex = grid.tbody.find('td').find('.chkbxq:checked').parent().parent().index();
var dataitem = grid.dataItem(grid.tbody.find('tr:eq(' + rowIndex + ')'));
sampleItem = dataitem.SampleItems;
sampleCode = dataitem.SampleCode;
sampledescription = dataitem.SampleDescription;
alert(sampleItem + "--" + sampleCode + "--" + sampledescription);
});
My Grid
<input id="Submit1" type="button" value="SubmitValue" />
@(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
.Name("grid12")
.Columns(columns =>
{
columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox' />").ClientTemplate("<input id='checkbox' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleDescription);
columns.Bound(p => p.SampleCode);
columns.Bound(p => p.SampleItems);
})
.AutoBind(true) // here I am disabling automatic binding at page load
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Test"))
)
)
来源：https://stackoverflow.com/questions/18072075/checkbox-is-always-coming-as-unchecked