Geek asks and answers

Kendo UI Grid Expands Only One Row At A Time

I have a Kendo grid for which I would only like to expand one line at a time to edit the details. What is the easiest way to do this?

@(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>
+5
source share
4 answers

In the end, it is very simple. Just add these few lines.

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

Hope this helps someone.

+8
source

This works, except that the old row of details is not deleted. Add a bit marked NEW to remove each previously opened detail line.

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

Based on Trey's answer, this version will work in the general case for any grid (using the @vikasde clause), and will also work when you have nested grids, so that the child grid will not destroy its parent grid line as a side effect when calling 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>
+2
source

In addition to the answers already here, I found that combining the answers with the ax and Danny Blue, and using the event DetailCollapseworks fine and will remove the main content if the line crashes manually.

MVC grid configuration:

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

Page Scripts:

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
}
0
source

More articles:


All Articles