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. Image for the cookie policy date
close icon

Reloading grid data when offline = true

Hi,
I have this grid:

$("#Grid").ejGrid({
     allowPaging: true,
     dataSource: ej.DataManager({
          url: "SomeWebServiceUrl",
          offline: true,
          adaptor: 'UrlAdaptor'
     }),
     pageSettings: {
          pageSize: 10
     },
     columns: [ ... ]
});

After I do some CRUD (outside the grid) I just want to reload the grid data.

btw, this doesn't work: grid.refreshContent();

3 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team June 1, 2015 12:38 PM UTC

Hi Test,
Thanks for using Syncfusion Products.

We have analyzed your query and you are performing CRUD operation outside the grid. We can perform CRUD operations using the methods addrecord, deleterecord, updaterecord.
1.  We can add a new record using addRecord method of ejGrid. We have already created a UG documentation for addrecord method, please refer the following link:

Link : http://help.syncfusion.com/UG/JS_CR/ejGrid.html#%20addRecord

2. We can delete a record using deleteRecord method of ejGrid. We have already created a UG documentation for the editrecord method, please refer the following link:

Link : http://help.syncfusion.com/UG/JS_CR/ejGrid.html#deleteRecord

3. We can update the record using updateRecord method of ejGrid. We have already created a UG documentation for the updaterecord method, please refer the following link:

Link : http://help.syncfusion.com/UG/JS_CR/ejGrid.html#updateRecord

To reload the grid data ,  we suggest you to use dataSource method of ejGrid. Please find the following code snippet

var grid = $("#Grid").ejGrid("instance");


        grid.dataSource(data);  // data indicates updated dataSource



Please get back to us if you have any further assistance,

Regards,
Prasanna Kumar N.S.V


TE Test June 1, 2015 08:28 PM UTC

Thanks Kumar.

I used the CRUD methods: addrecord, deleterecord, updaterecord; but these doesnt works like I want it, because they only change the grid on client side, and I want to do it on server side.

This is the grid configuration I have:

dataSource: ej.DataManager({
                url: "SomeWebService",
                updateUrl: '
SomeWebService',
                insertUrl: '
SomeWebService',
                deleteUrl: '
SomeWebService',
                offline: true,
                adaptor: 'UrlAdaptor'
            }),

Now, about this...


var grid = $("#Grid").ejGrid("instance");

 grid.dataSource(data);  // data indicates updated dataSource

After I did it, the dataSource lost all his original configuration (like the url on DataManager).

Remember that I want to keep the offline as true.


PK Prasanna Kumar Viswanathan Syncfusion Team June 2, 2015 09:12 AM UTC

Hi Test,
Thanks for the Update.
We analyzed your requirement and we suggest you to use remotesaveAdaptor to perform CRUD operation in server-side. RemotesaveAdaptor can be used when you bind local data to Grid datasource. CRUD operations in Grid local data can be mapped to server-side controller using CRUD URL’s “InsertUrl”, “UpdateUrl” and “RemoveUrl”.
When you use remoteSaveAdaptor, server-side post back occurs only for CRUD actions in Grid. Rest of the Grid actions(paging, sorting, filtering, etc.,) can be handled at client-side itself.
Using addRecord, deleteRecord and Update Record methods we can able to perform CRUD actions in server side. Please find the below code snippet


<div id="Grid"></div>

<button id="button"> Insert </button>

<button id="button1"> Delete </button>

<button id="button2"> Update </button>

<script type="text/javascript">

    $(function () {

        $("#Grid").ejGrid({

            dataSource: ej.DataManager({ json: window.gridData, updateUrl: "/Grid/Update", insertUrl: "/Grid/Insert", removeUrl: "/Grid/Delete", adaptor: "remoteSaveAdaptor" }),

            endEdit: "edit",

            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", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },

                    { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },

                    { field: "EmployeeID", headerText: 'Employee ID',  textAlign: ej.TextAlign.Right, width: 80, validationRules: { number: true } },

                    { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" },

                    { field: "ShipName", headerText: 'Ship Name', width: 150 },

                    { field: "ShipCountry", headerText: 'Ship Country', width: 90 }

            ]

        });

    });

    $("#button").ejButton({

        click: function (args) {

            var grid = $("#Grid").ejGrid("instance");

            var data = { OrderID: 10247, CustomerID: "STRPQ", EmployeeID: 4, Freight:12.34, ShipName:"Titanic", ShipCountry: "Mexico" };

            grid.addRecord(data);

        }

    });

    $("#button1").ejButton({

        click: function (args) {

            var grid = $("#Grid").ejGrid("instance");

            grid.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });

        }

    });

    $("#button2").ejButton({

        click: function (args) {

            var grid = $("#Grid").ejGrid("instance");

            grid.updateRecord("OrderID", { OrderID: 10251, EmployeeID: 3 });

        }

    });
</script>

 
For your convenience we provided a video with performing CRUD actions in server side using addRecord, editRecord and updateRecord methods

Link : http://www.syncfusion.com/downloads/support/forum/119260/ze/Video547310493

We have created a sample and same can be downloaded from the below link

Sample Link : http://www.syncfusion.com/downloads/support/forum/119260/ze/Sample-171215458

Please get back to us if you have any further assistance,

Regards,
Prasanna Kumar N.S.V

Loader.
Live Chat Icon For mobile
Up arrow icon