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.
Unfortunately, activation email could not send to your email. Please try again.

Reloading grid data when offline = true

Thread ID:

Created:

Updated:

Platform:

Replies:

119260 May 29,2015 02:00 PM Jun 2,2015 05:12 AM JavaScript 3
loading
Tags: ejGrid
Test
Asked On May 29, 2015 02:00 PM

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();

Prasanna Kumar Viswanathan [Syncfusion]
Replied On June 1, 2015 08:38 AM

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

Test
Replied On June 1, 2015 04:28 PM

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.

Prasanna Kumar Viswanathan [Syncfusion]
Replied On June 2, 2015 05:12 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;