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

Refresh Grid with updated data

I bind my grid on page load. I then use an AJAX modal pop-up (displayed on row double-click) to modify the selected row data. On the save button, I update the data to the database. How do I refresh the grid with the updated data from the C# code behind?

1 Reply

AS Alan Sangeeth S Syncfusion Team January 27, 2015 12:35 PM UTC

Hi Dirk,

Thanks for using Syncfusion Products.

We are glad to let you know that we have created a sample based on your requirement and the same can be downloaded from below link.


Sample: http://www.syncfusion.com/downloads/support/directtrac/118052/Sample-959640018-301822669.zip

In the above sample, using “RecordDoubleClick” Grid event we have shown a dialog to display the values of current record and on “click” event of save button in dialog we have used ajax post to update database and then in its success event we have updated Grid using “updateRecord” Grid method. Please refer the following code snippets.

<ej:Grid ID="Grid" runat="server" AllowPaging="true" Width="1500px">
...
<ClientSideEvents RecordDoubleClick="EditHandler" />

        </ej:Grid>

<ej:Dialog ID="basicDialog" Width="550" runat="server" Title="Edit Record"  ShowOnInit="false">

                    <DialogContent>

                    <div id="EditTable"></div>

                        </DialogContent>

</ej:Dialog>

function EditHandler(args) {

...

            $("#EditTable").html(editData)

            $("#basicDialog").ejDialog("open")

        }

        function saveHandler() {

...

            $.ajax({

                url: "Default.aspx/Update",

                data: JSON.stringify({ value: data }),

...

                type:"POST",

                success: function (e) {

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

                    obj.updateRecord("OrderID",e.d);

                    $("#basicDialog").ejDialog("close")

                }

                })

        }

Alternatively, instead of manually opening dialog on record double click we can use “Dialog Editing” feature of Grid to use dialog for Editing and “RemoteSaveAdaptor” of Grid DataManager which has server-side interaction during CRUD operation in Grid.

Please refer the following online sample link for Dialog Editing in Grid and UG Documnetaion for “RemoteSaveAdaptor” of Grid DataManager.

Online Sample: http://mvc.syncfusion.com/demos/web/grid/dialogediting

RemoteSaveAdaptor Documentation: http://help.syncfusion.com/ug/js/documents/crudoperationwithser.htm

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S



Loader.
Live Chat Icon For mobile
Up arrow icon