2013-02-13 127 views
5

我有一个网格剑道,我想只能在一个时间细节编辑扩大一行。什么是最简单的方法来做到这一点?剑道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> 

回答

8

最后这个很简单。只需添加这几行。

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

我希望这有助于某人。

+5

你可以使用$(e.sender.wrapper)。数据( 'kendoGrid'),而不是harcoding电网名。这将随后与任何网格一起工作。 – vikasde 2013-06-13 15:28:01

4

除了它那工作不删除旧的详细信息行。添加标记为NEW的位以删除以前打开的每个细节行。

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

我添加了你的新行。在我的情况下,它然后使行,所以它不能再次打开。但是,我认为你有一个好主意 - 我想知道这种变化是否可以解决多子网格编辑模式问题。 – 2013-09-12 20:40:08

+0

嗯那是奇怪的。我正在为我的应用使用该变体。你确定使用你的网格ID为VAR网格吗? – 2013-09-19 15:02:32

+0

对于我们这些坚持IE浏览器的用户,'expandedRow [0] .nextElementSibling.remove();'可以替换为它的jQuery等价的'expandedRow.next()。remove();' – 2014-08-07 05:56:26

2

对三分球的回答大厦,这个版本将一般适用于任何电网(使用@ 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> 
0

继答案已经在这里,我发现,通过结合前嫌的和丹尼蓝的回答,并使用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 
}