Asp.net mvc 剑道UI网格一次只展开一行

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

@(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>

@（Html.Kendo（）.Grid（））
.Name（“MyGrid”）
.ClientDetailTemplateId（“MyTemplate”）
.列（列=>
{
columns.Bound（b=>b.Code）；
columns.Bound（b=>b.Name）；
columns.Bound（b=>b.Description）；
...
Command（cmd=>{cmd.Edit（）；cmd.Destroy（）；}）；
})
.ToolBar（ToolBar=>ToolBar.Create（））
.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{projectd=Model.projectd}））
.Update（Update=>Update.Action（“更新”、“系统维护”））
.Destroy（Destroy=>Destroy.Action（“Destroy”、“SysMaint”））
)
)
@（Html.Kendo（）.TabStrip（））
.Name（“TabStrip#=Id#”）
.已选择索引（0）
.项目（项目=>
{
items.Add（）；
items.Add（）；
})
.ToClient模板（）
)

最后，这真的很简单。加上这几行就行了

      ...
      .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>

。。。
.Update（Update=>Update.Action（“更新”、“系统维护”））
.Destroy（Destroy=>Destroy.Action（“Destroy”、“SysMaint”））
)
.Events（Events=>Events.DetailExpand（“DetailExpand”））
)
var expandedRow；
函数detailExpand（e）{
//一次只能打开一个
if（expandedRow！=null&&expandedRow[0]！=e.masterRow[0]）{
var grid=$（'#MyGrid'）。数据（'kendoGrid'）；
网格。折叠箭头（展开箭头）；
}
expandedRow=e.masterRow；
}

---

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

除了不会删除旧的详细信息行外，它还能正常工作。添加标记为“新建”的位以删除以前打开的每个详细信息行

if (expandedRow != null && expandedRow != e.masterRow[0]) {
    var grid = $('#RequestsGrid').data('kendoGrid');
    grid.collapseRow(expandedRow);
    expandedRow[0].nextElementSibling.remove(); //NEW
}
expandedRow = e.masterRow;

---

基于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>

功能详细信息扩展（ev）{
var expandedRow=$（ev.sender.wrapper）.data（'expandedRow'）；
//一次只能打开一个
如果（expandedRow&&expandedRow[0]！=ev.masterRow[0]）{
var grid=$（ev.sender.wrapper）.data（'kendoGrid'）；
网格。折叠箭头（展开箭头）；
}
$（ev.sender.wrapper）.data（'expandedRow'，ev.masterRow）；
}

除了这里已经给出的答案之外，我发现通过结合hatchet和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
}

---

您可以使用$（e.sender.wrapper）.data（'kendoGrid'），而不是对网格名称进行编码。这将适用于任何网格。我添加了你的新行。在我的情况下，它会生成行，因此无法再次打开。但是，我想你有一个好主意-我想知道这个的一个变体是否可以解决编辑模式下的多子女网格问题。嗯，这很奇怪。我正在我的应用程序中使用该变体。您确定要将您的网格id用于var grid吗？对于那些陷入IE领域的人，

expandedRow[0]。nextElementSibling.remove（）

可以替换为它的jQuery等价物

expandedRow.next（）.remove（）