[Solved] Using RadAjaxManager to give different behavior to different RadToolBar buttons?

[Adam]

I have a RadToolBar with 2 buttons, [Save] and [Reload]. The toolbar is associated with a RanPanelBar populated with dynamically created RadGrids full of editable items.

Automatic PostBack is enabled on both buttons. The desired behavior is this:

-[Save] button pressed: the RadPanelBar is not updated (otherwise the dynamically created RadGrids disappear!), but a message (text of a Label) indicating the success or failure of the save operation is displayed

-[Reload] button pressed: the RadPanelBar is updated from the database, with all of the RadGrids re-created - this takes a while, which is why I don't want to just reload the grids in [Save].


To do this, I need to assign different a different "AjaxUpdatedControl" for each toolbar button. This doesn't seem to be working... Here's the ASPX code for 3 controls on my page (1TabStrip and 2 ToolBars - duplicates, one for top of Panel, one for bottom of Panel):

<telerik:RadTabStrip ID="rtsSiteData" runat="server"
    MultiPageID="rmpSiteDataPage" SelectedIndex="0" Skin="Web20">
    <Tabs>
        <telerik:RadTab runat="server" Text="Capabilities" Selected="True">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Local Initiatives">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

...

<telerik:RadToolBar ID="rtbTop" Runat="server" Skin="Office2007"
    Width="100%" AutoPostBack="True" onbuttonclick="rtbTop_ButtonClick">
    <Items>
        <telerik:RadToolBarButton runat="server" Text="Save">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="Reload">
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

...

<telerik:RadToolBar ID="rtbBottom" Runat="server" Skin="Office2007"
    Width="100%" AutoPostBack="True" onbuttonclick="rtbBottom_ButtonClick">
    <Items>
        <telerik:RadToolBarButton runat="server" Text="Save" Owner="rtbBottom">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="Reload" Owner="rtbBottom">
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

When I go to configure the RadAjaxManager, the controls look like this in the AJAX requests window:

rtsSiteData
-i0
-i1

rtbTop
-i0
-i1

rtbBottom
-i0
-i1

If I try and select one button (e.g. i0 of rtbTop), it tries to assign the AjaxUpdatedControls picked to every control with a "i0" entry... this is bad enough, but the AJAX update doesn't seem to occur if I don't select the base control (like the ToolBar itself). The manager ASPX code looks like this:

<telerik:RadAjaxManager runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="i0">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblSaveMsg" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="i1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="CategoriesPanelBar" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManager>

Now this worked fine when I was using two separate RadButtons for the [Save] and [Reload] (they had unique IDs in the AJAX manager config), however the RadToolBar looks much nicer, and I'd like to use that.

I've tried adding a ID="XXX" and CommandName="XXX" to the buttons to give them unique ID's in the AJAX manager config, but it doesn't appear to work.

Am I doing something wrong, or can I not get the functionality I want with ToolBar buttons? It seems like you should be able to assign different controls to update based on which ToolBar button is pressed, but I just can't get it to work.


Thanks,
-Adam

[Adam]

Update:

I found a ton of information about having one button perform an AJAX update, while another button would perform a regular postback, but that wasn't quite what I wanted (I don't want any full refreshes of the page).

I found this link : http://www.telerik.com/support/kb/aspnet-ajax/toolbar/updating-different-control-with-ajax-depending-on-clicked-toolbarbutton.aspx

I thought this is what I wanted to do; unfortunately this doesn't work with my setup because my dynamically created RadGrids aren't saved in the viewstate and disappear if there's ANY AJAX update to the RadPanel they are inside. This project shows how to update the controls based on the toolbar button pressed, but not how to prevent an AJAX update on a control based on which toolbar button is pressed!


I managed to get the desired functionality with a bit of an ugly hack, by creating 2 invisible buttons (with Style="Display: none;") that are programmatically clicked client side whenever the corresponding toolbar button is clicked. The RadAjaxManager can then reference those buttons instead of the toolbars, and update only the save message label when [Save] is clicked, but update the save message label AND the RadPanel (with its nested, dynamically created RadGrids) when [Reload] is clicked.


If there's no other way of doing this, I guess I'm okay with the "hidden RadButton" approach... it's not a lot of extra markup in the rendered page. I'm kind of disappointed I can't get the functionality right out of the ToolBar buttons, though.


Thanks,
-Adam