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

Dynamic button not updating grid

2 Answers 92 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 11 Sep 2008, 03:37 PM
I have a complex page involving both declarative structure referenced by my AjaxSettings and dynamic child controls in portions of that structure.  The page uses RadAjaxManager to update portions of the page when various user actions occur. The page has a mostly declarative structure, but then a bunch of controls are added at runtime (in CreateChildControls).

<div>
    
<radUI:RadAjaxManager ID="TheAjaxManager" runat="server" 
                
DefaultLoadingPanelID="TheAjaxLoadingPanel"
                
EnableEmbeddedScripts="True"
                
OnAjaxRequest="TheAjaxManager_AjaxRequest"
                
EnableViewState="True"
                
EnableAJAX="True">
        <AjaxSettings>
            
<radUI:AjaxSetting AjaxControlID="PatientListTabPages">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="PatientListTabPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
            
<radUI:AjaxSetting AjaxControlID="PatientListTabStrip">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="PatientListTabStripPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="PatientListTabPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
            
<radUI:AjaxSetting AjaxControlID="PatientSearchTabStrip">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="PatientSearchTabStripPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="SearchParamsPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="SearchResultsArea"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
            
<radUI:AjaxSetting AjaxControlID="PatientSearchTabPages">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="SearchParamsPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="SearchResultsArea"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
            
<radUI:AjaxSetting AjaxControlID="SearchParamsPanel">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="SearchParamsPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="SearchResultsArea"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
            
<radUI:AjaxSetting AjaxControlID="SearchResultsArea">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="SearchParamsPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="SearchResultsArea"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
            
<radUI:AjaxSetting AjaxControlID="PLExpandCollapseButton">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="PLButtonsPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="PatientListTabPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="PatientListTabStripPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
            
<radUI:AjaxSetting AjaxControlID="PLExpandCollapseButton">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="PLButtonsPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="PatientListTabPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="PatientListTabStripPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
            
<radUI:AjaxSetting AjaxControlID="PSExpandCollapseButton">
                
<UpdatedControls>
                    
<radUI:AjaxUpdatedControl ControlID="PSButtonsPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="PatientSearchTabStripPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="SearchParamsPanel"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                    
<radUI:AjaxUpdatedControl ControlID="SearchResultsArea"
                                
LoadingPanelID="TheAjaxLoadingPanel" />
                
</UpdatedControls>
            
</radUI:AjaxSetting> 
        
</AjaxSettings>
    
</radUI:RadAjaxManager>

    <radUI:RadAjaxLoadingPanel ID="TheAjaxLoadingPanel" runat="server"
                    
Transparency="15" 
                    IsSticky="True" Style="position: absolute; left: 200; top: 60; z-index: 999;"
                    
Height="240px" Width="240px">
        
<asp:Image ID="Image1" runat="server" Height="160px" Width="240px"
                    
AlternateText="Loading..." />
    
</radUI:RadAjaxLoadingPanel>

    
<radUI:RadWindowManager ID="TheWindowManager" runat="server"
                    
EnableEmbeddedSkins="False" Skin="Valco" >
    
</radUI:RadWindowManager>

    
<asp:Panel runat="server" ID="PatientListSection" Style="margin-bottom: 15px;">
        
<div>
            
<asp:Panel runat="server" CssClass="PLButtonPanel" ID="PLButtonsPanel">
                
<asp:ImageButton ID="PLExpandCollapseButton" runat="server" 
                            
ImageUrl=".\images\minimize.gif" />
            
</asp:Panel>
            
<asp:Label ID="PatientListLabel" CssClass="PLLabel" runat="server">
            
</asp:Label>
            
<asp:Panel runat="server" CssClass="PLTabPanel"
                            
ID="PatientListTabStripPanel">
                
<radUI:RadTabStrip Align="Left" CssClass="PLTabStrip"
                            
ID="PatientListTabStrip" runat="server" 
                            
EnableEmbeddedSkins="False"
                            
EnableEmbeddedScripts="True"
                            
MultiPageID="PatientListTabPages"
                            
Skin="Valco" SelectedIndex="0" 
                            
AutoPostBack="True" 
                            
Orientation="HorizontalTop" Width="100%"
                            
ReorderTabsOnSelect="false">
                    
<Tabs>
                    
</Tabs>
                
</radUI:RadTabStrip>
            
</asp:Panel>
        
</div>
        
<div>
            
<asp:Panel runat="server" ID="PatientListTabPanel">
                
<radUI:RadMultiPage ID="PatientListTabPages" runat="server"
                                
SelectedIndex="0" RenderSelectedPageOnly="True" >
                
</radUI:RadMultiPage>
            
</asp:Panel>
        
</div>
    
</asp:Panel>

    
<asp:Panel runat="server" ID="SearchSection">
        
<div>
            
<asp:Panel DefaultButton="PSExpandCollapseButton" runat="server"
                            
CssClass="PSButtonPanel"
                            
ID="PSButtonsPanel">
                
<asp:ImageButton ID="PSExpandCollapseButton" runat="server" 
                            
ImageUrl=".\images\minimize.gif" />
            
</asp:Panel>
            
<asp:Label ID="PatientSearchLabel" CssClass="PSLabel"
                            
Text="Patient Search" runat="server">
            
</asp:Label>
            
<asp:Panel runat="server" CssClass="PSTabPanel"
                            
ID="PatientSearchTabStripPanel" >
                
<radUI:RadTabStrip Align="Left" 
                            
ID="PatientSearchTabStrip" runat="server" 
                            
EnableEmbeddedSkins="False"
                            
EnableEmbeddedScripts="True"
                            
CssClass="PSTabStrip" AutoPostBack="True"
                            
MultiPageID="PatientSearchTabPages" 
                            
Skin="Valco"  Orientation="HorizontalTop"
                            
SelectedIndex="0" Width="100%" 
                            
ReorderTabsOnSelect="false">
                    
<Tabs>
                    
</Tabs>
                
</radUI:RadTabStrip>
            
</asp:Panel>
        
</div>
        <div>
            
<asp:Panel runat="server" ID="SearchParamsPanel" >
                
<radUI:RadMultiPage ID="PatientSearchTabPages" runat="server"
                            
BorderWidth="2px" SelectedIndex="0" >
                
</radUI:RadMultiPage>
            
</asp:Panel>
            
<asp:Panel Style="position: relative; top: 2px;" ID="SearchResultsArea"
                            
runat="server">
            
</asp:Panel>
        
</div>
    
</asp:Panel>
</div>


Sorry it is so long. but now here's the next piece. 
Conceptually, the hierarchy amounts to:

    Top Section (asp:Panel: "PatientListSection")
        Panel for my own expand/collapse buttons (asp:Panel: "PLButtonPanel")
            Image button
        Label (asp:Label)
        Panel for tabStrip (asp:Panel: "PatientListTabPanel")
            Tabstrip to choose a list (RadTabStrip: "PatientListTabStrip")
                Tabs
                    < runtime added tabs>
        Panel for MultiPage (aspPanel: "PatientListTabPanel")
            MultiPage for list results (RadMultiPage: "PatientListTabPages")
                < runtime added RadPageViews >
                    < runtime added RadGrid on each pageview >
    
Search Section (asp:Panel: "SearchSection")
        Panel for my own expand/collapse buttons (asp:Panel: "PSButtonPanel")
            Image button
        Label (asp:Label)
        Panel for tabStrip (asp:Panel: "PatientSearchTabStripPanel")
            Tabstrip to choose a list (RadTabStrip: "PatientSearchTabStrip")
                Tabs
                    < runtime added tabs>
        Panel for search parameters PageViews (asp:Panel: "SearchParamsPanel")
            MultiPage for search params (RadMultiPage: "PatientSearchTabPages")
                < runtime added RadPageViews for parameter panels >
                    <runtime added asp:Panel for each PageView >
                        <runtime added Search asp:Button >
                        <runtime added text and input controls to enter params>
        
Panel for search results grid (asp:Panel: "SearchResultsArea")
            <runtime added RadGrid to hold search results >       
            
The above basic structure amounts to two main sections - one where a number of lists may be displayed by using a tabstrip to select which page of a MultiPage to look at.  At runtime, the tabs of the tabstrips and PageViews to go with them are created based on customer specific configuration data.  On each PageView is a RadGrid to display the data. Since the lists displayed tend to be from a subset of the universe of data available, performance is served by having one grid per PageView in this top section, allowing switching PageViews using the tabstrip to very quickly look at different lists.

Then there is a bottom section that is used to display data based on search criteria against a much larger universe of data.  In this scenario, because searches take MUCH longer, we really much execute each search only when needed, and also because sdearches each may have different arameters to search on - again based on customer specific configuraiton data.  So in the bottom section, we still use a TabStrip, but the MultiPage is not used for switching between grids.  Rather, since each search needs different configured parameters, at runtime we setup a tab for each search and a PageView that contains an Asp:Panel holding a search button and a series of fields to be filled in. Then, below it, in the "SearchResultsArea" panel in the markup, we have created at runtime a RadGrid to display whatever search result they have executed a search for.  We don;t create that RadGrid in the markup (even though only one) because if they do not configure any searches for a given customer, we don' want even an empty grid to display. 

Now, this all worked exactly right under RadControls for ASP.Net.  But now that we are running under RadControls for ASP.Net AJAX, there is a problem.  Everything in the top part works fine.  But in the bottom section, when the user fills in the text fields created on a PageView inside "PatientSearchTabPages", the "SearchParamsPanel" gets updated (styling changes when they do a search), and the RadGrid in the "SearchResultsArea" does rebind and get data in the code-behind, but the radGrid does not update on the screen.  On the other hand, if we change tabs by clicking a tab in the PatientSearchTabStripPanel", which causes the code behind to rebind the RadGrid to the appropriate search, the RadGrid updates just fine on the screen.  To rephrase, clikcing a tab in the search tabstrip DOES case the RadGrid in "SearchResultsArea" to repaint, but clikcing a button in one of the PageViews of PatientSearchTabPages" does NOT cause the RadGrid in "SearchResultsArea"to get repainted. 

My sense is that for some reason, the runtime created asp:Buttons are not causing the AjaxSetting for it's contining MultiPage and Panel that says to update SearchResultsArea to be obeyed.  Of course, if I then press a button I have in the SearchResultsArea saying to reload the grid, it repaints fine.  It's just the one scenario where a dynamically added button on a dynamically created panel in a dynamically added PageView of the MultiPage does not trigger the AjaxSetting to fire.

Again, everything else is fine and this was fine with this exact structure under RadControls for ASP.Net, just not for the new version.  In both versions, I had the same RadAjaxManager and settings - none of that changed.  Of course, I am now subject to however the new stuff works with the MS Ajax stuff and the use of Scriptmanager, so I'm guessing there is something associated with that aspect of the upgrade.

-Ed





2 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 15 Sep 2008, 01:10 PM
Hi Ed,

Will it be convenient for you to open a regular support ticket send us sample runnable project which replicates the described issue? Also step by step explanation for reproducing the problem will be helpful to isolate it easily. We will test the project locally and do our best to provide accurate solution for this issue.


Greetings,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Ed
Top achievements
Rank 1
answered on 17 Sep 2008, 07:47 PM
I found a solutiuon.  It doesn;t explain why it wasn;t working, but it resolves my issue.

I was able to get it working by changing:

<asp:Panel runat="server" ID="SearchParamsPanel" >
    
<radUI:RadMultiPage ID="PatientSearchTabPages" runat="server" 
            
BorderWidth="2px" SelectedIndex="0" >
    
</radUI:RadMultiPage>
</asp:Panel>
<
asp:Panel Style="position: relative; top: 2px;" 
            ID="SearchResultsArea" runat="server">
</asp:Panel>

to:

<asp:Panel runat="server" ID="SearchParamsPanel" >
    
<radUI:RadMultiPage ID="PatientSearchTabPages" runat="server" 
            BorderWidth="2px" SelectedIndex="0"
>
    
</radUI:RadMultiPage
>
    <asp:Panel Style="position: relative; top: 2px;" 
            ID="SearchResultsArea" runat
="server">
    </asp:Panel
>
</asp:Panel>

Considering my settings for my RadAjaxManager tell the PatientSearchTabPages updates to update SearchResultsArea as well as SearchparamsPanel, I still would have expected it to work either way just like it did  with RadControls for ASP.Net, but at least the above change resolved it so I don't need to consider restructuring my UI radically.

-Ed

Tags
Ajax
Asked by
Ed
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Ed
Top achievements
Rank 1
Share this question
or