CRUD on local datasource

[Martin]

Hi,

I'm trying to achieve CRUD operations on Grid datasource when datasource is a collection from a viewmodel.

I want to work with the local datasource adding and editing rows on the viewmodel on the view, in order to send back the modified viewmodel to controller later.

All the docs ans samples using controller to add or edit rows but I want to add or edit over de viewmodel datasource on client side.

I set de datasource in this way

            var grid = document.getElementById("gridChequesTerceros").ej2_instances[0];
            var data = @Html.Raw(Json.Encode(Model.MovimientoTesoreriaDetallesViewModel[0].ChequesTercerosViewModel));
            var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where('MovimientoTesoreriaDetalleViewModelID', 'equal', 0));
            grid.dataSource = detaildata;



but when I perform an edit on grid, data is not saved on datasource.

[Rajapandi Ravi]

Hi Martin,

Greetings from Syncfusion support

After reviewing your query, we could see that you are facing the problem of add and edit are not updating to the datasource. Based on your query we have prepared a sample and tried to reproduce your reported problem at our end, but it was unsuccessful. The add and edit value was updating properly to the datasource and working fine at our end.

 

<input type="button" onclick="setDataSource()" value="Add Data" />

@(Html.EJS().Grid<mvc_ej2.Models.Order>("Grid").Columns(col =>

    {

        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).ValidationRules(new { required = true }).Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

        col.Field("ShipCountry").HeaderText("Ship Country").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

        col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();

    }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Render())

 

<script>

 

    function setDataSource() { //button click

        var datas = ej.data.DataUtil.parse.parseJson(@Html.Raw(Json.Encode(ViewBag.dataSource)));

        var result = new ej.data.DataManager(datas).executeLocal(new ej.data.Query().where('ShipCountry', 'equal', 'Denmark'));

        var grid = document.getElementById("Grid").ej2_instances[0];

        grid.dataSource = result;

    }

</script>

 

Sample:

By default, the Editing feature requires a primary key column for CRUD operations. To define the primary key, set columns.isPrimaryKey to true in particular column.

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

So please ensure that you have defined the isPrimaryKey property in your unique value column or not.

Regards,

Rajapandi R

Attachment: 183591_199cd355.zip

[Martin]

Hi,

I worked on your sample but still I cannot reach my goal.

In the following code, edited from your sample, I'm trying to keep updated my _orders variable with data from controller in order to later send back to controller when user submit the form.

In this sample, I created a second grid to monitor changes on _orders after editing a row in grid. But clearly the form variable  List<orders>  _orders remains unchanged after saved changes on grid control.

I want to update the object _orders or model object on view in order to send back updated to controller when submit the form



@using mvc_ej2.Controllers;
@{
    ViewBag.Title = "Editing-SQL-data";
    List<mvc_ej2.Controllers.HomeController.Orders> _orders = ViewBag.dataSource;
}


<br />
<br />
<br />
<br />
<input type="button" onclick="setDataSource();" value="Add Data" />
<input type="button" onclick="reload_Grid()" value="reload" />


@(Html.EJS().Grid<mvc_ej2.Models.Order>("Grid").Columns(col =>
    {
        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).ValidationRules(new { required = true }).Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("ShipCountry").HeaderText("Ship Country").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
    }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Render())


<br />
<br />


@(Html.EJS().Grid<mvc_ej2.Models.Order>("Grid1").Columns(col =>
    {
        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).ValidationRules(new { required = true }).Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("ShipCountry").HeaderText("Ship Country").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("ShipCity").HeaderText("Ship City").Width("120").Add();
    }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Render())


<script>




     function reload_Grid() {
        var datas = ej.data.DataUtil.parse.parseJson(@Html.Raw(Json.Encode(_orders)));
        var result = new ej.data.DataManager(datas).executeLocal(new ej.data.Query().where('ShipCountry', 'equal', 'Denmark'));
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.dataSource = result;


        var datas1 = ej.data.DataUtil.parse.parseJson(@Html.Raw(Json.Encode(_orders)));
        var result1 = new ej.data.DataManager(datas1).executeLocal(new ej.data.Query().where('ShipCountry', 'equal', 'Denmark'));
        var grid1 = document.getElementById("Grid1").ej2_instances[0];
        grid1.dataSource = result1;
    }

    function setDataSource() {
        var datas = ej.data.DataUtil.parse.parseJson(@Html.Raw(Json.Encode(_orders)));
        var result = new ej.data.DataManager(datas).executeLocal(new ej.data.Query().where('ShipCountry', 'equal', 'Denmark'));
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.dataSource = result;
    }
</script>

[Rajapandi Ravi]

Martin,

If you are using local data in your project, then all the Grid actions like Paging, Editing, Sorting, etc., are performed at client side only and it will not update your model class List<orders> _orders after performing Edit operation.

If you like to perform all Grid actions at client side and like to perform the server side actions only for CRUD. We suggest you use RemoteSaveAdaptor of Grid.

By using this you can perform CRUD actions in server side and the remaining grid actions like paging, sorting, filtering etc., are performed in the client side.  So, you can achieve your requirement by using this RemoteSaveAdaptor. Please refer to the below documentation for more information.

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/remote-data#remote-save-adaptor

If you like to perform all the Grid actions at Server-side, we suggest you use the URL Adaptor of Grid. Also, when using the UrlAdaptor, you need to return the data as JSON from the controller action and the JSON object must contain a property as result with dataSource as its value and one more property count with the dataSource total records count as its value.

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/remote-data#handling-on-demand-grid-actions

                              https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/persisting-data-in-server#using-url-adaptor