Updating user controls with rad ajax working together with splitter

[Nataraj Vedula]

Hi,

I have a splitter defined into 3 panes(left,middle,right respectively). All are separated by splitbars with defined "collapse mode" property(forward/backward). The splitter is ajaxified using RadAjaxManager.

My functionality is:

I have a panel bar in the left pane, grid in middle pane and a some asp.net controls in the right pane.when ever i click an item from the panel bar, the controls in the right pane changes dynamically.This funtionality works fine when both the panes are not collapsed(using the "collapse mode" property of split bar).

My problem:

"right pane contents are not updated in collased mode".
steps:
1) collapsed the right pane.
2)clicked the panel bar item in left pane.
3)expanded the right pane.
4)found no controls in the right pane were updated.
similarly...
1)expanded both the panes and generated a report.
2)now i collase both the panes and if i do any operation on the grid(in middle pane) the pane controls are not getting updated.

Desired functionality:The pane should be updated in collased mode.

Is this possible? Or else is there any other option to implement this.
User requirement is that the panes must have this expand/collapse property due to real estate problem.

i am providing my code below:

            <telerik:RadPageView ID="ReportPage" runat="server">
                <asp:Panel ID="Panel" runat="server">
<telerik:RadAjaxManager ID="AjaxManager" runat="server" UpdatePanelsRenderMode="Inline"
            ClientEvents-OnRequestStart="mngRequestStarted">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="TabStrip">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="TabStrip" />
                        <telerik:AjaxUpdatedControl ControlID="MultiplePageViews" LoadingPanelID="AjaxLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToExcel" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToWord" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToCsv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ReportGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel" LoadingPanelID="LoadingPanel2" />
                        <telerik:AjaxUpdatedControl ControlID="ReportGrid" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToExcel" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToWord" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToCsv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ReportCatalogue">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="FiltersTable" LoadingPanelID="LoadingPanel2" />
                        <telerik:AjaxUpdatedControl ControlID="ReportGrid" LoadingPanelID="LoadingPanel2" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToExcel" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToWord" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToCsv" />
                        <telerik:AjaxUpdatedControl ControlID="Panel" LoadingPanelID="LoadingPanel2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="GenerateReportButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ReportGrid" LoadingPanelID="LoadingPanel2" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToExcel" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToWord" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToCsv" />
                        <telerik:AjaxUpdatedControl ControlID="Panel" LoadingPanelID="LoadingPanel2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ExportToExcel">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ReportGrid" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToExcel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ExportToWord">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ReportGrid" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToWord" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ExportToCsv">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ReportGrid" />
                        <telerik:AjaxUpdatedControl ControlID="ExportToCsv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="Panel">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Splitter" />
                        <telerik:AjaxUpdatedControl ControlID="ReportCatalogue" />
                        <telerik:AjaxUpdatedControl ControlID="ReportGrid" />
                        <telerik:AjaxUpdatedControl ControlID="FiltersTable" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnRequestStart="mngRequestStarted" />
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel2" runat="server" Transparency="30"
            BackColor="#E0E0E0">
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading3.gif") %>'
                style="margin-top: 40px;" />
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Height="75px"
            Width="75px" Transparency="25">
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading3.gif") %>' />
        </telerik:RadAjaxLoadingPanel>



<telerik:RadSplitter ID="Splitter" runat="server" Height="95%" Width="100%" SplitBarsSize="10" >
                        <telerik:RadPane ID="ReportCataloguePane" runat="server" Width="200" Scrolling="Both">
                            <telerik:RadPanelBar runat="server" ID="ReportCatalogue" ExpandMode="SingleExpandedItem"
                                AllowCollapseAllItems="true" OnItemClick="TecaReportCatalogue_ItemClicked" Skin="Vista"
                                Width="100%" Font-Names="Calibri" Font-Size="Smaller" Font-Bold="True" CausesValidation="false">
                                <CollapseAnimation Duration="100" Type="None" />
                                <ExpandAnimation Duration="100" Type="None" />
                            </telerik:RadPanelBar>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="SplitBar1" runat="server" CollapseMode="Forward" CollapseExpandPaneText ="Reports Catalogue"></telerik:RadSplitBar>
                        <telerik:RadPane ID="GridPane" runat="server">
                            <telerik:RadGrid ID="ReportGrid" runat="server" GridLines="None" Skin="Vista"
                                Height="99.5%" Visible="False" AllowSorting="True" OnNeedDataSource="TecaReportGrid_NeedDataSource"
                                ShowGroupPanel="True" Font-Names="Calibri" Font-Size="Smaller" AllowPaging="True"
                                PagerStyle-Mode="NextPrevNumericAndAdvanced" PageSize="14" EnableAjaxSkinRendering="true">
                                <MasterTableView>
                                    <RowIndicatorColumn>
                                        <HeaderStyle Width="20px" />
                                    </RowIndicatorColumn>
                                    <ExpandCollapseColumn>
                                        <HeaderStyle Width="20px" />
                                    </ExpandCollapseColumn>
                                </MasterTableView>
                                <ClientSettings AllowDragToGroup="True">
                                    <Scrolling AllowScroll="True" />
                                </ClientSettings>
                                <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                                <FilterMenu EnableTheming="True" Skin="Vista">
                                    <CollapseAnimation Duration="200" Type="OutQuint" />
                                </FilterMenu>
                            </telerik:RadGrid>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="SplitBar2" runat="server" CollapseMode="Backward" CollapseExpandPaneText ="Report Filters"></telerik:RadSplitBar>
                        <telerik:RadPane ID="FilterPane" runat="server" Width="200" Scrolling="Both">
                            <table id="FiltersTable" runat="server" class="FilterStyle">
                                <tr id="FiscalYearRow" runat="server" visible="false">
                                    <td>
                                        <asp:Label runat="server" Text="Fiscal Year" ID="FiscalYearLabel" Visible="False"></asp:Label></td>
                                    <td>
                                        <asp:ListBox ID="FiscalYearListBox" runat="server" AutoPostBack="false" Visible="False"
                                            CssClass="FilterStyle"></asp:ListBox></td>
                                </tr>
(some other asp controls are table format all have visible set to FALSE and are updated onclick of panel bar item click accordingly)
                         </table>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </asp:Panel>
            </telerik:RadPageView>

Please provide input to implement this functionality.

thanks,
nataraj.

[Maria Ilieva]

Hello Nataraj Vedula,

Could you please elaborate a little bit more on your scenario. Does the application work properly if you set EnableAjax to "false" for the RadAjaxManager? Also can you please test the project by using regular asp UpdatePanel instead of RadAjaxManager and verify if the problem still appear.

Best wishes,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Nataraj Vedula]

Hi Maria,

I describing the scenario point to point.

1) Added a splitter with three panes(left,middle,right respectively).
2) All the three are separated by 2 splitbars with collapsed property set accordingly.
3) Left pane has a Rad panel bar,middle has a rad grid and right panel has normal asp.net controls.
4) Spliitter is ajaxified with Rad manager.
5) If no panel is collapsed the functionality works fine.
6) I collapsed the right panel(using the collapsed mode="forward" of split bar).
7) Clicked an item of panel bar nested in the left pane.On item click event actaully updates the controls in the right pane. But this does not happen when the right pane is collapsed.

Now other scenario is:
1) I kept both panels expanded and generated a report.
2) I collapsed both the panels using split bars.
3) After performing some grid operation(like grouping,paging), if i expand any of the panel, no controls were found.

So it is like controls are not getting updated if they are in collapsed form.
I want to get over this issue.

As you asked i will try using Updated panels and let you know the result.

And i am not clear on the point you asked: "Does the application work properly if you set EnableAjax to "false" for the RadAjaxManager?"
Can u please explain on this?

thanks and regards,
nataraj.

[Maria Ilieva]

Hi Nataraj Vedula,

"Does the application work properly if you set EnableAjax to "false" for the RadAjaxManager?"

I mean to disable the ajax on the page, and use regular postback to update the controls. If you set EnableAjax property for the RadAjaxManager to "false" this will disable to Ajax functionality. This will give me some additional information if the issue is cause by the Ajax or not.

Kind regards,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.