Displaying Master/Detail Grids from the same datasource

[Valer Bocan]

I have the following scenario: The master grid displays the list of clients and the details grid displays a list of important dates for the selected client. The problem is that both grids must be populated using the same datasource, as each client holds its own list of dates (see attached projects).

A client looks like this:

public class ClientModel

    {        

        public string _id { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }

        public string City { get; set; }

        public IList<ImportantDateModel> ImportantDates { get; set; }

    }

and the ImportantDateModel looks like this:

public class ImportantDateModel

    {

        public string _id { get; set; }

        public DateTime Date { get; set; }

        public string Description { get; set; }

        public bool Alarm { get; set; }

    }

The ImportantDateModel is embedded into the client class so there is no Primary/Foreign Key relationship as I've seen in other Syncfusion Grid examples.

How do I go about editing client information and the relevant dates for each client?

Attachment: Syncfusion_MasterDetailGrid_84c9f9b1.zip

[Jayaprakash Kamaraj]

Hi Valer, 

We Suggest you to send a POST requesting data for the child Grid from the server for each row selection in the Parent Grid. Please refer to the below code example, screenshot and sample. 

 

  

function onRowSelect(args) { 

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

        // Value containst the Id of the clicked client 

        var value = args.data._id; 

         

        var dataManager = ej.DataManager({ url: "@Url.Action("GetDetailData")", adaptor: new ej.UrlAdaptor() }); 

        var query = ej.Query().where("_id", "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/UpdateDate", 

                       insertUrl: "/Home/InsertDate", 

                       removeUrl: "/Home/DeleteDate", 

                       adaptor: "remoteSaveAdaptor" 

                   }) 

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

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

                   gridObj.dataSource(dataMgr); 

               }); 

    } 

 

    var flag = true; 

    function onDataBound(args) { 

        if (this.initialRender && flag) { 

            flag = false; 

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

            gridObj.selectRows(0); 

        } 

    } 

 

  public ActionResult GetDetailData([FromBody]DataManager value ) 

        { 

            // TODO: Retrieve detail data for the currently selected client. 

          //  IEnumerable Data = null; 

            clientRepository = new ClientRepository(); 

            IEnumerable Data = clientRepository.GetAll().ToList(); 

            DataOperations dp = new DataOperations(); 

            if (value.Where != null) 

            { 

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

            } 

            return Json(new { result = Data }); 

        } 

 

Sample: http://www.syncfusion.com/downloads/support/forum/130203/ze/WebApplication8-370240353 

Regards, 

Jayaprakash K.