6

我有一个剑道网格，我希望一次只能扩展一行以进行详细编辑。最简单的方法是什么？

@(Html.Kendo().Grid<MyModel>()
   .Name("MyGrid")
   .ClientDetailTemplateId("MyTemplate")
   .Columns(columns =>
   {
       columns.Bound(b => b.Code);
       columns.Bound(b => b.Name);
       columns.Bound(b => b.Description);
       ...
       columns.Command(cmd => { cmd.Edit(); cmd.Destroy(); });
   })
   .ToolBar(toolbar => toolbar.Create())
   .Editable(editable => editable.Mode(GridEditMode.InLine))
   .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model => model.Id(a => a.Id))
      .Create(create => create.Action("Create", "SysMaint", new { id = Model.ProjectId }))
      .Read(read => read.Action("Read", "SysMaint", new { projectId = Model.ProjectId }))
      .Update(update => update.Action("Update", "SysMaint"))
      .Destroy(destroy => destroy.Action("Destroy", "SysMaint"))
   )
)

<script id="MyTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
       .Name("TabStrip_#=Id#")
       .SelectedIndex(0)
       .Items(items =>
           {
               items.Add().Text("A").LoadContentFrom("MyPartialA", "SysMaint", new { id = "#=Id#" });
               items.Add().Text("B").LoadContentFrom("MyPartialB", "SysMaint", new { id = "#=Id#" });
           })
       .ToClientTemplate()
    )
</script>
4

4 回答 4

10

结束这真的很简单。只需添加这几行。

      ...
      .Update(update => update.Action("Update", "SysMaint"))
      .Destroy(destroy => destroy.Action("Destroy", "SysMaint"))
   )
   .Events(events => events.DetailExpand("detailExpand"))
)

<script type="text/javascript">
    var expandedRow;
    function detailExpand(e) {
        // Only one open at a time
        if (expandedRow != null && expandedRow[0] != e.masterRow[0]) {
            var grid = $('#MyGrid').data('kendoGrid');
            grid.collapseRow(expandedRow);
        }
        expandedRow = e.masterRow;
    }
</script>

我希望这对某人有所帮助。

于 2013-02-13T03:01:53.740 回答
5

这有效，只是它不会删除旧的详细信息行。添加标记为 NEW 的位以删除每个先前打开的详细信息行。

if (expandedRow != null && expandedRow != e.masterRow[0]) {
    var grid = $('#RequestsGrid').data('kendoGrid');
    grid.collapseRow(expandedRow);
    expandedRow[0].nextElementSibling.remove(); //NEW
}
expandedRow = e.masterRow;
于 2013-09-12T19:31:07.027 回答
3

基于 Trey 的回答，这个版本一般适用于任何网格（使用@vikasde 的建议），并且当您有嵌套网格时也可以工作，因此在调用 detailExpand 时子网格不会将其父网格行折叠为副作用。

<script type="text/javascript">
    function detailExpand(ev) {
        var expandedRow = $(ev.sender.wrapper).data('expandedRow');
        // Only one open at a time
        if (expandedRow && expandedRow[0] != ev.masterRow[0]) {
            var grid = $(ev.sender.wrapper).data('kendoGrid');
            grid.collapseRow(expandedRow);
        }
        $(ev.sender.wrapper).data('expandedRow', ev.masterRow);
    }
</script>
于 2015-06-05T17:43:24.260 回答
2

除了此处已有的答案，我发现通过结合斧头和 Danny Blue 的答案并使用该DetailCollapse事件可以很好地工作，并且如果手动折叠一行，则会删除底层的详细内容。

MVC 网格配置：

.Events(ev =>
    {
      ev.DetailExpand("detailExpand");
      ev.DetailCollapse("detailCollapse");
    })

页面脚本：

function detailExpand(ev) { // Credit hatchet
    var expandedRow = $(ev.sender.wrapper).data('expandedRow');
    // Only one open at a time
    if (expandedRow && expandedRow[0] !== ev.masterRow[0]) {
        var $grid = $(ev.sender.wrapper).data('kendoGrid');
        $grid.collapseRow(expandedRow);
    }
    $(ev.sender.wrapper).data('expandedRow', ev.masterRow);
}
function detailCollapse(ev) {
    var expandedRow = $(ev.sender.wrapper).data('expandedRow');
    expandedRow.next().remove(); // Credit Danny Blue
}
于 2017-10-16T14:41:52.037 回答