Hello, when I refresh the grid data source after add, update or delete the child grid row data disappear, and also the child grid becomes smaller when I add or edit a record, can you please help me with this issue?
<div class="container">
<div class="gridSection">
<ejs-grid id="Grid" width="100%" height="100%" showColumnMenu="true" commandClick="commandClick" allowSorting="true" load="OnLoad" childGrid="FirstChild" actionComplete="actionCompleteMain" actionBegin="actionBeginMain" toolbarClick="toolbarClickMainGrid" toolbar="toolbarItemsMainGrid">
<e-data-manager json="@Model.trainings" updateUrl="/Training/UpdateTrainingRecord" insertUrl="/Training/InsertTrainingRecord" removeUrl="/Training/RemoveTrainingRecord" adaptor="RemoteSaveAdaptor"></e-data-manager>
<e-grid-editsettings allowAdding="true" showDeleteConfirmDialog="true" showConfirmDialog="true" newRowPosition="Bottom" allowEditing="true" allowDeleting="true" mode="Dialog"></e-grid-editsettings>
<e-grid-columns>
<e-grid-column isPrimaryKey="true" field="training_id" headerText="" visible="false" width="20"></e-grid-column>
<e-grid-column field="code" headerText="Code" validationRules="@(new { required=true })" textAlign="Left" width="105"></e-grid-column>
<e-grid-column field="name" headerText="Name" validationRules="@(new { required=true })" textAlign="Left" width="105"></e-grid-column>
<e-grid-column field="description" headerText="Description" validationRules="@(new { required=true })" edit="@(new {create="createTBox", read="readTBox", destroy="destroyTBox", write="writeTBox" })" textAlign="Left" width="105"></e-grid-column>
<e-grid-column field="mentor_id" foreignKeyField="mentor_id" foreignKeyValue="employeeName" dataSource="Model.mentors" headerText="Mentor name" textAlign="Left" width="0"></e-grid-column>
<e-grid-column field="mentorName" headerText="Mentor name" validationRules="@(new { required=true })" textAlign="Left" width="105"></e-grid-column>
<e-grid-column field="statusName" headerText="Status" textAlign="Left" width="105"></e-grid-column>
<e-grid-column headerText="" allowEditing="false" commands="commandsMain" textAlign="Center" width="80"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
var FirstChild = new Syncfusion.EJ2.Grids.Grid()
{
ActionBegin = "actionBeginChild",
ActionComplete = "actionCompleteChild",
DataSource = new Syncfusion.EJ2.DataManager()
{
Json = Model.trainingInvitations,
Adaptor = "RemoteSaveAdaptor",
},
QueryString = "training_id",
Width = "90%",
AllowResizing = true,
AllowSorting=true,
Load = "OnLoadChild",
AllowReordering = true,
EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings()
{
AllowAdding = true,
AllowEditing = true,
AllowDeleting = true,
ShowConfirmDialog = true,
ShowDeleteConfirmDialog=true,
Mode = Syncfusion.EJ2.Grids.EditMode.Dialog
},
CommandClick="commandClickFirstChild",
ToolbarClick="toolbarClickChild",
Toolbar = toolbarItemsChild,
Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
new Syncfusion.EJ2.Grids.GridColumn(){ Field="training_invitation_id",Visible=false,IsPrimaryKey=true, HeaderText="Id", Width="20",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Left },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="training_id",Visible=false, HeaderText="First Name", Width="105",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Left },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="company_id",Visible=true,ForeignKeyField="company_id", ForeignKeyValue="fullName", DataSource=Model.companies,ValidationRules=new { required=true }, HeaderText="Company name", Width="0", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Left },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="shortName",ValidationRules=new { required=true }, HeaderText="Company name", Width="105", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Left },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="address",ValidationRules=new { required=true }, HeaderText="Company address", Width="105", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Left },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="email",ValidationRules=new { required=true }, HeaderText="Company email", Width="105", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Left },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="statusName",ValidationRules=new { required=true }, HeaderText="Status", Width="80", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Left },
new Syncfusion.EJ2.Grids.GridColumn(){ HeaderText="",AllowEditing=false, Commands=commands, Width="80",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Left },
},
ChildGrid=SecondChild
};
function actionCompleteMain(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
var dialog = args.dialog;
dialog.height = 500;
dialog.element.style.maxHeight = "500px"
dialog.width = 600;
dialog.element.style.maxWidth = "600px"
dialog.header = args.requestType === 'beginEdit' ? args.rowData['name'] : 'Add New Training';
}
if (args.requestType === 'save') {
var grid = document.getElementById("Grid").ej2_instances[0];
this.refresh();
}
}