Siatka Kendo UI rozrasta się tylko o jeden wiersz na raz.

Question

Mam siatkę Kendo, którą chciałbym rozszerzyć tylko o jeden wiersz w celu edycji szczegółów. Jaki jest najprostszy sposób to zrobić?

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

Kończy się to jest naprawdę proste. Po prostu dodaj te kilka linii.

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

Mam nadzieję, że to pomoże komuś.

Answer 2

Działa, ale nie usuwa starego wiersza szczegółów. Dodaj bit oznaczony jako NEW, aby usunąć każdy poprzednio otwarty wiersz szczegółów.

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

Opierając się na odpowiedź Trey, ten wersja będzie działać ogólnie do dowolnej sieci (za pomocą sugestii @ vikasde użytkownika), a także będzie działać, gdy masz zagnieżdżone siatek, tak że siatki dziecka podczas wywoływania detailExpand, nie będzie zwinąć wiersz siatki rodzica jako efekt uboczny.

<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

nawiązaniu do odpowiedzi już tutaj, stwierdziliśmy, że łącząc Hatchet-tych i odpowiedzi Danny niebieski i używając zdarzenie DetailCollapse działa ładnie i usunie podstawowej zawartości szczegółów, jeśli wiersz jest zwinięta ręcznie.

konfiguracja MVC Grid:

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

skrypty strona:

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 
}