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.
Unfortunately, activation email could not send to your email. Please try again.

Displaying Master/Detail Grids from the same datasource

Thread ID:

Created:

Updated:

Platform:

Replies:

130203 Apr 27,2017 06:42 AM Apr 28,2017 11:21 AM ASP.NET Core 1
loading
Tags: Grid
Valer Bocan
Asked On April 27, 2017 06:42 AM

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 [Syncfusion]
Replied On April 28, 2017 11:21 AM

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 }); 
        } 


 



Regards, 

Jayaprakash K. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;