How to use ashx return json data format for ejgrid to do CRUD

[jeff]

Hi,

I try to use ejgrid & ashx to query data by page mode & create row, update, delete

I already sucess to get data & display,

Could you give me sample for ejgrid to operate by ashx , page mode, crud sample code

Thanks

[Vignesh Natarajan]

Hi Jeff, 

 

Thanks for contacting Syncfusion Support. 

 

From your query, we understand that you need to perform CRUD operation using ashx handler in ejGrid. We have achieved your requirement by sending AJAX post in the endAdd, endEdit and endDelete events of the Grid. We have passed the modified data to server through ajax post and update the changes in server. On ajax success we have updated the modified dataSource to ejGrid using DataSource() method.   

 

Kindly download the sample from the below link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/140275/ze/ashx-494134298.zip 

 

 

Please refer to the code example 

 

<script type="text/javascript"> 

        $(function () { 

              var dataManager = ej.DataManager({  

                   url: "Handler/Data.ashx", 

            adaptor: new ej.UrlAdaptor()  

        });              

               var query = ej.Query().take(3); 

              var execute = dataManager.executeQuery(query) // executing query 

                 .done(function (e) { 

                   $("#Grid").ejGrid({ 

                         dataSource: e.result, 

                         allowPaging: true,        // to enable paging in  Grid 

.             .                   .                  .                  .            .           .              .                .  

                         endAdd: function (args) { 

                            makeAjaxCall({ method: "insert", callbackmethod: "insertEmployeeSuccess", OrderID: args.data.OrderID, CustomerID: args.data.CustomerID, EmployeeID: args.data.EmployeeID, ShipCity: args.data.ShipCity}); 

 

                         }, 

                         endEdit: function (args) { 

                             makeAjaxCall({ method: "update", callbackmethod: "updateEmployeeSuccess", OrderID: args.data.OrderID, CustomerID: args.data.CustomerID, EmployeeID: args.data.EmployeeID, ShipCity: args.data.ShipCity }); 

 

                         }, 

                         endDelete: function (args) { 

                             makeAjaxCall({ method: "delete", callbackmethod: "deleteEmployeeSuccess", Id: args.data.OrderID }); 

 

                         } 

 

                     }); 

                    }); 

               

               

        }); 

       function makeAjaxCall(parameter) { 

            $.ajax({ 

                type: 'POST', 

                url: "Handler/Data.ashx", 

                data: parameter, 

                dataType: 'json', 

                success: function (response) { 

                   $("#Grid").ejGrid("dataSource", response); 

                    alert("Success") 

                 }, 

                   error: function () { 

                     alert("error") 

                } 

            }) 

        } 

    </script> 

 

 

Kindly refer the below help documentation for your reference 

 

https://help.syncfusion.com/js/grid/paging  

 

https://help.syncfusion.com/api/js/ejgrid#events:endadd 

 

https://help.syncfusion.com/api/js/ejgrid#events:enddelete 

 

https://help.syncfusion.com/api/js/ejgrid#events:endedit 

 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource  

 

 

Regards, 

 

Vignesh Natarajan