Update multiple Grids async using Javascript

[Shane Clay]

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?​

[Shane Clay]

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.

[Eyup]

Hi Shane,

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

[Shane Clay]

 

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.

[Shane Clay]

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();

[Eyup]

Hi Shane,

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