
Hi All
We're trying to update multiple RadGrid's from the client side after some user activity.
The following code works well:
var
trgAppointments = $find(
"<%=trgAppointments.ClientID%>"
);
trgAppointments.get_masterTableView().rebind();
However, at the same time, we also need to update second Grid on the same page, so we try this:
// Update appointments
var
trgAppointments = $find(
"<%=trgAppointments.ClientID%>"
);
trgAppointments.get_masterTableView().rebind();
// Update progress notes
var
trgProgress = $find(
"<%=trgProgress.ClientID%>"
);
trgProgress.get_masterTableView().rebind();
This doesn't work so well. The end result is:
- trgProgress is updated. trgAppointments is not.
- In fiddler, we see two posts two our page (one for each .rebind()). The first one fails with Conten-Length mismatch, expected x bytes, got 0. The second works OK and is obviously updating trgProgress.
I'm not sure what the right way to go about this is. Any suggestions?
5 Answers, 1 is accepted

Most articles I've read refer to using a RadAjaxManager and calling .ajaxRequest() to achieve a similar result.
However, we already use the AjaxManager, and we also need to be able to have multiple different scenarios on the same page. Ie, click button A refresh grid 1 and 2, press button B, refresh grid 2 and 3.This must be achieved in JavaScript.
Please note that it is not possible to initiate multiple postbacks or AJAX requests consequently. You will need to raise only one postback and handle the rest of the logic on the server.
To achieve that, you can use the fireCommand method only of the first grid with a custom command name:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridtableview-object/methods/firecommand
Then, you can use the e.CommandName argument inside the ItemCommand handler provided by RadGrid and call two Rebind() methods for the grids.
Alternatively, you can add the RadAjaxManager in its own settings to update both of the grids and use the ajaxRequest() approach:
http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/server-side-programming/events/onajaxrequest
Hope this helps.
Regards,
Eyup
Telerik

Hi
This first method still only results in one of the two grids being refreshed on the client side. We run the following:
trgRunningSheets.get_masterTableView().fireCommand(
"UpdateProgressNotes"
,
true
)
And:
Protected
Sub
trgRunningSheets_CommandButton(
ByVal
o
As
Object
,
ByVal
e
As
GridCommandEventArgs)
Handles
trgRunningSheets.ItemCommand
' Process the command
Select
Case
e.CommandName
Case
"UpdateProgressNotes"
trgRunningSheets.Rebind()
trgProgress.Rebind()
End
Select
End
Sub
If we were to use the second method, how can we target different controls for the AJAX post back upon different button clicks. We have several buttons on the page, each one must update multiple controls, but each one is different in which controls it must update.
We need to do this from javascript as opposed to a control event.

Actually, I have found a better solution to this problem.
1. Add the following control to the page:
<
asp:LinkButton
ID
=
"lnkRefreshProgressNotesAndRunningSheetsHIDDEN"
Text
=
"lnkRefreshProgressNotesAndRunningSheetsHIDDEN"
style
=
"display: none;"
runat
=
"server"
/>
2. Setup the RadAjaxManager:
<
telerik:RadAjaxManager
ID
=
"ramManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"lnkRefreshProgressNotesAndRunningSheetsHIDDEN"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"trgProgress"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"trgRunningSheets"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
3. Make the following call in JS when you want to update multiple grids:
var
lnkRefreshProgressNotesAndRunningSheetsHIDDEN = document.getElementById(
"<%=lnkRefreshProgressNotesAndRunningSheetsHIDDEN.ClientID%>"
);
lnkRefreshProgressNotesAndRunningSheetsHIDDEN.click();
4. Handle the request in your code behind:
Protected
Sub
lnkRefreshProgressNotesAndRunningSheetsHIDDEN_Click(o
As
Object
, e
As
EventArgs)
Handles
lnkRefreshProgressNotesAndRunningSheetsHIDDEN.Click
trgRunningSheets.Rebind()
trgProgress.Rebind()
End
Sub
lnkRefreshProgressNotesAndRunningSheetsHIDDEN = document.getElementById(
"<%=lnkRefreshProgressNotesAndRunningSheetsHIDDEN.ClientID%>"
);
lnkRefreshProgressNotesAndRunningSheetsHIDDEN.click();
I'm glad you've managed to find a viable solution for your scenario. A similar implementation can be achieved with the ajaxRequestWithTarget method:
http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/client-side-programming/overview#ajaxrequestwithtargeteventtarget-eventargument
Regards,
Eyup
Telerik