)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to pass single editable value alone to server?

Platform: jQuery |
Control: ejGrid |
Published Date: May 28, 2018 |
Last Revised Date: February 25, 2020
Tags: editing, ejgrid

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:

Request Body Data

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon