[CLOSED] Hiding/displaying dynamic panel on Ajax Postback in coolite window control

[Hari_CSC]

Hi

I am creating dynamic controls and placing them within dynamically created panel.
I need to show different panel on Ajax Postback ,triggered by some coolite control (in this case , combo box selected item change).
I am using Coolite 0.8.1

I have enclosed a sample solution for your reference.

Reference to sample solution
--Data File
app_data\DataFile.XML

--User Control - DemouControl.ascx - inherits from class '


DemoWebControl' .

--ASPX page - DynamicGridPAge.aspx

My requirement - I should populate controls within user control depending on item selected in dropdown placed in ASPX page .(in this solution - Combo Box ID -'Type'.

My approach - i am trying to create a collection of panels and then adding them on user control.As per selection made in combo-box, i am making that Panel visible.

Problem - Only default instance gets created , it doesnot render other panels.

Please provide me with the solution or other approach to meet my requirements.

[Vladimir]

Hi,

Can you simplify example? Just your test project has many code and classes and I am not sure how it is related and how it is working


Please note the following things (0.8.2)
- you cannot create controls during AjaxEvent (I mean new controls which were not rendered during initial page load)
- you have to render all controls and show/hide it during AjaxEvent
- use Hidden property instead Visible because Visible completely exclude control from rendering on the server side (change all Visible by Hidden)
- do not change ID of the control (you set ID = "panelbaseActivity" for active panel). Rendered control cannot change own id

[Hari_CSC]

Simplifying my requirement after updating my solution as per the comments provided

- I have to render set of dynamic controls on aspx page, controls rendered varies depending on value selected in combo-box (markup on aspx page).


Because I cannot create new controls on Ajax Postback, what I did was created all possible dynamic controls views and put it in different panel.My panel name is same as combo-box items.

What i Need is , as and when combo-box value is changed.it should make that particular panel visible.

[Vladimir]

Hi,

Just set initially Hidden=true for all views and in the Select ajax event set Hidden=false for required view

[Hari_CSC]

It does not work.

As per my XML , i have set of controls to show for combo-box values ('DEM' and 'SA').

I have placed respective controls in different panle and made Hidden=true initially.

As Ajax postback, on UserControl Init method, I check request("Type_Value") for retrieving value of combo box ad then try to make that particular panle visible.


But, it only displays controls for value -SA as that the default value.

[Vladimir]

Hi,

It should works. For example, create simple test sample, create several panels (which have Hidden=true), create several buttons which will show each panel (set Hidden=false for the panel). Does such sample works for you? If yes then problem in your application. Try to simplify your test sample as much as possible

[geoffrey.mcgill]

The sample project that was attached has been deleted. Any attachment >1MB will be removed.

[Hari_CSC]

I tried creating multiple panels within user controls and then change hidden value as per ajax call, but view didnot change

Enclosed is sample solution.

Please assist.

I am using Coolite 0.8.1

[Vladimir]

Hi,

1. You have misprint. You use 'pnl1' for all panels
2. You have to set Hidden for panels after adding to the Controls collection

Public Partial Class MultipleDynamicPanel
    Inherits System.Web.UI.UserControl
    Private panelCollectionField As List(Of Coolite.Ext.Web.Panel) = New List(Of Coolite.Ext.Web.Panel)
    Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

        Dim pnl1 As New Coolite.Ext.Web.Panel()
        With pnl1
            .ID = "SA"
            .BodyStyle = "padding:2%;"
            .Width = Unit.Pixel(800)
            .Height = Unit.Pixel(600)
            .Hidden = True

        End With

        Dim btn As New Coolite.Ext.Web.Button()
        With btn
            .ID = "btnpanel1"
            .Text = "Button on Panel 1"
        End With
        Dim lbl As New Coolite.Ext.Web.Label()
        With lbl
            .ID = "lblPnl1"
            .Text = "Lable on Panel 1"
        End With
        pnl1.BodyControls.Add(lbl)
        pnl1.BodyControls.Add(btn)
        panelCollectionField.Add(pnl1)

        '-----------------------------------------------------------------------
        '--------------------------------2ND PANEL------------------------------
        '-----------------------------------------------------------------------
        Dim pnl2 As New Coolite.Ext.Web.Panel()
        With pnl2
            .ID = "DEM"
            .BodyStyle = "padding:2%;"
            .Width = Unit.Pixel(800)
            .Height = Unit.Pixel(600)
            .Hidden = True
        End With

        Dim btn1 As New Coolite.Ext.Web.Button()
        With btn1
            .ID = "btnpanel2"
            .Text = "Button on Panel 2"
        End With
        Dim lbl1 As New Coolite.Ext.Web.Label()
        With lbl1
            .ID = "lblPnl2"
            .Text = "Lable on Panel 2"
        End With
        pnl2.BodyControls.Add(lbl1)
        pnl2.BodyControls.Add(btn1)
        panelCollectionField.Add(pnl2)
        '-----------------------------------------------------------------------
        '--------------------------------3RD PANEL------------------------------
        '-----------------------------------------------------------------------
        Dim pnl3 As New Coolite.Ext.Web.Panel()
        With pnl3
            .ID = "AZ"
            .BodyStyle = "padding:2%;"
            .Width = Unit.Pixel(800)
            .Height = Unit.Pixel(600)
            .Hidden = True
        End With

        Dim btn2 As New Coolite.Ext.Web.Button()
        With btn1
            .ID = "btnpanel3"
            .Text = "Button on Panel 3"
        End With
        Dim lbl2 As New Coolite.Ext.Web.Label()
        With lbl1
            .ID = "lblPnl3"
            .Text = "Lable on Panel 3"
        End With
        pnl3.BodyControls.Add(lbl2)
        pnl3.BodyControls.Add(btn2)
        panelCollectionField.Add(pnl3)
        For Each pnl As Coolite.Ext.Web.Panel In panelCollectionField
            Me.Controls.Add(pnl)
            pnl.Hidden = True
        Next
        
        Dim pnltoDisplay As New Coolite.Ext.Web.Panel()
        If ((Request("Type_Value") IsNot Nothing) AndAlso (Request("Type_Value").Trim().Length > 0)) Then
            pnltoDisplay = getPanletoDisplay(Request("Type_Value"))
            pnltoDisplay.Hidden = False
        End If


    End Sub

    Private Function getPanletoDisplay(ByVal pnlName As String) As Coolite.Ext.Web.Panel
        For Each pnl As Coolite.Ext.Web.Panel In panelCollectionField
            If (pnl.ID.Trim().ToLower().Equals(pnlName.Trim().ToLower())) Then
                Return pnl
            End If
        Next
        Return New Coolite.Ext.Web.Panel()
    End Function

End Class

[Hari_CSC]

Different dynamic panel doesnot shows up after iterating once .

Enclosed is updated sample solution for your reference.

On my Aspx code behind , i create data for Combo-box -

Value and Name pair for first 3 entries are -


"DEM", "Demerot"


"SA", "Midnight Sun"


"AZ", "The Grand Canyon State"
In my ascx code behind ,on init , i create 3 different panels with ID ="DEM","SA" and "AZ"

On change of combo-box value, respective panels shows up. But, after Iterating through any of given combo-box value, panel in tab doesnot show up properly.



I am using Coolite 0.8.2.983