Telerik MVC grid update using jQuery function

Question

Hi, I have two MVC Telerik grids displayed in one view.

Each grid has a custom column with a link "Edit Link"

When the user clicks the "Edit Link" button, the dialog model will display the form even after clicking the "Save" button. Below script will be executed

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 the function above is successfully launched,
I want the two telerik grids to be updated with some kind of ajax call.
I though call a function like this
success: refreshGrid

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

But the refreshGrid function is called before the Controller action is executed.
I want this function to be called after the completion of my controller action.

I am not sure if my syntax is correct.

I tried to make something from here

Can anyone help me how to call the refreshgrid function after success on ajax Post. Also, please correct me with my function to update the grid.

Answer 1

I changed my ajax call below

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

My update grid is as follows

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

Answer 2

If someone is looking for this, you need to update a small update, like

 $(".k-grid .k-pager-refresh").trigger('click');