anyone have any example with grid mvc in detail with tabs

[Francisco]

i just found a good example with blazor

https://www.syncfusion.com/blogs/post/creating-a-master-detail-view-is-easier-with-blazor-datagrid.aspx

and i want to know if anyone have the same with asp.net mvc

thanks

[Sujith Kumar Rajkumar]

Hi Francisco, 

 

Greetings from Syncfusion support. 

 

You can achieve the same requirement in MVC Grid using the below steps, 

 

Initially a MVC Grid is initialized with detail template as documented in this help link and detailDataBound event is bound to it. As in the mentioned help link, the detail contents are rendered as html elements inside this detail template tag along with a div element for rendering the Tab component as demonstrated in the below code snippet, 

 

<div id="ControlRegion">   

@Html.EJS().Grid("DetailTemplate").DetailDataBound("detailDataBound") 

.DataSource((IEnumerable<object>)ViewBag.dataSource) 

.DetailTemplate("#detailtemplate").  

Render() 

</div> 

<script type="text/x-template" id="detailtemplate"> 

    <div> 

        <div class="custom-tab"></div> 

        // Detail content for the particular Grid record is rendered below  

        <table class="detailtable" width="100%"> 

           . 

           . 

    </div> 

</script> 

  

Now in the detailDataBound event handler a div element is created and a Grid control with the required data is initialized and appended to the created div element. Now the Tab control is initialized here with the detail content element rendered in the detail template as one of its item content. The div element with Grid control initialized is set as another tab item’s content. This is demonstrated in the below code snippet, 

 

// Grid’s detailDataBound event handler 

function detailDataBound(args) { 

        // Element for appending the Grid to be rendered inside Tab 

        var gridEle = document.createElement('div'); 

        var data = @Html.Raw(Json.Encode(ViewBag.ChildDataSource)); 

        // Data for the Grid 

        data = data.filter(function (item) { 

            return item['EmployeeID'] === args.data['EmployeeID']; 

        }); 

        // Grid to be rendered inside Tab is initialized here 

        var detail = new ej.grids.Grid({ 

            dataSource: data, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', width: 110 }, 

                { field: 'CustomerID', headerText: 'Customer Name', width: 140 } 

            ] 

        }); 

        // Render initialized Grid component 

        detail.appendTo(gridEle); 

 

        var tabObj = new ej.navigations.Tab({ 

            items: [ 

                { 

                    header: { 'text': 'Detail' }, 

                    // Detail element rendered inside Grid’s detail template  

                    content: args.detailElement.querySelector('.detailtable') 

                }, 

                { 

                    header: { 'text': 'Grid' }, 

                    // Grid element 

                    content: gridEle 

                } 

            ] 

        }); 

        //Render initialized Tab component on the element rendered in Grid’s detail template 

        tabObj.appendTo(args.detailElement.querySelector('.custom-tab')); 

} 

 

Finally the Detail template content can be customized with the required styles. 

 

<style type="text/css" class="cssStyles"> 

    .detailtable td { 

        font-size: 13px; 

        padding: 4px; 

        max-width: 0; 

        overflow: hidden; 

        text-overflow: ellipsis; 

        white-space: nowrap; 

    } 

</style> 

 

We have prepared a sample based on this for your reference. You can download it from the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/155560/ze/GridDetailTemplateWithTab720982343  

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Francisco]

Amazing Sujith , its its posible to have the same functionality of this demo> i refer to https://www.syncfusion.com/blogs/post/creating-a-master-detail-view-is-easier-with-blazor-datagrid.aspx

where the controls area write directly in html instead of write by javascript and more interactive to load data only of the detail selected , instead load all data in viewbag?

thanks a lot by your kindle answer

[Sujith Kumar Rajkumar]

Hi Francisco, 

Since the detail template is defined using the x-template tag the Tab and Grid control cannot be initialized inside there. So for this case the controls need to be initialized from the JavaScript code only. By – “More interactive to load data only of the detail selected , instead load all data in viewbag?” we suspect your query here is to return only the data for the particular Grid instead of the entire data from view bag. If so you can achieve it by sending an ajax request to a server method with the row data and perform the filtering operation in that server method instead of in the detailDataBound event handler and assign the returned data as the Grid’s data source. 

// Grid’s detailDataBound event handler  

function detailDataBound(args) {  

        // Element for appending the Grid to be rendered inside Tab  

        var gridEle = document.createElement('div');  

        // Ajax post is sent with Grid’s expanded row data  

        var ajax = new ej.base.Ajax({  

                url: 'Home/GetChildRecords',  

                type: 'POST',  

                contentType: 'application/json; charset=utf-8',  

                data: JSON.stringify(args.data),  

                successHandler: function (data) {  

                    // Filtered data that is returned from the server 

                    var filteredChildGridData = JSON.parse(data).result; 

                    // Grid to be rendered inside Tab is initialized here  

                    var detail = new ej.grids.Grid({  

                          dataSource: filteredChildGridData,  

                          columns: [  

                              { field: 'OrderID', headerText: 'Order ID', width: 110 },  

                               { field: 'CustomerID', headerText: 'Customer Name', width: 140 }  

                          ]  

                    });  

                    // Render initialized Grid component  

                    detail.appendTo(gridEle); 

                              . 

                              . 

                    //Render initialized Tab component on the element rendered in Grid’s detail template  

                   tabObj.appendTo(args.detailElement.querySelector('.custom-tab')); 

                }  

        });  

        ajax.send(); 

}  

Let us know if you have any concerns. 

Regards, 

Sujith R