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.
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.