如何在Kendo Grid中添加Checked Column

时间:2015-06-24 11:22:12

标签: asp.net-mvc checkbox kendo-ui grid selector

@model IEnumerable<Pardon.Models.ViewModel.StudendsShowCreatAddViewModel>
<h2>@ViewBag.Title</h2>

    @(Html.Kendo().Grid(Model)
                  .Name("grid")                      
          .Columns(columns =>
          {
              columns.Bound(model => model.ISSelected).Template(@<text></text>).ClientTemplate("<input type='checkbox' #= ISSelected ? checked='checked':'' # class='chkbx' />");
              //columns.Bound(model => model.ISSelected)///Bound(model => model.ISSelected)
              //.ClientTemplate("<input type='checkbox' #= ISSelected ? checked='checked' : '' # disabled='enabled' ></input>");
                  columns.Bound(model => model.CoursesSystem_ID).Visible (false);
                  columns.Bound(model => model.per_Name);
                  columns.Bound(model => model.per_Family);
                  columns.Bound(model => model.stu_ID).Visible (false);

              })
            .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Action("CreateStudents", "CoursesSystem", new {_StudendsShowCreatAddViewModel = @Model }).Text("ثبت");
                        }
            )
            .Groupable()
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .DataSource(dataSource => dataSource
                                        .Server()
                        )                         
    )


<script>
    $(function() {
        $('#grid').on('click', '.chkbx', function() {
            var checked = $(this).is(':checked');
            var grid = $('#grid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('ISSelected', checked);
        });
    });
</script>

我尝试使用上面的列属性Boolean ==>Isselected来检查Column和Editable,但它不起作用。

例如,如Photo

1 个答案:

答案 0 :(得分:0)

您正在尝试添加显示复选框的客户端模板。我采用稍微不同的方法设置CSS类,以便在未编辑行时,我将显示勾选或交叉,具体取决于基础值,然后单击单元格开始编辑时,将显示复选框。您可以选择添加其他CSS,使得刻度线为绿色,交叉为红色。

Discipline

顺便提一下,上面是使用Font Awesome类。