Update multiple Grids async using Javascript

6 posts, 0 answers
  1. Shane Clay
    Shane Clay avatar
    29 posts
    Member since:
    May 2010

    Posted 10 Jul 2015 Link to this post

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

  2.
  3. Shane Clay
    Shane Clay avatar
    29 posts
    Member since:
    May 2010

    Posted 10 Jul 2015 in reply to Shane Clay Link to this post

    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.

  5. Eyup
    Admin
    Eyup avatar
    3756 posts

    Posted 15 Jul 2015 Link to this post

    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
  7. Shane Clay
    Shane Clay avatar
    29 posts
    Member since:
    May 2010

    Posted 20 Jul 2015 in reply to Eyup Link to this post

     

    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.

  8.
  9. Shane Clay
    Shane Clay avatar
    29 posts
    Member since:
    May 2010

    Posted 20 Jul 2015 in reply to Shane Clay Link to this post

    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();
  11. Eyup
    Admin
    Eyup avatar
    3756 posts

    Posted 23 Jul 2015 Link to this post

    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
Back to Top