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

[Jeffrey Stone]

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

[Isuriya Rajan]

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 ? 

 

 

Regards, 

Isuriya R 

[Jeffrey Stone]

Isuriya,

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

@(Html.EJ().Grid<BacktestResultGroupRunRow>("ChildGrid")
    .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(); })
    .AllowFiltering()
    .AllowPaging()
    .AllowSorting()
    .AllowTextWrap()
    .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 =>
        {
            items.AddTool(ToolBarItems.Add);
            items.AddTool(ToolBarItems.Delete);
            items.AddTool(ToolBarItems.Update);
        });
    }).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()
        });

        childGrid.ejGrid({
            dataSource: dataManger,
            query: new ej.Query().addParams("parentId", currentParentId)
        });
    }
}

I hope this clarifies your questions.
 
Regards, Jeff

[Isuriya Rajan]

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: 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/New_Compressed_(zipped)_Folder-281335403.zip 

Regards, 

Isuriya R.