केंडो यूआई ग्रिड केवल एक समय में एक पंक्ति का विस्तार करें

Question

मेरे पास एक केंडो ग्रिड है जो मैं केवल विस्तार के संपादन के लिए एक पंक्ति का विस्तार करने में सक्षम होना चाहता हूं। ऐसा करने का सबसे आसान तरीका क्या है?

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

समाप्त होता है यह वास्तव में सरल है। बस इन कुछ लाइनों को जोड़ें।

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

मुझे उम्मीद है कि यह किसी की मदद करेगा।

Answer 2

यह काम करता है इसके अलावा यह पुरानी विस्तार पंक्ति को हटा नहीं देता है। प्रत्येक पूर्व खुली विस्तार पंक्ति को हटाने के लिए बिट चिह्नित नया जोड़ें।

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

ट्रे के जवाब पर बिल्डिंग, इस संस्करण में किसी भी ग्रिड के लिए सामान्य रूप से काम करते हैं (@ 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> 

Answer 4

उत्तर देने के लिए

इसके अलावा पहले से ही यहाँ, मैंने पाया कि हैचेट के और डैनी ब्लू के जवाब के संयोजन और का उपयोग करके 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 
}