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
close icon

Add Parent Record Primary Key Values To New Rows In A Child Grid

I have two grids in a master / child relationship and have 2 questions:
  • When the user adds a new row in the child grid how do I populate the primary key fields in the new row based upon the selected row in the master grid?
I tried the following code on the "ActionBegin" event of the child grid. The value displayed on screen; however, the value was not passed back to the controller.

if ((args.requestType === "add")) {
    args.data.ParentId = currentParentId;
  • How do I have the child grid's add new row button enabled only when the user has selected a valid row in the master grid?

Regards, Jeff

3 Replies

IR Isuriya Rajan Syncfusion Team July 27, 2016 01:38 PM UTC

Hi Jeffrey, 

Thanks for contacting Syncfusion support, 

We are not able to understand your clear requirement. Could you please share the below details to achieve your requirement. 

This would be helpful for us to serve you. 
Please share the following details,   
1.           Do you want primary key for child grid should auto incremental? 
2.           Are you using any kind of adaptors? 
3.           Do you want to enable the Child grid primary key should be based on the master grid ? 
Isuriya R 

JS Jeffrey Stone July 27, 2016 03:47 PM UTC


I believe the definition (along with some comments from me) of the Child grid should answer your questions:

    .Datasource(ds => ds.URL(Url.Action("BatchDataSource")).InsertURL(Url.Action("AddChild")).RemoveURL(Url.Action("DeleteChild")).Adaptor(AdaptorType.UrlAdaptor))
    .Query("new ej.Query().addParams('parentId','0')")
    .EditSettings(edit => { edit.AllowAdding().AllowDeleting(); })
    .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
    .PageSettings(pg => pg.PageSize(10))
    .Columns(col =>
        // the primary key for the child table is an identity column
        col.Field(r => r.ChildId).IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).Visible(false).TextAlign(TextAlign.Right).Add();
        // this is where I need help - when a new row is added the ParentId needs to be populated from the corresponding ParentId in the master grid
        col.Field(r => r.ParentId).IsIdentity(true).AllowEditing(false).TextAlign(TextAlign.Right).Visible(false).Add();
        col.Field(r => r.SomeOtherField).TextAlign(TextAlign.Right).EditType(EditingType.Numeric).Add();
        col.Field(r => r.DateCompleted).AllowEditing(false).Add();
        col.Field(r => r.DateAdded).AllowEditing(false).Add();
    }).ToolbarSettings(toolbar =>
        toolbar.ShowToolbar().ToolbarItems(items =>
    }).ClientSideEvents(eve => { eve.ActionBegin("onActionBegin"); }))

For completeness, this is code that is executed when a row is selected on the Parent Grid:

// refreshes the child grid based upon the selected row in the parent grid (this works good)

function onParentGridRowSelected()
    var parentId = args.data.ParentId;

    // i am saving the identity value of the parent in currentParentId
    if (currentParentId !== parentId) {
        currentParentId = parentId;

        var childGrid = settings.$childGrid;
        var gridInstance = childGrid.ejGrid("instance");
        var dataManger = ej.DataManager({
            url: gridInstance._dataManager.dataSource.url,
            batchUrl: gridInstance._dataManager.dataSource.batchUrl,
            insertUrl: gridInstance._dataManager.dataSource.insertUrl,
            removeUrl: gridInstance._dataManager.dataSource.removeUrl,
            adaptor: new ej.UrlAdaptor()

            dataSource: dataManger,
            query: new ej.Query().addParams("parentId", currentParentId)

I hope this clarifies your questions.
Regards, Jeff

IR Isuriya Rajan Syncfusion Team July 29, 2016 01:14 PM UTC

Hi Jeffrey,  
Query #1: When the user adds a new row in the child grid how do I populate the primary key fields in the new row based upon the selected row in the master grid? 
We can get the parentDetail data and it primaryKey, mapping fieldname through “ActionBegin” event of Grid. Please find the code example. 
  function Begin(args) { 
        if (args.requestType == "beginedit") { 
            var a = args.model.parentDetails.parentKeyFieldValue; // mapping parent key field 
            var b = args.model.parentDetails.parentRowData[args.model.parentDetails.parentPrimaryKeys[0]]; // parent table primary key 

For your reference please refer the below screenshot 

Query #2: How do I have the child grid's add new row button enabled only when the user has selected a valid row in the master grid? 
We have achieved this requirement in child grid ActionComplete event of Grid.Here we have check the condition based on this we have disable the allowAdding. 
function complete(args) { 
        if (args.model.parentDetails.parentKeyFieldValue < 7) {//we can disable the adding checking this contidion 
            var childGridObj = $("#" + this._id).ejGrid("instance"); 
            childGridObj.model.editSettings.allowAdding = false;//disable adding 
            $("#" + this._id + '_add').addClass('e-disable') 
        else { 
            $("#child1_grid0").ejGrid("option", { editSettings: { allowAdding: true } }); 

Please refer the below sample: 

Isuriya R. 

Live Chat Icon For mobile
Up arrow icon