Kendo UI Grid Nur eine Zeile auf einmal erweitern

Question

Ich habe eine Kendo Grid, die ich nur eine Zeile auf einmal für die Detailbearbeitung erweitern könnte. Was ist der einfachste Weg, dies zu tun?

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

Answer 1

Dies ist wirklich einfach. Füge einfach diese paar Zeilen hinzu.

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

Ich hoffe, das hilft jemandem.

Answer 2

Das funktioniert, aber es entfernt nicht die alte Detailzeile. Fügen Sie das mit NEW markierte Bit hinzu, um jede zuvor geöffnete Detailzeile zu entfernen.

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

Answer 3

Aufbauend auf Trey Antwort, wird diese Version allgemein für jedes Raster arbeiten (@ vikasde Vorschlag verwendet wird), und wird auch funktionieren, wenn Sie verschachtelte Gitter haben, so dass das Kind Gitter, wenn die detailExpand Aufruf, wird nicht Reduzieren Sie die übergeordnete Rasterzeile als Nebeneffekt.

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

Answer 4

Zusätzlich zu den Antworten schon hier, fand ich, dass Beil und Danny Blues Antworten und mit der DetailCollapse Veranstaltung funktioniert gut und wird entfernen Sie den darunter liegende Detail Inhalt, wenn eine Zeile zusammengebrochen wird manuell durch die Kombination.

MVC Grid-Konfiguration:

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

Seite Skripte:

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 
}