How to set default value for Child grid new record based on parent record?
This knowledge base explains how to set a default value for a field in child grid based on the query string value.
Solution:
We can achieve this using actionComplete event of ejGrid. By this event we can set the default value to that column for the child Grid.
By default, the query string value will be shown as a default value for the newly added record in the child Grid, but if the child Grid dataSource has the foreignKey field for the query string then we suggest you follow the below code examples.
1. The Hierarchy Grid initialization as follows.
HTML
<div id="Grid"></div>
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: @Html.Raw(Json.Encode(ViewBag.datasource)),
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings:{showToolbar: true, toolbarItems:["add","edit","delete","update","cancel"]},
columns: [
{ field: "ID", headerText: 'ID', isPrimaryKey: true, width: 75 },
{ field: "FirstName", headerText: 'First Name', width: 90 },
{ field: "Title", headerText: 'Title', width: 100 },
{ field: "City", headerText: 'City', width: 90 },
{ field: "Country", headerText: 'Country', width: 110 }
],
childGrid: {
dataSource: @Html.Raw(Json.Encode(ViewBag.datasource2)),
queryString: "ID",
foreignKeyField: "InspectorID",
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
columns: [
{ field: "OrderID", headerText: 'Order ID', isPrimaryKey: true, width: 75 },
{ field: "CustomerID", headerText: 'Customer ID', width: 90 },
{ field: "InspectorID", headerText: 'Inspector ID', width: 100 },
{ field: "ShipCountry", headerText: 'Ship Country', width: 90 },
{ field: "ShipAddress", headerText: 'Ship Address', width: 110 }
],
actionComplete: "ChildGridActionCompleteEvent",
},
});
});</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting())
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("ID").HeaderText("ID").IsPrimaryKey(true).Width(75).Add();
col.Field("FirstName").HeaderText("First Name").Width(90).Add();
col.Field("Title").HeaderText("Title").Width(100).Add();
col.Field("City").HeaderText("City").Width(90).Add();
col.Field("Country").HeaderText("Country").Width(110).Add();
})
.ChildGrid(child =>
{
child.Datasource((IEnumerable<object>)ViewBag.datasource2)
.QueryString("ID")
.ForeignKeyField("InspectorID")
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("InspectorID").HeaderText("Inspector ID").Width(100).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add();
col.Field("ShipAddress").HeaderText("Ship Address").Width(110).Add();
})
.EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting())
.ClientSideEvents(events => events.ActionComplete("ChildGridActionCompleteEvent"))
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
});
})
)
CORE
<ej-grid id="Grid" datasource="ViewBag.datasource">
<e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"add","edit","delete","update","cancel" })></e-toolbar-settings>
<e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true"></e-edit-settings>
<e-columns>
<e-column field="ID" header-text="ID" is-primary-key="true" width="75"></e-column>
<e-column field="FirstName" header-text="First Name" width="90"></e-column>
<e-column field="Title" header-text="Title" width="100"></e-column>
<e-column field="City" header-text="City" width="90"></e-column>
<e-column field="Country" header-text="Country" width="110"></e-column>
</e-columns>
<ej-grid query-string="ID" foreign-key-field="InspectorID" datasource="ViewBag.datasource2" action-complete="ChildGridActionCompleteEvent">
<e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"add","edit","delete","update","cancel" })></e-toolbar-settings>
<e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true"></e-edit-settings>
<e-columns>
<e-column field="OrderID" header-text="Order ID" is-primary-key="true" width="75"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="90"></e-column>
<e-column field="InspectorID" header-text="Inspector ID" width="100"></e-column>
<e-column field="ShipCountry" header-text="Ship Country" width="90"></e-column>
<e-column field="ShipAddress" header-text="Ship Address" width="110"></e-column>
</e-columns>
</ej-grid>
</ej-grid>
Angular
<ej-grid id="Grid" [dataSource]="gridData" [toolbarSettings]="toolbarItems" [childGrid]="childData" [editSettings]="editSettings"> <e-columns> <e-column field="ID" [isPrimaryKey]="true" headerText="ID" width="75"></e-column> <e-column field="FirstName" headerText="First Name" width="90"></e-column> <e-column field="Title" headerText="Title " width="100"></e-column> <e-column field="City" headerText="City" width="90"></e-column> <e-column field="Country" headerText="Country" width="110"></e-column> </e-columns> </ej-grid>
TS
export class AppComponent {
public editSettings;
public toolbarItems;
public childData: any;
public gridData: any;
constructor() {
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};
this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};
this.gridData = (window as any).employeeView;
this.childData = {
dataSource: window.gridData,
queryString: "ID",
foreignKeyField: "InspectorID",
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings:{showToolbar: true, toolbarItems:["add","edit","delete","update","cancel"]},
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: 'Order ID', width: 75 },
{ field: "CustomerID", headerText: 'Customer ID', width: 90 },
{ field: "InspectorID", headerText: 'Inspector ID', width: 100 },
{ field: "ShipCountry", headerText: 'Ship Country', width: 90 },
{ field: "ShipAddress", headerText: 'Ship Address', width: 110 }
],
actionComplete: function(args){
if (args.requestType == "add") {
var id = args.target.id + args.model.foreignKeyField;
$("#" + id).val(args.model.currentViewData[0][args.model.foreignKeyField]);
}
}
2. In actionComplete event of child Grid we check the condition with the requestType as add and set the default value to the foreign Key field column using currentviewData of child Grid.
<script type="text/javascript">
function ChildGridActionCompleteEvent(args) {
if (args.requestType == "add") {
var id = args.target.id + args.model.foreignKeyField;
$("#" + id).val(args.model.currentViewData[0][args.model.foreignKeyField]);
}
}
</script>
Result:
Figure 1: At Initial Rendering of Hierarchy Grid.
Figure 2: Default value shown in InspectorID column in child Grid.
I hope you enjoyed learning about how to set a default value for Child Grid new record in JavaScript Grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
