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

Displaying Master/Detail Grids from the same datasource

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

1 Reply

JK Jayaprakash Kamaraj Syncfusion Team April 28, 2017 03:21 PM UTC

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; 
    var flag = true; 
    function onDataBound(args) { 
        if (this.initialRender && flag) { 
            flag = false; 
            var gridObj = $("#ClientGrid").ejGrid("instance"); 
  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 }); 



Jayaprakash K. 

Live Chat Icon For mobile
Up arrow icon