editing functions in grid using ajax

[Harry Zheng]

Hi,

I want to use ajax to add, delete and edit record in grid in asp.net mvc 5. Could you give me an example for those functions? I know how to do these in treegrid, but I have to switch to grid for other functions.

To better describe my question, I have pasted the code from treegrid. Basically I want similar functions in grid like the following code:

And, after ajax succeed, I'd like to refresh the edited record, just like in treegrid: treeGridObj.refreshRow(index);

function endEdit(args) {
            var editedRecord = args.data.item;
            var treeGridObj = $("#InventoryGrid").data("ejTreeGrid");
            var index = treeGridObj.model.updatedRecords.indexOf(args.data);
           
            $.ajax({
                type: "POST",
                url: '@Url.Content("~/Inventory/UpdateInventory/")',
                data: editedRecord,
                dataType: "json",
                success: function (data) {
                    var treeGridObj = $("#InventoryGrid").data("ejTreeGrid");
                    var index = treeGridObj.model.updatedRecords.indexOf(args.data);
                    treeGridObj.refreshRow(index);
                }
            });

        }
  

    function ActionComplete(args)
    {

        if (args.requestType==='recordUpdate')
        {
            var item=args.data.item;
            $.ajax({
                type:"POST",
                //url: "/Inventory/UpdateInventory",
                url:'@Url.Content("~/Inventory/UpdateInventory/")',
                data: item,
                dataType: "json"
            });
        }else if (args.requestType==='addNewRow') {
            addedRecord=args.addedRow;
            var treeGridObj=$("#InventoryGrid").data("ejTreeGrid");
            var index=treeGridObj.model.updatedRecords.indexOf(args.data); 
            $.ajax({
                type:"POST",
                url:'@Url.Content("~/Inventory/UpdateInventory/")',
                data:addedRecord,
                dataType: "json",         
                success: function(data){
                  
                }
            });
        }else if (args.requestType==='delete') {
            var treeGrid=$("#InventoryGrid").data("ejTreeGrid");
                    var data=args.data;
                    var deletedRecord=data.item;
                    $.ajax({
                        type:"POST",
                        url:'@Url.Content("~/Inventory/DeleteInventory/")',
                        data:deletedRecord,
                        dataType: "json",
                        success:function(data){
                    });
                }
            });

        }
    } 

Thank you,

Harry

               

[Seeni Sakthi Kumar Seeni Raj]

Hi Harry,

To perform the add/delete/update actions on Grid, we suggest you to use the RemoteSaveAdaptor. Please refer to our Help Document for RemoteSaveAdaptor.

http://help.syncfusion.com/aspnetmvc/grid/editing?cs-save-lang=1&cs-lang=razor#remotesave-adaptor

We have also showcased a remoteSaveAdaptor sample in our online demo.

http://mvc.syncfusion.com/demos/web/grid/normalediting

Regards,
Seeni Sakthi Kumar S.

[Harry Zheng]

Hi Seeni,

I know how to editing using RemoteSaveAdaptor in grid. I just want to know how to do editing using ajax.

Can you do editing in grid using ajax?

Thanks,

Harry

[Saravanan Arunachalam]

 Hi Harry,

We have achieved your requirement “Perform editing operation using Ajax post” with the help of “ActionComplete” event of Grid. Please refer to the code example.

@(Html.EJ().Grid<AjaxEditing.OrdersView>("FlatGrid")

        .ClientSideEvents(e => { e.ActionComplete("complete"); })

        . . .

)

<script type="text/javascript">

    function complete(args) {

       

        if (args.requestType == "save") {

            $("#FlatGrid").ejWaitingPopup("show");

            var val = JSON.stringify(args.data);

           

            //Get the Url based on action

            var path = args.action == "add" ? "../Grid/Insert" : "../Grid/Update"

           

            //Ajax post for Insert and Edit

            $.ajax({

                type: "POST",

                url: path,

                data: { data: val },

                dataType: "json",

                success: function (data) {

                    $("#FlatGrid").ejWaitingPopup("hide");

                }

            })

        }

        if (args.requestType == "delete") {

            $("#FlatGrid").ejWaitingPopup("show");

            var val = args.data.OrderID;

            //Ajax Post for Delete

            $.ajax({

                type: "POST",

                url: "../Grid/Delete",

                data: {key: val},

                dataType: "json",

                success: function (data) {

                    $("#FlatGrid").ejWaitingPopup("hide");

                }

            })

        }

    }

</script>

We have created a sample that you can download from the below link.

http://www.syncfusion.com/downloads/support/forum/121186/ze/AjaxEditing677411249

Regards,

Saravanan A.