Category / Section
How to pass single editable value alone to server?
3 mins read
This Knowledge base explains that how to pass single edited cell value alone to server while editing the record in Grid.
Solution:
By default, the full edited row data object would be passed to the server side while we do editing operation in ejGrid.
But if we want to pass single edited cell value to server then we need to set allowEditing property of Grid column as false except that column.
While editing the record we need to check the condition allowEditing property value as false and delete the corresponding unchanged values by using actionBegin event of ejGrid.
The following code example demonstrates how to pass single editable value to server while editing the record in Grid.
JS:
1. Render the Grid Control.
<div id="Grid"></div>
<script type="text/javascript">
var dataManager = ej.DataManager({ url: "/Grid/DataSource", updateUrl: "/Grid/Update", insertUrl: "/Grid/Insert", deleteUrl: "/Grid/Delete", adaptor: new ej.UrlAdaptor() })
$(function () {
$("#Grid").ejGrid({
dataSource: dataManager,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", isPrimaryKey: true, allowEditing: false, width: 90 },
{ field: "EmployeeID", allowEditing: true, width: 90 },
{ field: "CustomerID", allowEditing: false, width: 90 },
{ field: "ShipCountry", allowEditing: false, width: 90 },
{ field: "Freight", allowEditing: false, width: 90 },
],
actionBegin: "actionBegin"
});
});
</script>
MVC:
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource(ds => ds.URL("/Grid/DataSource").UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("/Grid/Delete").Adaptor(AdaptorType.UrlAdaptor))
.AllowPaging()
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.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);
});
})
.ClientSideEvents(eve => eve.ActionBegin("actionBegin"))
.Columns(col =>
{
col.Field("OrderID").IsPrimaryKey(true).AllowEditing(false).Width(90).Add();
col.Field("EmployeeID").AllowEditing(true).Width(90).Add();
col.Field("CustomerID").AllowEditing(false).Width(90).Add();
col.Field("ShipCountry").AllowEditing(false).Width(90).Add();
col.Field("Freight").AllowEditing(false).Width(90).Add();
})
)
ASP.NET:
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true"> <DataManager URL="Default.aspx/DataSource" UpdateURL="Default.aspx/Update" InsertURL="Default.aspx/Insert" RemoveURL="Default.aspx/Delete" Adaptor="UrlAdaptor" /> <ClientSideEvents ActionBegin="actionBegin" /> <Columns> <ej:Column Field="OrderID" IsPrimaryKey="true" AllowEditing="false" Width="90"></ej:Column> <ej:Column Field="EmployeeID" AllowEditing="true" Width="90"></ej:Column> <ej:Column Field="CustomerID" AllowEditing="false" Width="90"></ej:Column> <ej:Column Field="ShipCountry" AllowEditing="false" Width="90"></ej:Column> <ej:Column Field="Freight" AllowEditing="false" Width="90"></ej:Column> </Columns> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> </ej:Grid>
ASP.NET CORE:
<ej-grid id="Grid" allow-paging="true" action-begin="actionBegin">
<e-datamanager url ="Home/DataSource" adaptor="urlAdaptor" insert-url="/Home/Insert" update-url="/Home/Update" remove-url="/Home/Delete"></e-datamanager>
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> { "add", "edit","delete","update", "cancel" }'></e-toolbar-settings>
<e-columns>
<e-column field="OrderID" is-primary-key="true" allow-editing="false" width="90"></e-column>
<e-column field="EmployeeID" allow-editing="true" width="90"></e-column>
<e-column field="CustomerID" allow-editing="false" width="90"></e-column>
<e-column field="ShipCountry" allow-editing="false" width="90"></e-column>
<e-column field="Freight" allow-editing="false" width="90"></e-column>
</e-columns>
</ej-grid>
Angular:
<ej-grid [dataSource]="gridData" allowPaging="true" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (actionBegin)="actionbegin($event)"> <e-columns> <e-column field="OrderID" [isPrimaryKey]="true" [allowEditing]="false" width="90"></e-column> <e-column field="EmployeeID" [allowEditing]="true" width="90"></e-column> <e-column field="CustomerID" [allowEditing]="false" width="90"></e-column> <e-column field="ShipCountry" [allowEditing]="false" width="90"></e-column> <e-column field="Freight" [allowEditing]="false" width="90"></e-column> </e-columns> </ej-grid>
TS File:
@ViewChild('grid') GridModel: EJComponents<any, any>;
export class GridComponent {
public gridData: any;
public editSettings;
public toolbarItems;
constructor() {
this.gridData = ej.DataManager({ url: "/Grid/DataSource", updateUrl: "/Grid/Update", insertUrl: "/Grid/Insert", deleteUrl: "/Grid/Delete", adaptor: new ej.UrlAdaptor() });
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};
this.toolbarItems={ showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};
}
actionbegin(args:any){
if (args.requestType == "save") {
cols = this.Grid.Widget.columns, len = cols.length
while (len--) {
/* Deleting the records with allowEditing disabled
* Now the edited values alone will be send(In your case single cell value)
*/
if (!ej.isNullOrUndefined(cols[len]["allowEditing"]) && !cols[len]["allowEditing"])
delete args.data[cols[len]["field"]];
}
}
}
}
C#:
namespace MvcApplication66.Controllers
{
public class GridController : Controller
{
public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm)
{
IEnumerable datasource = OrderRepository.GetAllRecords().ToList();
DataOperations operation = new DataOperations();
int count = datasource.AsQueryable().Count();
if (dm.Skip != null)//for paging
datasource = operation.PerformSkip(datasource, dm.Skip);
if (dm.Take != null)//for paging
datasource = operation.PerformTake(datasource, dm.Take);
return Json(new { result = datasource, count = count }, JsonRequestBehavior.AllowGet);
}
public ActionResult Update(EditableOrder value)
{
OrderRepository.Update(value);
var data = OrderRepository.GetAllRecords();
return Json(value, JsonRequestBehavior.AllowGet);
}
public ActionResult Insert(EditableOrder value)
{
OrderRepository.Add(value);
var data = OrderRepository.GetAllRecords();
return Json(value, JsonRequestBehavior.AllowGet);
}
public ActionResult Delete(int key)
{
OrderRepository.Delete(key);
var data = OrderRepository.GetAllRecords();
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
JS:
2. In actionBegin event we check the condition with the requestType as save and delete the unchanged values based on allowEditing property.
function actionBegin(args) {
if (args.requestType == "save") {
cols = this.model.columns, len = cols.length
while (len--) {
/* Deleting the records with allowEditing disabled
* Now the edited values alone will be send(In your case single cell value)
*/
if (!ej.isNullOrUndefined(cols[len]["allowEditing"]) && !cols[len]["allowEditing"])
delete args.data[cols[len]["field"]];
}
}
}
Result:
