Help with adding dynamic controls with data on click direct event

[josh1zn]

Hi,

I am going to try my best to describe the problem so that it can be recreated.

ok so basically i have a class that has 4 functions and takes in 3 properties: 1- PageSize, 2- DataSource (a list of Problems: Problem class), 3- a direct event handler which is used by the 1 button in every panel that gets created. there's a 4Th property RowCount which returns DataSource.count

The first function creates a panel to display solutions.
The second creates a panel that display 1 problem and many solutions to that problem using the first function in a panel.(Card Item)
The third creates a panel with accordion layout which will hold all panels created by second method.(Cards)
The fourth uses the second and third method to create and return a list of panels that has number of panels in them(List of cards)

in these 'cards' i have all panels repeated to the amount of rows of data we have, and all data are displayed in controls.

i have attached the class below.

ok so on the main page i have a panel to which these are going to be displayed in card layout, but only when the button is clicked.
i managed to get this to display when the button is clicked, but when i click 'next' button to change active index it does not show next item i noticed that active index is always 0, maybe the panel.render method is doing this?

another problem i have is when i create the controls in the click event and if i click a button that was created dynamically it says it cannot be found, so i also added the code to create the controls in the pageload event, but only when text has been entered in the textbox. This works when i click the dynamically created button but this brings another problem, when i click any other button it causes the controls to be created.

i really need help on whats the best way to add the controls dynamically when the button is clicked, is direct events the correct way?
also i dont know why the panel with card layout always have active index to 0 even though the panels items count is > 0. i used the same way that i have on onather panel and it works, only that panel is created on page_init and not on a click direct event

Please help this is a project on my 3rd year of study IT and its due in a 2 weeks:(
Project code can be found at https://code.google.com/p/dutcrm/

Thanks

MARKUP CODE

 <%--EMAIL Support Agent--%>
    <ext:Panel ID="pnlEmailSupport" runat="server" MinHeight="615" Title="Home" TitleAlign="Center"
        Enabled="False" Visible="False">
        <LayoutConfig>
            <ext:ColumnLayoutConfig ManageOverflow="1" />
        </LayoutConfig>
        <Items>
            <%--LEFT PANEL--%>
            <ext:Panel runat="server" ID="pnlLeft" ColumnWidth="0.5" Title="Email Problems" MinHeight="590"
                ActiveIndex="0">
                <LayoutConfig>
                    <ext:CardLayoutConfig DeferredRender="True" />
                </LayoutConfig>
                <%--STATUS BAR--%>
                <BottomBar>
                    <ext:StatusBar ID="sbLeft" runat="server" Padding="5">
                        <Items>
                            <ext:Label runat="server" ID="lblPage" />
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" />
                            <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                            <ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" />
                            <ext:Label runat="server" ID="lblTotal" />
                            <ext:Button runat="server" ID="btnPrev" Text="<b>Prev</b>">
                                <DirectEvents>
                                    <Click OnEvent="BtnPrevClick">
                                        <ExtraParams>
                                            <ext:Parameter Name="index" Value="#{pnlLeft}.items.indexOf(#{pnlLeft}.layout.activeItem)"
                                                Mode="Raw" />
                                        </ExtraParams>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                            <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
                            <ext:Button runat="server" ID="btnNext" Text="<b>Next</b>">
                                <DirectEvents>
                                    <Click OnEvent="BtnNextClick">
                                        <ExtraParams>
                                            <ext:Parameter Name="index" Value="#{pnlLeft}.items.indexOf(#{pnlLeft}.layout.activeItem)"
                                                Mode="Raw" />
                                        </ExtraParams>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:StatusBar>
                </BottomBar>
            </ext:Panel>
            <%--RIGHT PANEL--%>
            <ext:Panel ID="pnlRight2" runat="server" Border="false" ColumnWidth="0.5" MinHeight="590">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <%--TOP RIGHT PANEL--%>
                    <ext:Panel runat="server" ID="pnlTopRight2" Title="Create Ticket" Icon="TagBlueAdd"
                        Height="250" BodyPadding="10">
                        <Items>
                            <ext:FormPanel runat="server" ID="FormPanel2" Border="false" Padding="5">
                                <Items>
                                    <ext:TextField runat="server" ID="txtClientId2" InputType="Hidden" />
                                    <ext:TextField runat="server" ID="txtEmployeeId2" InputType="Hidden" />
                                    <ext:TextField runat="server" ID="txtClientName2" FieldLabel="Client Name" AnchorHorizontal="70%" />
                                    <ext:TextField runat="server" ID="txtEmployeeName2" FieldLabel="Employee Name" AnchorHorizontal="70%" />
                                    <ext:TextField runat="server" ID="txtProblemId2" FieldLabel="Problem ID" AnchorHorizontal="70%" />
                                    <ext:TextField runat="server" ID="txtSolutionId2" FieldLabel="Solution ID" AnchorHorizontal="70%" />
                                    <ext:ComboBox runat="server" ID="cmbPriority2" FieldLabel="Priority" AnchorHorizontal="40%" />
                                </Items>
                                <Buttons>
                                    <ext:Button runat="server" ID="btnCreateTicket2" Text="Create Ticket" Padding="5"
                                        Margins="0 5 0 0" Icon="Disk">
                                    </ext:Button>
                                </Buttons>
                            </ext:FormPanel>
                        </Items>
                    </ext:Panel>
                    <%--BOTTOM RIGHT PANEL--%>
                    <ext:Panel runat="server" ID="pnlBottomRight2" Title="Search For Solution" MinHeight="340"
                        Icon="BookMagnify" Border="false">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel runat="server" ID="pnlSearch2" Height="50">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Middle" />
                                </LayoutConfig>
                                <Items>
                                    <ext:TextField runat="server" ID="txtProblemSearch2" Width="450" FieldLabel="Description"
                                        Margins="0 0 0 15" />
                                    <ext:Button runat="server" ID="btnProbSearch2" Text="Search" Icon="Magnifier" OnDirectClick="BtnProbSearch2Click"
                                        Margins="0 0 0 10" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" ID="pnlProblemSolution2" ActiveIndex="1" MinHeight="507">
                                <LayoutConfig>
                                    <ext:CardLayoutConfig  DeferredRender="True"/>
                                </LayoutConfig>
                                <%--STATUS BAR--%>
                                <BottomBar>
                                    <ext:StatusBar ID="sbRight" runat="server" Padding="5">
                                        <Items>
                                            <ext:Label runat="server" ID="lblPage2" />
                                            <ext:ToolbarSpacer runat="server" />
                                            <ext:ToolbarSeparator runat="server" />
                                            <ext:ToolbarSpacer runat="server" />
                                            <ext:Label runat="server" ID="lblTotal2" />
                                            <ext:Button runat="server" ID="btnPrev2" Text="<b>Prev</b>">
                                                <DirectEvents>
                                                    <Click OnEvent="BtnPrev2Click">
                                                        <ExtraParams>
                                                            <ext:Parameter Name="index2" Value="#{pnlProblemSolution2}.items.indexOf(#{pnlProblemSolution2}.layout.activeItem)"
                                                                Mode="Raw" />
                                                        </ExtraParams>
                                                    </Click>
                                                </DirectEvents>
                                            </ext:Button>
                                            <ext:ToolbarSeparator ID="ToolbarSeparator4" runat="server" />
                                            <ext:Button runat="server" ID="btnNext2" Text="<b>Next</b>">
                                                <DirectEvents>
                                                    <Click OnEvent="BtnNext2Click">
                                                        <ExtraParams>
                                                            <ext:Parameter Name="index2" Value="#{pnlProblemSolution2}.items.indexOf(#{pnlProblemSolution2}.layout.activeItem)"
                                                                Mode="Raw" />
                                                        </ExtraParams>
                                                    </Click>
                                                </DirectEvents>
                                            </ext:Button>
                                        </Items>
                                    </ext:StatusBar>
                                </BottomBar>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>

CODE BEHIND

#region Right Panel

        protected void BtnProbSearch2Click(object sender, DirectEventArgs e)
        {
            try
            {
                if (txtProblemSearch2.Text != string.Empty)
                {
                    //create status variables for email problems
                    int totalProblems;
                    var cards = new ProblemSolutionGui
                    {
                        PageSize = 3,
                        DataSource = new ProblemBl().GetProblems(txtProblemSearch2.Text),
                        BtnAcceptClick = BtnAcceptClick
                    }.CreateListOfCardPanels(out totalProblems, out _totalPagesForProbSol);
                    pnlProblemSolution2.Items.Add(cards);
                    sbRight.DefaultText = "<b>Total Problems: " + totalProblems + "</b>";
                    lblPage2.Html = "<b>Page " + 1 + " of " + _totalPagesForProbSol + "</b>";
                    pnlProblemSolution2.Render();
                }
            }
            catch (Exception ex)
            {
                ExtNet.Msg.Alert("Error", ex.Message).Show();
            }
        }

        private static void BtnAcceptClick(object sender, DirectEventArgs directEventArgs)
        {
            throw new NotImplementedException();
        }

        protected void BtnNext2Click(object sender, DirectEventArgs e)
        {
            try
            {
                var index = int.Parse(e.ExtraParams["index2"]);

                if ((index + 1) < pnlProblemSolution2.Items.Count)
                {
                    pnlProblemSolution2.ActiveIndex = index + 1;
                }
                //show current page
                lblPage2.Html = "<b>Page " + (pnlProblemSolution2.ActiveIndex + 1) + " of " + _totalPagesForProbSol + "</b>";

                CheckButtons2();
            }
            catch (Exception ex)
            {
                ExtNet.Msg.Alert("Error", ex.Message).Show();
            }
        }

        protected void BtnPrev2Click(object sender, DirectEventArgs e)
        {
            try
            {
                var index = int.Parse(e.ExtraParams["index2"]);

                if ((index - 1) >= 0)
                {
                    pnlProblemSolution2.ActiveIndex = index - 1;
                }
                //show current page
                lblPage2.Html = "<b>Page " + (pnlProblemSolution2.ActiveIndex + 1) + " of " + _totalPagesForProbSol + "</b>";

                CheckButtons2();
            }
            catch (Exception ex)
            {
                ExtNet.Msg.Alert("Error", ex.Message).Show();
            }
        }

        private void CheckButtons2()
        {
            try
            {
                var index = pnlProblemSolution2.ActiveIndex;

                btnNext2.Disabled = index == (pnlProblemSolution2.Items.Count - 1);
                btnPrev2.Disabled = index == 0;
            }
            catch (Exception ex)
            {
                ExtNet.Msg.Alert("Error", ex.Message).Show();
            }
        }
        #endregion

[Vladimir]

Try to replace

pnlProblemSolution2.Render();

by this code

cards.Render(pnlProblemSolution2.ClientID, RenderMode.AddTo)

[Vladimir]

another problem i have is when i create the controls in the click event and if i click a button that was created dynamically it says it cannot be found,

ASP.NET requires recreating dynamic controls on each request
Ypu can use direct methods instead direct events. In this case, recreating is not required

[josh1zn]

ASP.NET requires recreating dynamic controls on each request
Ypu can use direct methods instead direct events. In this case, recreating is not required

Hi Vladimir,

Thank you for your help, i will try what you have suggested and report back if it helped:)

also if i use the card.render(pnlprobsol, rendermode) must i remove the other render methods in the code behind?

Edit: please see pics i have uploaded just now which has a layout problem, thanks

[josh1zn]

Try to replace

pnlProblemSolution2.Render();

by this code

cards.Render(pnlProblemSolution2.ClientID, RenderMode.AddTo)

Hi,

i have used a direct method to create the controls but as soon as i click the button that was created i get control not found error.
i debugged and i noticed the pnlProblemSolution2 items count becomes 0 when i click any button.

i also replaced the

pnlProblemSolution2.Render();

with

foreach (var panel in cards)
                    {
                        panel.Render(pnlProblemSolution2.ClientID, RenderMode.AddTo);
                    }

Please help:(

[josh1zn]

ASP.NET requires recreating dynamic controls on each request
Ypu can use direct methods instead direct events. In this case, recreating is not required

i found that when i use the card.render(pnlProbSol.clientid, rendermode.addto) the panels show BUT when i check the panels items it says 0, howcome?
where does the addto put the panels in? and how can i access the count of how many panels i add after using this?

[josh1zn]

ok after working on it i managed to get it displaying except i get an error saying control cannot be found when i try to click a dynamically created button
here's the code i'm using now

#region Right Panel

        [DirectMethod]
        public void ShowSolutions()
        {
            try
            {
                if (txtProblemSearch2.Text != string.Empty)
                {
                    //variable to show total number of problems found
                    int totalProblems;
                    var cards = new ProblemSolutionGui
                    {
                        PageSize = 1,
                        DataSource = new ProblemBl().GetProblems(txtProblemSearch2.Text),
                        BtnAcceptClick = BtnAcceptClick
                    }.CreateListOfCardPanels(out totalProblems, out _totalPagesForProbSol);
                    sbRight.DefaultText = "<b>Total Problems Found: " + totalProblems + "</b>";
                    lblPage2.Html = "<b>Page " + 1 + " of " + _totalPagesForProbSol + "</b>";
                    foreach (var panel in cards)
                    {
                        panel.Render(pnlProblemSolution2.ClientID, RenderMode.AddTo);
                    }
                    CheckButtons2();
                }
            }
            catch (Exception ex)
            {
                ExtNet.Msg.Alert("Error", ex.Message).Show();
            }
        }

        private static void BtnAcceptClick(object sender, DirectEventArgs directEventArgs)
        {
            ExtNet.Msg.Notify(
                "Probid: " + directEventArgs.ExtraParams["PROB_ID"].ToString(CultureInfo.InvariantCulture), "Solutionid: " +
                directEventArgs.ExtraParams["SOL_ID"].ToString(CultureInfo.InvariantCulture));
        }

        protected void BtnNext2Click(object sender, DirectEventArgs e)
        {
            try
            {
                Navigate(false);
            }
            catch (Exception ex)
            {
                ExtNet.Msg.Alert("Error", ex.Message).Show();
            }
        }

        protected void BtnPrev2Click(object sender, DirectEventArgs e)
        {
            try
            {
                Navigate(true);
            }
            catch (Exception ex)
            {
                ExtNet.Msg.Alert("Error", ex.Message).Show();
            }
        }

        private void CheckButtons2()
        {
            try
            {
                var index = pnlProblemSolution2.ActiveIndex;

                btnNext2.Disabled = index == (_totalPagesForProbSol - 1);
                btnPrev2.Disabled = index == 0;
            }
            catch (Exception ex)
            {
                ExtNet.Msg.Alert("Error", ex.Message).Show();
            }
        }

        private void Navigate(bool previousClicked)
        {
            int index;
            if (previousClicked)
            {
                //store index to previous page
                index = Convert.ToInt32(hIndex.Text) - 1;
            }
            else
            {
                //store index to next page
                index = Convert.ToInt32(hIndex.Text) + 1;
            }

            //set hidden field text to index
            hIndex.Text = index.ToString(CultureInfo.InvariantCulture);

            //set panel index
            pnlProblemSolution2.ActiveIndex = index;

            //show current page number of total pages
            lblPage2.Html = "<b>Page " + (index + 1) + " of " + _totalPagesForProbSol + "</b>";

            //disable or enable buttons accordingly
            CheckButtons2();
        }
        #endregion

screen shot


I'm sure it will be possible to recreate this error,
have a button and when clicked must dynamically add another button to a panel through a direct method and when the new button is clicked
a direct event must run and notify a message.

Thanks a lot for the help.
Josh

[Vladimir]

As I said before, dynamic controls must be recreated, it is ASP.NET requirement
You can find many articles about dynamic controls in ASP.NET

i have used a direct method to create the controls but as soon as i click the button that was created i get control not found error.

I meant to use direct method instead direct event for dynamic controls (not for creating). For example, use direct method for that dynamic button

[josh1zn]

As I said before, dynamic controls must be recreated, it is ASP.NET requirement
You can find many articles about dynamic controls in ASP.NET


I meant to use direct method instead direct event for dynamic controls (not for creating). For example, use direct method for that dynamic button

ok so i will need to create the controls under the button event and pageload event so that it gets recreated whenever any button is clicked?

ok i understand now i will do that, but i have a problem, when i used the direct event i passed in data through using extraparameters from the panel item(solution data) where that button was.


EDIT:
i have used a direct method for the dynamic buttons and it registers the methods but when the search returns allot of results it runs very slow,
could you provide me with information on how card layout works with regards to performance?

if there is an alternate way to display the data like this can you please point me in the right direction

and also is it possible to have extraparameters passed in with a direct method? Or how can i pass in parameters to the direct method maybe i need

once again thanks for your help much appreciated
Josh