This is a migrated thread and some comments may be shown as answers.

Update multiple Grids async using Javascript

5 Answers 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shane Clay
Top achievements
Rank 1
Shane Clay asked on 10 Jul 2015, 09:07 AM

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

Sort by
0
Shane Clay
Top achievements
Rank 1
answered on 10 Jul 2015, 09:38 AM

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.

0
Eyup
Telerik team
answered on 15 Jul 2015, 07:51 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Shane Clay
Top achievements
Rank 1
answered on 20 Jul 2015, 08:43 AM

 

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.

0
Shane Clay
Top achievements
Rank 1
answered on 20 Jul 2015, 09:00 AM

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();
0
Eyup
Telerik team
answered on 23 Jul 2015, 08:25 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Shane Clay
Top achievements
Rank 1
Answers by
Shane Clay
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or