Question

Hi I have a two MVC Telerik Grids Showing up in one View.

Each Grid has a Custom Column with Edit Link

When User Clicks Edit Link a dialog-model will popup with a form and after user hits save button.
Below Script will run

 function OpenStopForm() {

    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-model").dialog({
        height: 220,
        width: 340,
        modal: true,
        buttons: {
            "Save": function () {
                var note = $('textarea[name=StopNote]').val();
                $.ajax({
                    type: "POST",
                    url: "/Medication/StopMedication",
                    data: { ID: pid, StopNote: note },
                    dataType: "json",
                    success: refreshGrid()
                });
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

}

after above function successfully runs,
I want the Two telerik Grids to refresh with some sort of ajax call.
i though of calling a function like this
success: refreshGrid

function refreshGrid() {
     $('#CurrentMedication').data('t-grid').ajaxRequest();
}

But refreshGrid function is being called before my Controller action is performed.
I want this function to be called after my controller action is complete.

I am not sure if my syntax is correct!.

I tried to do something from here

Can any one help me how to call the refreshgrid function upon success on ajax Post.
Also please correct me with my function to refresh the grid.

Answer 1

I have modified my ajax call as below

  $.ajax({
                type: "POST",
                url: "/Medication/StopMedication",
                data: { ID: pid, StopNote: note },
                dataType: "text",
                success: function (data) {
                refreshGrid();
                }
          })

My refresh Grid goes like this

function refreshGrid() {
$(".t-grid .t-refresh").trigger('click');
}