带有剑道网格的复选框列

Posted 2023-05-07

【中文标题】带有剑道网格的复选框列

【英文标题】：Checkbox column with Kendo grid

【发布时间】：2013-04-17 15:10:12

【问题描述】：

我想在网格下方添加一个复选框列作为第一列。 谁能帮我添加一下吗？

 @(html.Kendo().Grid(Model)
      .Name("items")
      .Columns(columns =>
      
          columns.Bound(p => p.itemname).Title("Name");
          columns.Bound(p => p.cost).Title("Cost");
          columns.Bound(p => p.stockinhand).Title("Stock in hand");
          columns.Command(command => command.Destroy()).Width(100);
      )
     .Pageable()
             .DataSource(dataSource => dataSource
                .Server() 
                .Model(model => model.Id(p=>p.Id))
                .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
            )
)

【参考方案1】：

我就是这样做的：

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />")

然后在javascript上：

   $(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('IsAdmin', checked);
    )
)

【讨论】：

在行内编辑模式下使用网格，如何在行进入编辑模式之前禁用此复选框？

如何添加数据标签？我试过 ==> columns.Template(@).ClientTemplate("")

【参考方案2】：

我通常在模型中添加一个布尔列；喜欢以下。

@(Html.Kendo().Grid(Model)
  .Name("items")
  .Columns(columns =>
  
      columns.Bound(p => p.status).ClientTemplate("<input type='checkbox' disabled #= status == true ? checked='checked' : '' # />");
      columns.Bound(p => p.itemname).Title("Name");
      columns.Bound(p => p.cost).Title("Cost");
      columns.Bound(p => p.stockinhand).Title("Stock in hand");
      columns.Command(command => command.Destroy()).Width(100);
  )
 .Pageable()
         .DataSource(dataSource => dataSource
            .Server() 
            .Model(model => model.Id(p=>p.Id))
            .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
        )
)

要禁用它，直到您按下“编辑”按钮，只需在 ClientTemplate 中添加“禁用”。那应该这样做。谢谢。

【参考方案3】：

您好，您可以在标题和列中添加复选框，如下所示：

columns.Bound(p => p.Status).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);

然后找到复选框点击如下：

//Cell click Checkbox select
$('#Grid').on("click", "td", function (e) 
    var selectedTd = $(e.target).closest("td");
        var grdChkBox = selectedTd.parents('tr').find("td:first").next("td").find('input:checkbox');
        grdChkBox.prop('checked', !grdChkBox.prop('checked'));

);

并检查所有复选框功能，如下所示：

function ToggleChkBox(flag) 
    $('.chkbxq').each(function () 
        $(this).attr('checked', flag);
    );

【参考方案4】：

您可以在每行中添加带有标题的复选框，

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("Grid")
.Columns(columns => 
    columns.Select();
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice);
    columns.Bound(p => p.UnitsInStock);
    columns.Bound(p => p.Discontinued);
)
.Pageable()
.Sortable()
.Events(ev=>ev.Change("onChange"))
.PersistSelection()
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.ProductID))
    .Read(read => read.Action("Selection_Read", "Grid"))
))

这里我们使用 PersistSelection() 在所有页面中持久保存所选项目。

如果 column.Select() 出错或未绑定网格，则升级您的 kendo UI 版本。它会起作用的。