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

Adding records to grid and when change the values grid refresh and reset the data

Hi,

I have a grid as shown in the below image, initially grid loads the data from a URL adapter. Then I want to add a record to the grid using a separate button, manipulating the data, without using the inbuilt method,



I've created the relevant object from the js and tried to add it to the grid. After I called the grid.addRecord(item) will refresh the grid by calling the URL adaptor endpoint. also, I've noticed that when I try to edit the grid value the same thing happens. Please  kindly help me to sort this issue,

Please find the below code.

Grid,

 <ejs-grid id="WSD" allowSelection="false" allowPaging="true" allowSorting="true" allowFiltering="true" load="onLoad" allowTextWrap="true" allowResizing="true" actionBegin="actionBegin">
            <e-data-manager url="@Url.Page("/aaa/bbb/Index/")?handler=DataSource" adaptor="UrlAdaptor"></e-data-manager>
            <e-grid-editsettings showConfirmDialog="true" allowEditing="true" allowAdding="true"> </e-grid-editsettings>
            <e-grid-filtersettings type="Excel" enableCaseSensitivity="false"></e-grid-filtersettings>
            
            <e-grid-columns>
                <e-grid-column field="Id" visible="false" headerText="Id" allowEditing="false" allowResizing="false"></e-grid-column>
                <e-grid-column field="Customer" width="130" headerText="Customer" allowEditing="false" allowResizing="false"></e-grid-column>
                <e-grid-column field="Team" width="100" headerText="Team" allowEditing="false" allowResizing="false"></e-grid-column>
                <e-grid-column field="DopId" width="100" headerText="Dop Id" allowEditing="false" allowResizing="false"></e-grid-column>
               
                <e-grid-column field="CPO" headerText="CPO" allowEditing="false" allowResizing="false"></e-grid-column>
                <e-grid-column field="ProductCode" headerText="Product Code" allowEditing="false" allowResizing="false"></e-grid-column>
                <e-grid-column field="ProductFamily" headerText="Product Family" allowEditing="false" allowResizing="false"></e-grid-column>
               
               
                <e-grid-column field="WorkedHours.DefaultValue" width="150" headerText="Worked Hours" allowResizing="false"></e-grid-column>
                <e-grid-column field="ShortTimeWorkingHours.DefaultValue" width="180" headerText="Short Time Working Hours" allowResizing="false"></e-grid-column>
                <e-grid-column field="OvertimeWorkingHours.DefaultValue" width="180" headerText="Short Time Working Hours" allowResizing="false"></e-grid-column>
                <e-grid-column field="TotalWorkingHours" width="150" headerText="Total Working Hours" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="A.DefaultValue" headerText="A" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="B.DefaultValue" headerText="B" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="C.DefaultValue" headerText="C" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="D.DefaultValue" headerText="D" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="F.DefaultValue" headerText="F" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="J.DefaultValue" headerText="J" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="G.DefaultValue" headerText="G" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="N.DefaultValue" headerText="N" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="M.DefaultValue" headerText="M" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="P.DefaultValue" headerText="P" width="80" allowResizing="true" defaultValue="0"></e-grid-column>
                <e-grid-column field="S.DefaultValue" headerText="S" width="80" allowResizing="true" defaultValue="0"></e-grid-column>


                <e-grid-column field="TeamId" visible="false" headerText="Team Id" allowResizing="false"></e-grid-column>
                <e-grid-column field="LocationId" visible="false" headerText="Location Id" allowResizing="false"></e-grid-column>
                


            </e-grid-columns>


        </ejs-grid>

Code behind

 public JsonResult OnPostDataSource([FromBody] GetParmPlannedDate paramPlannedDate)
        {            
            var dataset= //fetch data from the api
            return new JsonResult(new { result = dataset, count = dataset.Count() });
        }


public class GetParmPlannedDate : DataManagerRequest        {

            [JsonProperty(PropertyName = "plannedDate", Required = Required.Default)]

            public DateTime PlannedDate { get; set; }

        }

Razor pages JS code


<script>
        function onLoad() {
            this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];
        }

function actionBegin(args) {


            if (args.requestType == 'save' && args.action != "add") {

                Did a few calculations here

                var gridObj = document.getElementById("WSD").ej2_instances[0];

                //When you update the edited data, the entire Grid will be refreshed automatically to reflect changes in its data source.Instead of refreshing the entire Grid during an update, you can use the following solution to refresh only the edited row.Please refer to the following code.

                args.cancel = true;

                this.isEdit = false;

                this.currentViewData[args.rowIndex] = args.data;

                this.editModule.editModule.refreshRow(args.data);

                console.log(args.data);

                //this methods is use to update a changed data sourse , it is a required line

                gridObj.editModule.updateRow(args.rowIndex, args.data);

// after this it will call the URL atopter and reset the grid again.

            }

        }

$("#addData").click(function (args) {


            var gridInstance = document.getElementById("WorkStudyGrid").ej2_instances[0];

            var teamId = $("#teamId").find("option:selected").val();

            var teamName = $("#teamId").find("option:selected").text();

            var customer = $("#customerId").find("option:selected").val();

            var dopId = $("#dopId").find("option:selected").val();

            var cpo = $("#bpo").find("option:selected").val();

            var rowIdCount = teamId + customer + dopId + cpo;

            var newData = {

                "Team": teamName,

                "RowId": rowIdCount,

                "TeamId": teamId,

                "DopId": dopId,

                "Id": rowIdCount,

                "CPO": cpo,

                "Customer": "NO",

                "PackingStyle": "erwer",

                "ProductCode": "342ewr",

                "ProductFamily": "rwerwer",

                "PackingSMV": { "DefaultValue": 0.0 },

                "DayPackOut": 0,

                "DirectLabor": { "DefaultValue": 0 },

                "WorkedHours": { "DefaultValue": 0 },

                "ShortTimeWorkingHours": 0,

                "TotalWorkingHours": 0,

                "A": { "DefaultValue": null },

                "B": { "DefaultValue": null },

                "C": { "DefaultValue": null },

                "D": { "DefaultValue": null },

                "F": {"DefaultValue":null},

                "J": {"DefaultValue":null},

                "G": {"DefaultValue":null},

                "N": {"DefaultValue":null},

                "M": {"DefaultValue":null},

                "P": {"DefaultValue":null},

                "S": {"DefaultValue":null},

                "TotalLostTime": 0,

                "LocationId": 0,

                "StyleBuyerCode": 0

            }

            var itemCount = gridInstance.currentViewData.length;

           

gridInstance.addRecord(newData);

}


</script>

after executing  gridInstance.addRecord(newData) it will automatically execute the  actionBegin function and then reset the grid values executing the API call. How can I solve this issue, 


Thanks.





1 Reply

JC Joseph Christ Nithin Issack Syncfusion Team March 7, 2023 09:48 AM UTC

Hi Buddhika,


   Greetings from Syncfusion support.


    Based on your query, you want to perform CRUD operations in the server side with URL Adaptor. We have already discussed the same in detail in the below documentation. Please refer the below documentation for more information on persisting the data in the server.


Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/persisting-data-in-server


Note: On inspecting the code example provided, we could see that you have not defined any primarykey column in the grid.


Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit


Regards,

Joseph I.


Loader.
Up arrow icon