How to change url action path for JavaScript Grid CRUD operations?
While specifying the URL that is to be triggered on performing the CRUD operations, the action name is to be prepended with the controller name in order to avoid the routing issues.
Solution
In the dataSource property of the Grid, you can bind a URL link and thus obtain and process the data from the Server/Code-behind.
The various properties of the dataManager class are tabulated as follows.
Properties | Description |
url | Used to fetch data from the remote dataSource |
updateUrl | Used to update changes made in the database |
insertUrl | Used to insert new data in the database |
removeUrl | Used to remove a record in the database |
batchUrl | Used to make batch changes in the database |
crudUrl | Used when same method is to be triggered for all insert, update and remove operation |
json | Used to fetch data from a local dataSource |
adaptor: “jsonAdaptor” | Used to process json data |
adaptor: “UrlAdaptor” | Used when binding data from a remote dataSource |
adaptor: “remoteSaveAdaptor” | Used when binding local data to the grid dataSource |
adaptor: “ODataAdaptor” | Used for consuming data from a OData service |
adaptor: “WebApiAdaptor” | Used for retrieving data from WebApi service |
adaptor: “customAdaptor” | Used to customize the adaptor available in dataManager class |
Example
In the following code example, the dataSource is bound to the Grid from a remote data and an UrlAdaptor is used.
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: ej.DataManager({ url: "/Home/DataSource", updateUrl: "/Home/Update", insertUrl: "/Home/Insert", removeUrl: "/Home/Delete", adaptor: "UrlAdaptor" }),
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, headerText: "Order ID" },
{ field: "EmployeeID", headerText: 'Employee ID'},
{ field: "Freight", headerText: 'Freight', format: "{0:C}" },
{ field: "ShipCity", headerText: 'Ship City'}
]
});
})
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource(ds => ds.URL(@Url.Action("DataSource", "Home", null, Request.Url.Scheme)).UpdateURL(@Url.Action("Update", "Home", null, Request.Url.Scheme)).InsertURL(@Url.Action("Insert", "Home", null, Request.Url.Scheme)).RemoveURL(@Url.Action("Delete", "Home", null, Request.Url.Scheme)).Adaptor(Adaptor.UrlAdaptor))
.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);
});
})
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("Freight").Format("{0:c}").Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
})
)
[In controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm)
{
var DataSource = OrderRepository.GetAllRecords();
DataResult result = new DataResult();
result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();
result.count = DataSource.Count();
return Json(result, JsonRequestBehavior.AllowGet);
}
public class DataResult
{
public IEnumerable<editableorder>
result { get; set; }
public int count { get; set; }
}
public ActionResult Update(EditableOrder value)
{
OrderRepository.Update(value);
var data = OrderRepository.GetAllRecords();
return Json(data, JsonRequestBehavior.AllowGet);
}
public ActionResult Insert(EditableOrder value)
{
OrderRepository.Add(value);
var data = OrderRepository.GetAllRecords();
return Json(data, JsonRequestBehavior.AllowGet);
}
public ActionResult Delete(int key)
{
OrderRepository.Delete(key);
var data = OrderRepository.GetAllRecords();
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
ASP.NET
[aspx]
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" Create="create">
<editsettings allowadding="True" allowediting="True" allowdeleting="True"></editsettings>
<datamanager url="/Default.aspx/Data" updateurl="/Default.aspx/Update" inserturl="/Default.aspx/Add" removeurl="/Default.aspx/Delete" />
<toolbarsettings showtoolbar="True" toolbaritems="add,edit,delete,update,cancel"></toolbarsettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
<ej:Column Field="ShipCity" HeaderText="Ship City" />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object Data(int skip, int take)
{
var DataSource = OrderRepository.GetAllRecords();
DataResult ds = new DataResult();
ds.result = DataSource.Skip(skip).Take(take);
ds.count = ds.count = DataSource.Count();
return ds;
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object Update(Order value)
{
NORTHWNDEntities1 obj = new NORTHWNDEntities1();
obj.Entry(value).State = EntityState.Modified;
obj.SaveChanges();
var dataSource = OrderRepository.GetAllRecords();
return dataSource;
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object Delete(int key)
{
NORTHWNDEntities1 obj = new NORTHWNDEntities1();
var data = obj.Orders.Find(key);
obj.Orders.Remove(data);
obj.SaveChanges();
var dataSource = OrderRepository.GetAllRecords();
return dataSource;
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object Add(Order value)
{
NORTHWNDEntities1 obj = new NORTHWNDEntities1();
obj.Orders.Add(value);
obj.SaveChanges();
var dataSource = OrderRepository.GetAllRecords();
return dataSource;
}
}
Screenshot:
Figure 1: Editing record
Figure 2: Obtaining the values of edited record at server side
Figure 3: Modified Grid with Post operation displayed in the bottom
I hope you enjoyed learning about how to change the url action path for the JavaScript Grid CRUD operations.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
