We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Master-Detail Grid for ASP.NET Core

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.

11 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 19, 2016 11:37 AM UTC

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> 



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


Regards, 
Seeni Sakthi Kumar S. 



UK Urs Kuoni replied to Seeni Sakthi Kumar Seeni Raj October 20, 2016 10:22 AM UTC

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> 



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


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



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 21, 2016 12:43 PM UTC

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. 



UK Urs Kuoni October 25, 2016 02:28 PM UTC

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  








SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 26, 2016 12:55 PM UTC

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. 


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. 



UK Urs Kuoni October 27, 2016 08:15 AM UTC

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


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 28, 2016 05:53 AM UTC

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. 


Regards, 
Seeni Sakthi Kumar S. 



UK Urs Kuoni October 28, 2016 08:51 AM UTC

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


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 31, 2016 09:49 AM UTC

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. 


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. 



UK Urs Kuoni November 2, 2016 01:37 PM UTC

Hi Seeni,
Now everything works perfect!
Thank you a lot for your support!

Kind Regards,

Urs Kuoni


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 3, 2016 04:20 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon