Master-Detail Grid for ASP.NET Core

[Urs Kuoni]

I am looking for the Master-Detail Grid on the ASP.NET Core Platform, but I couldn't found any Sample for it.

I found only two possibilities to resolve this (row-selected, child-grid) but no syntax examples anywhere.

Is it possible in  ASP.NET Core and how it works?

Thank you for your support.

[Seeni Sakthi Kumar Seeni Raj]

Hi Urs, 

In the row-Selected event of the Master Grid, you have to call the dataSource method of the child Grid to update them. Refer to the following code example and Help Documents for Asp.Net Core. 

<ej-grid id="ParentGrid" allow-filtering="true" allow-paging="true" row-selected="onRowSelect" selected-row-index="0"> 

    <e-datamanager json="(IEnumerable<object>)ViewBag.parent" /> 

          ..  

             ..   

</ej-grid> 

 

<ej-grid id="ChildGrid" allow-filtering="true" allow-paging="true"> 

          . . . 

</ej-grid> 

 

 

<script> 

    var json = @Html.Raw(Json.Serialize(ViewBag.child)); 

    function onRowSelect(args) { 

        var gridObj = $("#ChildGrid").ejGrid("instance"); 

        var value = args.data.EmployeeID; 

        var detaildata = ej.DataManager(json).executeLocal(ej.Query().where("EmployeeID", "equal", value); 

        gridObj.dataSource(detaildata); 

    } 

</script> 

https://help.syncfusion.com/aspnet-core/getting-started 

https://help.syncfusion.com/aspnet-core/grid/getting-started 

DataSource method: https://help.syncfusion.com/api/js/ejgrid#methods:datasource 

We have prepared a sample that can be downloaded from the following location. 

Sample: https://www.syncfusion.com/downloads/support/forum/126952/ze/ASPCore_MasterDetailGrid22983396.zip 

Regards, 

Seeni Sakthi Kumar S. 

[Urs Kuoni]

Hi Urs, 

In the row-Selected event of the Master Grid, you have to call the dataSource method of the child Grid to update them. Refer to the following code example and Help Documents for Asp.Net Core. 

<ej-grid id="ParentGrid" allow-filtering="true" allow-paging="true" row-selected="onRowSelect" selected-row-index="0"> 

    <e-datamanager json="(IEnumerable<object>)ViewBag.parent" /> 

          ..  

             ..   

</ej-grid> 

 

<ej-grid id="ChildGrid" allow-filtering="true" allow-paging="true"> 

          . . . 

</ej-grid> 

 

 

<script> 

    var json = @Html.Raw(Json.Serialize(ViewBag.child)); 

    function onRowSelect(args) { 

        var gridObj = $("#ChildGrid").ejGrid("instance"); 

        var value = args.data.EmployeeID; 

        var detaildata = ej.DataManager(json).executeLocal(ej.Query().where("EmployeeID", "equal", value); 

        gridObj.dataSource(detaildata); 

    } 

</script> 

https://help.syncfusion.com/aspnet-core/getting-started 

https://help.syncfusion.com/aspnet-core/grid/getting-started 

DataSource method: https://help.syncfusion.com/api/js/ejgrid#methods:datasource 

We have prepared a sample that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/126952/ze/ASPCore_MasterDetailGrid22983396.zip 

Regards, 

Seeni Sakthi Kumar S. 

Hi Seeni,

Thank you a lot for your support!

After adding the Statement:

            services.AddMvc().AddXmlSerializerFormatters()
            .AddJsonOptions(x =>
             {
                 x.SerializerSettings.ContractResolver = null;
             });

in "startup.cs" file it works in my application too.

It works now only if the ChildGrid has no e-datamanager Statement like this:

    <e-datamanager
                   update-url="/Home/MovieCellEditUpdate"
                   insert-url="/Home/MovieCellEditInsert"
                   remove-url="/Home/MovieCellEditDelete"
                   adaptor="remoteSaveAdaptor" />

But I want to have CRUD-Operations available in the ChildGrid.

Do you have any idea how the CRUD Operations must be implemented

in the ChildGrid?

Thank you for your support

Urs Kuoni

[Seeni Sakthi Kumar Seeni Raj]

Hi Urs, 

To perform the CRUD operations using the RemoteSavaAdaptor for the Child Grid, you have to bind the data using the DataManager along with the required CRUD urls. Refer to the following code example. 

<ej-grid id="ParentGrid" allow-filtering="true" allow-paging="true"  template-refresh="refresh" row-selected="onRowSelect" selected-row-index="0"> 

    <e-datamanager json="(IEnumerable<object>)ViewBag.parent" /> 

       ..  

            ..  

</ej-grid> 

 

<ej-grid id="ChildGrid" allow-filtering="true" allow-paging="true"> 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" /> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 

    <e-columns> 

        <e-column header-text="Order ID" is-primary-key="true" field="OrderID" /> 

        <e-column header-text="Employee ID" field="EmployeeID" visible="false" /> 

            .. .  

             .. .  

    </e-columns> 

</ej-grid>  

 

<script> 

 

    var json = @Html.Raw(Json.Serialize(ViewBag.child)); 

    function onRowSelect(args) { 

        var gridObj = $("#ChildGrid").ejGrid("instance"); 

        var value = args.data.EmployeeID; 

        var detaildata = ej.DataManager(json).executeLocal(ej.Query().where("EmployeeID", "equal", value)); 

        var dataMgr = ej.DataManager({ 

            json: detaildata, 

            updateUrl: "/Home/CellEditUpdate", 

            insertUrl: "/Home/CellEditInsert", 

            removeUrl: "/Home/CellEditDelete", 

            adaptor: "remoteSaveAdaptor" 

        }) 

        gridObj.dataSource(dataMgr); 

    } 

</script> 

Regards, 

Seeni Sakthi Kumar S. 

[Urs Kuoni]

Hi Seeni,

Thank you a lot for your support!

Now the CRUD operations in the Master-Grid are working well.

In the child Grid I have still 2 Problems.

1. The Grid refreshes only if I leave the view and I return. In this

case he runs the statement

    var json = @Html.Raw(Json.Serialize(ViewBag.child));

and then it refreshes.

2.  For the Insert I need the ID of the selected row of the parent grid,

how can I get it?

Regards

Urs Kuoni  

[Seeni Sakthi Kumar Seeni Raj]

Hi Urs, 

Query #1: The Grid refreshes only if I leave the view and I return 

We are able to reproduce the problem at our end. At the initial load of the child Grid, we have to define the adaptor as the RemoteSaveAdaptor. So that the Grid will aware of the local data and able to update the changes internally while performing editing action in the child Grid. Refer to the following code example. 

<ej-grid id="ParentGrid" allow-paging="true" row-selected="onRowSelect" > 

    <e-datamanager json="(IEnumerable<object>)ViewBag.parent" /> 

           . ..  

           .. .  

    </e-columns> 

    

</ej-grid> 

 

<ej-grid id="ChildGrid" allow-paging="true" > 

    <e-datamanager adaptor="remoteSaveAdaptor" /> 

 

</ej-grid> 

 

<script> 

    var json = @Html.Raw(Json.Serialize(ViewBag.child)); 

    function onRowSelect(args) { 

        var gridObj = $("#ChildGrid").ejGrid("instance"); 

        var value = args.data.EmployeeID; 

        var detaildata = ej.DataManager(json).executeLocal(ej.Query().where("EmployeeID", "equal", value)); 

        var dataMgr = ej.DataManager({ 

            json: detaildata, 

            updateUrl: "/Home/CellEditUpdate", 

            insertUrl: "/Home/CellEditInsert", 

            removeUrl: "/Home/CellEditDelete", 

            adaptor: "remoteSaveAdaptor" 

        }) 

       gridObj.dataSource(dataMgr); 

         

    } 

Query #2: For the Insert I need the ID of the selected row of the parent grid 

We understand that you would like to insert the record in the server based on the Parent Primary key value.  

Grid provides the option to set a default value while inserting a record. Refer to the following API reference for defaultValue (of columns) in Grid. 

https://help.syncfusion.com/api/js/ejgrid#members:columns-defaultvalue 

While updating the dataSource for the child Grid update the defaultValue for the respective foreignkey column. So you can get the value of the primaryKey column (of parent Grid) in the server-side. Refer to the following code example and screenshot. 

<ej-grid id="ParentGrid" allow-paging="true" row-selected="onRowSelect" > 

          . . . 

                . .  

</ej-grid> 

 

<ej-grid id="ChildGrid" allow-paging="true" > 

    <e-datamanager adaptor="remoteSaveAdaptor" /> 

 

    <e-columns> 

        <e-column header-text="Order ID" is-primary-key="true" field="OrderID" /> 

        <e-column header-text="Employee ID" field="EmployeeID" visible="false" />  

              . . . 

 

    </e-columns> 

 

</ej-grid> 

 

<script> 

    var json = @Html.Raw(Json.Serialize(ViewBag.child)); 

    function onRowSelect(args) { 

        var gridObj = $("#ChildGrid").ejGrid("instance"); 

        var value = args.data.EmployeeID; 

        var detaildata = ej.DataManager(json).executeLocal(ej.Query().where("EmployeeID", "equal", value)); 

        var dataMgr = ej.DataManager({ 

            json: detaildata, 

            updateUrl: "/Home/CellEditUpdate", 

            insertUrl: "/Home/CellEditInsert", 

            removeUrl: "/Home/CellEditDelete", 

            adaptor: "remoteSaveAdaptor" 

        }) 

        gridObj.model.columns[1].defaultValue = args.data.EmployeeID; 

        gridObj.dataSource(dataMgr); 

         

    } 

</script> 

 

Regards, 

Seeni Sakthi Kumar S. 

[Urs Kuoni]

Hi Seeni,

Thank you a lot for your support!

Query#2: It works perfect now!

Query#1: As soon as I place the

    <e-datamanager adaptor="remoteSaveAdaptor" /> 

Statement in the ChildGrid the ParentGrid stops working well!

This happens with every e-datamanager statement.

Then I can't perform any CRUD operation on the ParentGrid

anymore. Also I can't even select any row in the ParentGrid

anymore. Is there a solution for editing Parent- and

Child-Grid?

Kind Regards,

Urs Kuoni

[Seeni Sakthi Kumar Seeni Raj]

Hi Urs, 

Since we have given the remoteSaveAdaptor for the child Grid, the Grid treats them as like as adaptor enabled. In this case, Grid needs sometime render the content. So we have to select the parent Grid in the dataBound event of the child Grid instead of using them at the initial render (using selectedRowIndex API). Refer to the following code example. 

<ej-grid id="ParentGrid" allow-paging="true" row-selected="onRowSelect" >  

    <e-datamanager json="(IEnumerable<object>)ViewBag.parent" update-url="/Home/EditUpdate" insert-url="/Home/EditInsert" remove-url="/Home/EditDelete" adaptor="remoteSaveAdaptor" /> 

                . .  

</ej-grid> 

 

<ej-grid id="ChildGrid" allow-paging="true"  action-complete="onDataBound" > 

    <e-datamanager adaptor="remoteSaveAdaptor" /> 

             .. .  

 

</ej-grid> 

 

<script> 

    var json = @Html.Raw(Json.Serialize(ViewBag.child)); 

    function onRowSelect(args) { 

        var gridObj = $("#ChildGrid").ejGrid("instance"); 

                 ..  . 

        gridObj.model.columns[1].defaultValue = args.data.EmployeeID; 

        gridObj.dataSource(dataMgr);  

    } 

    var flag = true; 

    function onDataBound(args){ 

        if(this.initialRender && flag){ 

            flag = false; 

            var gridObj = $("#ParentGrid").ejGrid("instance"); 

            gridObj.selectRows(0); 

        } 

    } 

</script> 

We have prepared  a sample that can be downloaded from the following location. 

Sample: https://www.syncfusion.com/downloads/support/forum/126952/ze/WebApplication8-1211949109.zip 

Regards, 

Seeni Sakthi Kumar S. 

[Urs Kuoni]

Hi Seeni,

Thank you for the support!

We slowly reach the perfect Parent-Child grid. :)

If I select another row in the Parent Grid I loose

the Insert and Delete operations on the Child Grid.

If I leave the view and I return the refresh is done and all is o.k.

kind regards,

Urs Kuoni

[Seeni Sakthi Kumar Seeni Raj]

Hi Urs, 

We are able to reproduce the problem that the child Grid records not persist i.e. deleted/added records not remains after toggling selection in the parent Grid. 

Since you have bound the local data (serialized data) to the Child Grid, changes (deletion/inserting) to the child Grid will not be persists after toggling the selection in the Parent Grid.  You have referred data from the client-end which has been serialized and assigned to the variable Json at the initial render of the Grid and used the same Json local variable to update child grid datasource every time a record is selected in parent grid. It is the cause of the problem. To overcome this problem, we suggested to send a POST requesting data for the child Grid from the server for each row selection in the Parent Grid. 

<ej-grid id="ParentGrid" allow-paging="true" row-selected="onRowSelect"> 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" /> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 

    <e-datamanager json="(IEnumerable<object>)ViewBag.parent" update-url="/Home/EditUpdate" insert-url="/Home/EditInsert" remove-url="/Home/EditDelete" adaptor="remoteSaveAdaptor" /> 

 

</ej-grid> 

 

<ej-grid id="ChildGrid" allow-paging="true" action-complete="onDataBound"> 

    <e-datamanager adaptor="remoteSaveAdaptor" /> 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" /> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 

        . ..   

             ..  

</ej-grid> 

 

<script> 

    function onRowSelect(args) { 

        var gridObj = $("#ChildGrid").ejGrid("instance"); 

        var value = args.data.EmployeeID; 

        var dataManager = ej.DataManager({ url: "/Home/Data", adaptor: new ej.UrlAdaptor() }); 

        var query = ej.Query().where("EmployeeID", "equal", value); 

        gridObj.element.ejWaitingPopup("show");//show the popup 

        var execute = dataManager.executeQuery(query) // executing query 

               .done(function (e) { 

                   var dataMgr = ej.DataManager({ 

                       json: e.result.result, 

                       updateUrl: "/Home/CellEditUpdate", 

                       insertUrl: "/Home/CellEditInsert", 

                       removeUrl: "/Home/CellEditDelete", 

                       adaptor: "remoteSaveAdaptor" 

                   }) 

                   gridObj.element.ejWaitingPopup("hide");//hide the popup 

                   gridObj.model.columns[1].defaultValue = args.data.EmployeeID; 

                   gridObj.dataSource(dataMgr); 

               }); 

    } 

    var flag = true; 

    function onDataBound(args){ 

        if(this.initialRender && flag){ 

            flag = false; 

            var gridObj = $("#ParentGrid").ejGrid("instance"); 

            gridObj.selectRows(0); 

        } 

    } 

</script> 

 

        public ActionResult Data([FromBody]DataManager value) 

        { 

            IEnumerable Data = order; 

            DataOperations dp = new DataOperations(); 

            if (value.Where != null) 

            { 

                Data = dp.PerformWhereFilter(Data, value.Where, value.Where[0].Condition); 

            } 

            return Json(new { result = Data }); 

        } 

We have modified the sample that can be downloaded from the following location. 

Sample: https://www.syncfusion.com/downloads/support/forum/126952/ze/WebApplication8-1709701349.zip 

If you are still facing the problem, please share the following details to analyze the issue. 

1)      Code example of Grid and Code behind 

2)      Stacktrace of browser console (if any error) 

3)      Screenshot/video explain the issue 

4)      If possible, modify the attached sample and replicate the issue 

Regards, 

Seeni Sakthi Kumar S. 

[Urs Kuoni]

Hi Seeni,

Now everything works perfect!

Thank you a lot for your support!

Kind Regards,

Urs Kuoni

[Seeni Sakthi Kumar Seeni Raj]

Hi Urs, 

Thanks for the update. We are happy to hear that your requirement has been achieved. Please get back to us, if you require further assistance on this. 

Regards, 

Seeni Sakthi Kumar S.