Refresh grids data source without refreshing the whole page

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

        }


    }



2 Replies 1 reply marked as answer

TA Tarik replied to Tarik May 20, 2021 01:21 PM UTC

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

        }


    }



I am sending you more information for the same problem
function actionCompleteChild(args) {
        console.log(args);
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            var dialog = args.dialog;
            dialog.height = 280;
            dialog.element.style.maxHeight = "280px"
            dialog.width = 600;
            dialog.element.style.maxWidth = "600px"
            dialog.header = args.requestType === 'beginEdit' ? args.rowData['shortName'] : 'Add New Training Invitation';
        }
        if (args.requestType === "save") {
            this.refresh();
        }
}


function OnLoad(args) {
        var ajax = new ejs.base.Ajax({
            type: "POST",
            url: '/Training/GetTrainings',
            contentType: "application/json; charset=utf-8",
        });
        ajax.send().then(function (result) {
            var data = JSON.parse(result);
            //console.log(data)
            //mentors = data.mentors
        }.bind(this));
    }
    function OnLoadChild(args) {
        var trainingId = this.parentDetails.parentRowData.training_id;
        //var companyId = this.parentDetails.parentRowData.company_id;
        var ajax = new ejs.base.Ajax({
            type: "POST",
            url: '/Training/GetTrainingInvitations',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(trainingId)
        });
        ajax.send().then(function (result) {
            var data = JSON.parse(result);
            //console.log(data)
            //companies = data.companies
            this.dataSource = new ej.data.DataManager({
                json: data.trainingInvitations,
                adaptor: new ej.data.RemoteSaveAdaptor(),
                insertUrl: "/Training/InsertTrainingInvitationRecord",
                updateUrl: "/Training/UpdateTrainingInvitationRecord",
                removeUrl: "/Training/RemoveTrainingInvitationRecord"
            });
        }.bind(this));
    }


AG Ajith Govarthan Syncfusion Team May 25, 2021 03:21 AM UTC

Hi Tarik, 

Thanks for contacting Syncfusion support. 

Query: 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? 
 
Based on your query we suspect that when you perform CRUD action in the parent grid the child grids are get collapsed. So, we have checked your attached code example and found that you have called the grid refresh method when you save the record in the Grid component. 

By default, when you call the refresh method which will re-renders the grid elements so, the child grids will get collapsed when you call the refresh method which is the default behavior of our EJ2 Grid. So, we suggest you remove the refresh method in actionComplete event and also please let us know the use case of using the refresh method in your Grid application. 

If we misunderstood your query, then please share the video demonstration of your requirement to find the root cause of the issue. 

Regards, 
Ajith G.          


Marked as answer
Loader.
Up arrow icon