【问题标题】:Checkbox is always coming as unchecked复选框始终未选中
【发布时间】:2013-08-06 04:56:48
【问题描述】:

我关注 Kendo Grid 和关联的 jQuery。单击按钮时,我需要知道是否选中了复选框。但目前它总是显示“假”。我们该如何纠正它?

@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" />

更新:图片

编辑:HTML标记

  <h2>Index</h2>
    <form action="/StudentDtls" method="post"><div class="k-widget&#32;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&#32;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&#32;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&#32;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&#32;k-grid-pager"><a class="k-link&#32;k-state-disabled" data-page="1" href="#" title="Go&#32;to&#32;the&#32;first&#32;page"><span class="k-icon&#32;k-i-seek-w">seek-w</span></a><a class="k-link&#32;k-state-disabled" data-page="0" href="#" title="Go&#32;to&#32;the&#32;previous&#32;page"><span class="k-icon&#32;k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers&#32;k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link&#32;k-state-disabled" data-page="2" href="#" title="Go&#32;to&#32;the&#32;next&#32;page"><span class="k-icon&#32;k-i-arrow-e">arrow-e</span></a><a class="k-link&#32;k-state-disabled" data-page="1" href="#" title="Go&#32;to&#32;the&#32;last&#32;page"><span class="k-icon&#32;k-i-seek-e">seek-e</span></a><span class="k-pager-info&#32;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"}}}}}});});

【问题讨论】:

  • 使用 Id 直接访问
  • 您在 td 元素上应用 is(':checked') 而不是在复选框上
  • 哦,好吧,当我们选中复选框然后按下按钮时,我得到了 gridview 和 checkbox 列,我需要移动到另一个网格,所以,这就是我想用那个 selcetdTd 做的事情。 ..但我被困在找到选中的复选框并为此获取相应的数据项
  • Tushar 的回答是正确的。需要进行一些修改,但只能在查看生成的 HTML 后提出建议
  • @anu 我使用了下面的代码仍然是错误的......

标签: jquery asp.net-mvc kendo-ui kendo-grid telerik-mvc


【解决方案1】:

你好试试这个代码,

 $('#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);

        });

我的网格

 <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"))
     )
  )

【讨论】:

  • 非常感谢 jaimin .....我现在可以得到它......但是我需要检查相应复选框的数据项......我怎么能得到那个......
  • 我已经使用了这个属性...这正在工作var dataitem = grid.dataItem(grid.tbody.find('tr:eq(' + rowIndex + ')' ...非常感谢
猜你喜欢
  • 2014-11-12
  • 1970-01-01
  • 2014-04-10
  • 1970-01-01
  • 2011-04-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-04-01
相关资源
最近更新 更多