[CLOSED] How to View and Get Dynamically loaded user controls

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] How to View and Get Dynamically loaded user controls

    Hi all,

    We are working on the following requirement,
    In a user control we have a gridpanel. In a page we are loading that user control many times and assigning data to each user control's store.
    Here my issues are
    1. with the following code we are unable to view the gridpanels
    2. How to get/find dynamically created gridpanels from code behind?
    3. How can we find the selected rows from each gridpanel ?

    Here is the sample code to reproduce the issue,

    Aspx code
    ========
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicUserControls.aspx.cs"
        Inherits="DynamicUserControls" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="GridUserControl.ascx" TagPrefix="ucg" TagName="ucGrid" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
    
    
            }
            protected void btnLoad_Click(object sender, DirectEventArgs e)
            {
                BindControls();
                panelExceptions.Show();
            }
            private void BindControls()
            {
                int Index = 4;
                for (int i = 1; i <= Index; i++)
                {
                    Ext.Net.Panel p1 = new Ext.Net.Panel();
                    p1.ID = "pnl" + i;
                    GridUserControl ucGrid = (GridUserControl)this.Page.LoadControl("GridUserControl.ascx");
                    ucGrid.ID = "G" + i;
                    ucGrid.AssignTitle("G" + i);
                    p1.ContentContainer.Controls.Add(ucGrid);
                    panelExceptions.Items.Add(p1);                
                }
            }
            protected void btnGet_Click(object sender, DirectEventArgs e)
            {
                findControls(this.Controls);
            }
            private void findControls(System.Web.UI.ControlCollection ctrl)
            {
                foreach (Control ct in ctrl)
                {
                    if (ct is GridUserControl)
                    {
                        //SectionControls.Add(ctrl);
                    }
                    if (ct.Controls.Count > 0)
                    {
                        findControls(ct.Controls);
                    }
                }
            }
        </script>
    
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Panel ID="panelExceptions" runat="server" Width="385" Height="700" AutoScroll="true"
                Hidden="true">
            </ext:Panel>
            <ext:Button ID="btnLoad" runat="server" Text="Load Grids">
                <DirectEvents>
                    <Click OnEvent="btnLoad_Click">
                    </Click>
                </DirectEvents>
            </ext:Button>
            <br />
            <br />
            <ext:Button ID="btnGet" runat="server" Text="Get Grid Data">
                <DirectEvents>
                    <Click OnEvent="btnGet_Click">
                    </Click>
                </DirectEvents>
            </ext:Button>
        </div>
        </form>
    </body>
    </html>
    UserControl Source Code
    ================
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="GridUserControl.ascx.cs"
        Inherits="GridUserControl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:Store ID="StoreHazardsGrid" runat="server" meta:resourcekey="StoreHazardsGridResource1">
        <Model>
            <ext:Model ID="mdlStoreHazardsGrid" runat="server" IDProperty="HazardID">
                <Fields>
                    <ext:ModelField Name="Id" Type="Int">
                    </ext:ModelField>
                    <ext:ModelField Name="Name" Type="String">
                    </ext:ModelField>
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    <ext:GridPanel ID="HazardsGridControl" runat="server" Title="Hazards List" Border="true"
        AutoScroll="true" meta:resourcekey="HazardsGridControlResource2" StoreID="StoreHazardsGrid"
        ButtonAlign="Left" Layout="FitLayout" Height="300px" Width="400px">
        <ColumnModel>
            <Columns>
                <ext:Column ID="Column2" runat="server" DataIndex="Name" Text="Name" Flex="1">
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    UserControl CodeBehind code
    ===================
    protected void Page_Load(object sender, EventArgs e)
        {
    
    
        }
        public void AssignTitle(string step)
        {
            HazardsGridControl.Title = step;
            StoreHazardsGrid.DataSource = this.Data;
            StoreHazardsGrid.DataBind();
        }
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { 10,"3m Co" },
                    new object[] { 20,"Alcoa Inc"},
                    new object[] { 30,"Altria Group Inc"}               
                };
            }
        }
    Please contact if you need more explanation

    Thank you
    Mohan
    Last edited by Daniil; Dec 24, 2013 at 8:29 AM. Reason: [CLOSED]
  2. #2
    Hi mohan,

    Quote Originally Posted by mohan.bizbites View Post
    1. with the following code we are unable to view the gridpanels
    During a DirectEvent, it is not enough just to put a control into Items or Control collection. You should use UpdateContent or Render methods.

    In your case you should call the UpdateContent method on the panelExceptions.

    Also it is better to set up:
    p1.Layout = "fit";
    and move the Store into the GridPanel's Store.

    In this case, a GridPanel will be rendered as a Panel's item and it will participate in layout logic. Also it will be destroyed when needed. In other case you will have to do it yourself and it is difficult.

    BindControls
    private void BindControls()
    {
        int Index = 4;
        for (int i = 1; i <= Index; i++)
        {
            Ext.Net.Panel p1 = new Ext.Net.Panel();
            p1.Layout = "fit";
            p1.ID = "pnl" + i;
            GridUserControl ucGrid = (GridUserControl)this.Page.LoadControl("GridUserControl.ascx");
            ucGrid.ID = "G" + i;
                    
            p1.ContentControls.Add(ucGrid);
            ucGrid.AssignTitle("G" + i);
            panelExceptions.Items.Add(p1);
        }
    
        panelExceptions.UpdateContent();
    }
    Quote Originally Posted by mohan.bizbites View Post
    2. How to get/find dynamically created gridpanels from code behind?
    A control created and rendered during one request (DirectEvent) is not recreated automatically. ASP.NET is a stateless system. So, if you need to access those controls, the only way is to recreate them during each request (DirectEvent). Personally, I would avoid recreating during each request.

    Quote Originally Posted by mohan.bizbites View Post
    3. How can we find the selected rows from each gridpanel ?
    I would grab it on client side and send it to server as a DirectEvent's extra parameter.

    Though, another way is setting up:
    <SelectionModel>
        <ext:RowSelectionModel runat="server" ID="RowSelectionModel1" />
    </SelectionModel>
    for the GridPanel and getting it in a DirectEvent this way:
    int index = X.GetCmp<RowSelectionModel>("G1_RowSelectionModel1").SelectedRows[0].RowIndex;
    But please note, that a SelectedRows collection contains only RowIndex and RecordID (if a Model's IDProperty is used).
  3. #3
    Hi Daniil,
    Thank you for reply,
    We are loading user control more than one time and also recreating controls in page load on each request. But we are getting error as Gridpanel's storeId is undefined
    Error : App.G1_StoreHazardsGrid is undefined
  4. #4
    Hello!

    Did you try to put the Store inside of GridPanel as suggested by Daniil?
  5. #5
    Sorry, could you provide a full sample to reproduce and your scenario?
  6. #6
    Quote Originally Posted by Baidaly View Post
    Sorry, could you provide a full sample to reproduce and your scenario?
    Hi,
    Here i am Providing full sample,my Intention was loading UserConrols dynamically.Here i used Master,Child pages.
    Procedure :
    When click on btnLoadChildPage button in MainPage.aspx loading subpage.aspx in Tabpanel. When Click on TreepanelNode in SubPage displaying panelAddSetup panel. when click on btnGenerateControls button in Subpage the dynamic controls are loading but not visible.

    problem:
    Dynamically created controls are not visible and getting error as app.G1_Store1 is undefined

    MainPage.aspx
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="EXT2._2.MainPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
      protected void Page_Load(object sender, EventArgs e)
            {
                
            }
            protected void btnLoadChildPage_Click(object sender, DirectEventArgs e)
            {
                Viewport1.AddScript("addTab(#{tabpanelMain},'idSub12' ,'View', 'SubPage.aspx', 'Sub page');");
            }
    </script>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <script type="text/javascript">
            var addTab = function (tabPanel, id, name, url1, menuItem) {
                var tab = tabPanel.getComponent(id);
                if (!tab) {
                    // alert("true called");
                    tab = tabPanel.add({
                        id: id,
                        title: name,
                        closable: true,
                        menuItem: menuItem,
                        loader: {
                            url: url1,
                            renderer: "frame",
                            loadMask: {
                                showMask: true,
                                msg: "Loading " + name + "..."
                            }
                        }
                    });
                    tabPanel.setActiveTab(tab);
                }
                else {
                    tab.loader.url = url1;
                    tab.reload();
                    tabPanel.setActiveTab(tab);
                }
            }
        </script>
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True">
            <Items>
                <ext:TabPanel ID="tabpanelMain" runat="server" Region="Center" Title="" meta:resourcekey="tabPanelHIRAResource1">
                    <Items>
                        <ext:Panel ID="PnlSUb1" runat="server" Title="Summary" meta:resourcekey="tpMyHIRAResource1">
                            <Items>
                                <ext:Label ID="lbl" runat="server"  Text="Welcome to Main Page"></ext:Label>
                                
                                <ext:Button ID="btnLoadChildPage" runat="server" Text="Load Child Page">
                                    <DirectEvents>
                                        <Click OnEvent="btnLoadChildPage_Click"></Click>
                                    </DirectEvents>
                                </ext:Button>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </asp:Content>

    SubPage.aspx
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="SubPage.aspx.cs" Inherits="EXT2._2.SubPage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="~/GridCtrl.ascx" TagName="ucGridCtrl" TagPrefix="ucb" %>
    
    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
            {
                Ext.Net.Panel p1 = new Ext.Net.Panel();
                p1.ID = "pnl1";
                for (int i = 1; i <= 2; i++)
                {
                    GridCtrl ucGrid = (GridCtrl)this.Page.LoadControl("GridCtrl.ascx");
                    ucGrid.ID = "G" + i;
                    ucGrid.AssignTitle("G" + i);
                    p1.ContentContainer.Controls.Add(ucGrid);     
                }
                panelExceptions.Items.Add(p1);        
            }
       
            protected void btnGenerateControls_Click(object sender, DirectEventArgs e)
            {
                panelAddStep.Hide(); 
                panelExceptions.Show();
            }
    
            protected void TreePanelHazardIdentification_NodeSelect(object sender, DirectEventArgs e)
            {
                pnlRiskAssessmentTreeDetails.Show();
                pnlRiskAssessmentTreeDetails.Collapsed = false;
                panelAddStep.Show();
                panelExceptions.Hide();
    
            }
    </script>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
         <ext:Viewport ID="RDRAViewPort" runat="server" Layout="BorderLayout" IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True">
            <Items>
                <ext:FormPanel ID="RDRAPanels" runat="server" Region="Center" Enabled="false" Header="false" AutoScroll="true" Border="true" BodyPadding="5"
                    ButtonAlign="Left" Width="400" Title="" Layout="FormLayout" meta:resourcekey="RDRAPanelsResource1">
                    <Items>
                     <ext:FieldSet DisabledCls="ControlDisabled" ID="fieldRisk" runat="server" Title="<h3>Risk Assessment</h3>" Collapsible="true" Layout="AutoLayout"
                            meta:resourcekey="fieldRiskResource1">
                            <Items>
                                <ext:Container ID="LevelContainer" runat="server" Width="500">
                                    <Items>
                                        <ext:Label ID="LabelTitle" runat="server" Text="HITRA Level" MarginSpec="0 0 0 10" Width="70" meta:resourcekey="LabelTitleResource1"></ext:Label>
                                        <ext:RadioGroup LabelSeparator="" ID="HIRARadioHIRALevel2" runat="server" ColumnsWidths="100,100" MarginSpec="0 0 0 10" Layout="ColumnLayout">
                                            <Items>
                                                <ext:Radio ID="radioLevel1" runat="server" BoxLabel="Level 1" InputValue="1" Width="70" meta:resourcekey="radioLevel1Resource1">
                                                </ext:Radio>
                                                <ext:Radio ID="radioLevel2" runat="server" BoxLabel="Level 2" InputValue="2" meta:resourcekey="radioLevel2Resource1">
                                                </ext:Radio>
                                            </Items>
                                        </ext:RadioGroup>
                                    </Items>
                                </ext:Container>
                            </Items>
                            <Items>
                                <ext:TreePanel ID="TreePanelHazardIdentification" MinHeight="550" Layout="AutoLayout" MultiSelect="false" runat="server" RootVisible="false"
                                    MarginSpec="0 0 10 10" UseArrows="false" Lines="true" EnableTheming="true" AutoScroll="true" MinWidth="800"
                                    RenderXType="True" IDMode="Explicit" Namespace="App" IsDynamic="False" meta:resourcekey="TreePanelHazardIdentificationResource1">
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar2" runat="server" RenderXType="True" IDMode="Explicit" Namespace="App" IsDynamic="False">
                                            <Items>
                                               <ext:Button ID="btnGenerateControls" runat="server" Text="Generate Controls" Icon="CartAdd">
              <DirectEvents>
              <Click OnEvent="btnGenerateControls_Click"></Click>
              </DirectEvents>
              </ext:Button>
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                    <Root>
                                        <ext:Node>
                                            <Children>
                                                <ext:Node Text="Location" NodeID="2" Leaf="true">
                                                </ext:Node>
                                                <ext:Node Text="Equipment" NodeID="1" Leaf="true">
                                                </ext:Node>
                                                <ext:Node Text="Activity" NodeID="3" Leaf="true">
                                                </ext:Node>
                                            </Children>
                                        </ext:Node>
                                    </Root>
                                    <DirectEvents>
                                        <Select OnEvent="TreePanelHazardIdentification_NodeSelect">
                                            <EventMask ShowMask="true" />
                                        </Select>
                                    </DirectEvents>
                                    <SelectionModel>
                                        <ext:TreeSelectionModel ID="tsmHazards" runat="server" Mode="Single" IDMode="Explicit" Namespace="App" IsDynamic="False" />
                                    </SelectionModel>
                                </ext:TreePanel>
                            </Items>
                        </ext:FieldSet>
                    </Items>
                    </ext:FormPanel>
                 
                  <ext:FormPanel ID="pnlRiskAssessmentTreeDetails" runat="server" Region="East" Width="395" Header="false" Border="false" Collapsed="true"
                    Title="Details" Split="true" MinWidth="300" MaxWidth="450" AutoScroll="true" Collapsible="true" CollapseMode="Default">
                    <Items>
                       
                        
                        <ext:Panel ID="panelAddStep" runat="server" Width="385" AutoScroll="True" Hidden="true" Layout="AutoLayout"
                            IDMode="Explicit" IsDynamic="False" meta:resourcekey="windowAddStepResource1" Namespace="App" RenderXType="True">
                            <Content>
                                <ext:TextField DisabledCls="ControlDisabled" ID="txtStepDescription" Width="280px" MarginSpec="10 0 0 10" LabelAlign="Top" runat="server"
                                    FieldLabel="Step Description" IDMode="Explicit" IsDynamic="False" meta:resourcekey="txtStepDescriptionResource1"
                                    Namespace="App" RenderXType="True">
                                </ext:TextField>
                                <ext:TextField DisabledCls="ControlDisabled" ID="txtPosition" Width="280px" MarginSpec="10 0 0 10" LabelAlign="Top" runat="server"
                                    FieldLabel="Position" IDMode="Explicit" IsDynamic="False" meta:resourcekey="txtPositionResource1" Namespace="App"
                                    RenderXType="True">
                                </ext:TextField>
                                <ext:Label DisabledCls="ControlDisabled" ID="lblStepValidation" runat="server" Hidden="True" StyleSpec="color: Red"
                                    IDMode="Explicit" IsDynamic="False" meta:resourcekey="lblStepValidationResource1" Namespace="App" RenderXType="True" />
                               
                            </Content>
                        </ext:Panel>
                       
                        <ext:Panel ID="panelExceptions" runat="server" Width="385" Layout="AutoLayout" Height="700" AutoScroll="true" ButtonAlign="Left">
                           
                        </ext:Panel>
                       
                    </Items>
                </ext:FormPanel>
                    </Items>
                    </ext:Viewport>
    </asp:Content>

    GridCrrl UserControl
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GridCtrl.ascx.cs" Inherits="EXT2._2.GridCtrl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
     protected void Page_Load(object sender, EventArgs e)
            {
               
            }
    
            public Ext.Net.GridPanel HazardsGridPanel
            {
                get { return this.HazardsGridControl; }
            }
           
    
            public List<Company> SelectedCompanies
            {
                get
                {
                    List<Company> result = new List<Company>();
    
                    if (!String.IsNullOrEmpty(hdnSelectedCompanies.Text))
                    {
                        result = JSON.Deserialize<List<Company>>(hdnSelectedCompanies.Text);
                    }
                    return result;
                }
                set
                {
                    hdnSelectedCompanies.Text = Ext.Net.JSON.Serialize(value);
                }
            }
            public void AssignTitle(string step)
            {
                HazardsGridControl.Title = step;
                var x = HazardsGridControl.GetStore();
                x.DataSource = this.Data();
                x.DataBind();
            }
            private List<Company> Data()
            {
                List<Company> lstCompanies = new List<Company>();
                Company c3 = new Company();
                c3.Id = 10;
                c3.Name = "3m Co";
                Company c4 = new Company();
                c4.Id = 20;
                c4.Name = "Alcoa Inc";
                lstCompanies.Add(c3);
                lstCompanies.Add(c4);
                return lstCompanies;
            }
    </script>
    <ext:GridPanel ID="HazardsGridControl" runat="server" Title="Hazards List" Border="true" AutoScroll="true"
        meta:resourcekey="HazardsGridControlResource2" ButtonAlign="Left" Layout="FitLayout" Height="300px" Width="400px">
        <Store>
            <ext:Store ID="Store1" runat="server" meta:resourcekey="StoreHazardsGridResource1">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="Id" Type="Int"></ext:ModelField>
                            <ext:ModelField Name="Name" Type="String"></ext:ModelField>
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column ID="Column2" runat="server" DataIndex="Name" Text="Name" Flex="1"></ext:Column>
            </Columns>
        </ColumnModel>   
         <SelectionModel >
                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" CheckOnly="true"></ext:CheckboxSelectionModel>
                </SelectionModel>
                  <Listeners>
                    <SelectionChange Handler="                    
                        #{hdnSelectedCompanies}.setValue(Ext.encode(this.getRowsValues({selectedOnly:true})))" />
                </Listeners>
            </ext:GridPanel>
            
            <ext:Hidden ID="hdnSelectedCompanies" runat="server"></ext:Hidden>

    Please Contact if you need more information.

    Thank You,
    Mohan
  7. #7
    I couldn't reproduce your issue using the code below, which is based on your example but modified to make it runnable. Could you try it?

    Default.aspx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void btnLoadChildPage_Click(object sender, DirectEventArgs e)
        {
            Viewport1.AddScript("addTab(#{tabpanelMain},'idSub12' ,'View', 'SubPage.aspx', 'Sub page');");
        }
    </script>
    
    <!DOCTYPE html>
        
    <html>
    <head runat="server">
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <script type="text/javascript">
                var addTab = function (tabPanel, id, name, url1, menuItem) {
                    var tab = tabPanel.getComponent(id);
                    if (!tab) {
                        // alert("true called");
                        tab = tabPanel.add({
                            id: id,
                            title: name,
                            closable: true,
                            menuItem: menuItem,
                            loader: {
                                url: url1,
                                renderer: "frame",
                                loadMask: {
                                    showMask: true,
                                    msg: "Loading " + name + "..."
                                }
                            }
                        });
                        tabPanel.setActiveTab(tab);
                    }
                    else {
                        tab.loader.url = url1;
                        tab.reload();
                        tabPanel.setActiveTab(tab);
                    }
                }
        </script>
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True">
            <Items>
                <ext:TabPanel ID="tabpanelMain" runat="server" Region="Center" Title="">
                    <Items>
                        <ext:Panel ID="PnlSUb1" runat="server" Title="Summary" >
                            <Items>
                                <ext:Label ID="lbl" runat="server"  Text="Welcome to Main Page"></ext:Label>
                                 
                                <ext:Button ID="btnLoadChildPage" runat="server" Text="Load Child Page">
                                    <DirectEvents>
                                        <Click OnEvent="btnLoadChildPage_Click"></Click>
                                    </DirectEvents>
                                </ext:Button>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    SubPage.aspx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="Ext.Net.Examples.Examples.Events.DirectEvents.WebService" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            Ext.Net.Panel p1 = new Ext.Net.Panel();
            for (int i = 1; i <= 2; i++)
            {
                GridCtrl ucGrid = (GridCtrl)this.Page.LoadControl("GridCtrl.ascx");
                ucGrid.ID = "G" + i;
                p1.ContentControls.Add(ucGrid);
            }
            panelExceptions.Items.Add(p1);
        }
    
        protected void btnGenerateControls_Click(object sender, DirectEventArgs e)
        {
            panelAddStep.Hide();
            panelExceptions.Show();
        }
    
        protected void TreePanelHazardIdentification_NodeSelect(object sender, DirectEventArgs e)
        {
            pnlRiskAssessmentTreeDetails.Show();
            pnlRiskAssessmentTreeDetails.Collapsed = false;
            panelAddStep.Show();
    
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <ext:Viewport ID="RDRAViewPort" runat="server" Layout="BorderLayout" IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True">
                <Items>
                    <ext:FormPanel ID="RDRAPanels" runat="server" Region="Center" Enabled="false" Header="false" AutoScroll="true" Border="true" BodyPadding="5"
                        ButtonAlign="Left" Width="400" Title="" Layout="FormLayout">
                        <Items>
                            <ext:FieldSet DisabledCls="ControlDisabled" ID="fieldRisk" runat="server" Title="<h3>Risk Assessment</h3>" Collapsible="true" Layout="AutoLayout">
                                <Items>
                                    <ext:Container ID="LevelContainer" runat="server" Width="500">
                                        <Items>
                                            <ext:Label ID="LabelTitle" runat="server" Text="HITRA Level" MarginSpec="0 0 0 10" Width="70"></ext:Label>
                                            <ext:RadioGroup LabelSeparator="" ID="HIRARadioHIRALevel2" runat="server" ColumnsWidths="100,100" MarginSpec="0 0 0 10" Layout="ColumnLayout">
                                                <Items>
                                                    <ext:Radio ID="radioLevel1" runat="server" BoxLabel="Level 1" InputValue="1" Width="70">
                                                    </ext:Radio>
                                                    <ext:Radio ID="radioLevel2" runat="server" BoxLabel="Level 2" InputValue="2">
                                                    </ext:Radio>
                                                </Items>
                                            </ext:RadioGroup>
                                        </Items>
                                    </ext:Container>
                                </Items>
                                <Items>
                                    <ext:TreePanel ID="TreePanelHazardIdentification" MinHeight="550" Layout="AutoLayout" MultiSelect="false" runat="server" RootVisible="false"
                                        MarginSpec="0 0 10 10" UseArrows="false" Lines="true" EnableTheming="true" AutoScroll="true" MinWidth="800"
                                        RenderXType="True" IDMode="Explicit" Namespace="App" IsDynamic="False">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar2" runat="server" RenderXType="True" IDMode="Explicit" Namespace="App" IsDynamic="False">
                                                <Items>
                                                    <ext:Button ID="btnGenerateControls" runat="server" Text="Generate Controls" Icon="CartAdd">
                                                        <DirectEvents>
                                                            <Click OnEvent="btnGenerateControls_Click"></Click>
                                                        </DirectEvents>
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Root>
                                            <ext:Node>
                                                <Children>
                                                    <ext:Node Text="Location" NodeID="2" Leaf="true">
                                                    </ext:Node>
                                                    <ext:Node Text="Equipment" NodeID="1" Leaf="true">
                                                    </ext:Node>
                                                    <ext:Node Text="Activity" NodeID="3" Leaf="true">
                                                    </ext:Node>
                                                </Children>
                                            </ext:Node>
                                        </Root>
                                        <DirectEvents>
                                            <Select OnEvent="TreePanelHazardIdentification_NodeSelect">
                                                <EventMask ShowMask="true" />
                                            </Select>
                                        </DirectEvents>
                                        <SelectionModel>
                                            <ext:TreeSelectionModel ID="tsmHazards" runat="server" Mode="Single" IDMode="Explicit" Namespace="App" IsDynamic="False" />
                                        </SelectionModel>
                                    </ext:TreePanel>
                                </Items>
                            </ext:FieldSet>
                        </Items>
                    </ext:FormPanel>
    
                    <ext:FormPanel ID="pnlRiskAssessmentTreeDetails" runat="server" Region="East" Width="395" Header="false" Border="false" Collapsed="true"
                        Title="Details" Split="true" MinWidth="300" MaxWidth="450" AutoScroll="true" Collapsible="true" CollapseMode="Default">
                        <Items>
                            <ext:Panel ID="panelAddStep" runat="server" Width="385" AutoScroll="True" Hidden="true" Layout="AutoLayout"
                                IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True">
                                <Items>
                                    <ext:TextField DisabledCls="ControlDisabled" ID="txtStepDescription" Width="280px" MarginSpec="10 0 0 10" LabelAlign="Top" runat="server"
                                        FieldLabel="Step Description" IDMode="Explicit" IsDynamic="False"
                                        Namespace="App" RenderXType="True">
                                    </ext:TextField>
                                    <ext:TextField DisabledCls="ControlDisabled" ID="txtPosition" Width="280px" MarginSpec="10 0 0 10" LabelAlign="Top" runat="server"
                                        FieldLabel="Position" IDMode="Explicit" IsDynamic="False" Namespace="App"
                                        RenderXType="True">
                                    </ext:TextField>
                                    <ext:Label DisabledCls="ControlDisabled" ID="lblStepValidation" runat="server" Hidden="True" StyleSpec="color: Red"
                                        IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True" />
    
                                </Items>
                            </ext:Panel>
    
                            <ext:Panel ID="panelExceptions" runat="server" Width="385" Layout="AutoLayout" Height="700" AutoScroll="true" ButtonAlign="Left">
                            </ext:Panel>
    
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    GridCtrl.ascx
        <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GridCtrl.ascx.cs" Inherits="Ext.Net.Examples.Examples.Events.DirectEvents.WebService.GridCtrl" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
    
        public class Company
        {
            public int Id { get; set; }
    
            public string Name { get; set; }
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            var x = HazardsGridControl.GetStore();
            x.DataSource = this.Data();
            x.DataBind();
        }
     
        public Ext.Net.GridPanel HazardsGridPanel
        {
            get { return this.HazardsGridControl; }
        }
            
     
        public List<Company> SelectedCompanies
        {
            get
            {
                List<Company> result = new List<Company>();
     
                if (!String.IsNullOrEmpty(hdnSelectedCompanies.Text))
                {
                    result = JSON.Deserialize<List<Company>>(hdnSelectedCompanies.Text);
                }
                return result;
            }
            set
            {
                hdnSelectedCompanies.Text = Ext.Net.JSON.Serialize(value);
            }
        }
        private List<Company> Data()
        {
            List<Company> lstCompanies = new List<Company>();
            Company c3 = new Company();
            c3.Id = 10;
            c3.Name = "3m Co";
            Company c4 = new Company();
            c4.Id = 20;
            c4.Name = "Alcoa Inc";
            lstCompanies.Add(c3);
            lstCompanies.Add(c4);
            return lstCompanies;
        }
    
    </script>
    <ext:GridPanel ID="HazardsGridControl" runat="server" Title="Hazards List" Border="true" AutoScroll="true"
        ButtonAlign="Left" Layout="FitLayout" Height="300px" Width="400px">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="Id" Type="Int"></ext:ModelField>
                            <ext:ModelField Name="Name" Type="String"></ext:ModelField>
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column ID="Column2" runat="server" DataIndex="Name" Text="Name" Flex="1"></ext:Column>
            </Columns>
        </ColumnModel>  
         <SelectionModel >
                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" CheckOnly="true"></ext:CheckboxSelectionModel>
                </SelectionModel>
                  <Listeners>
                    <SelectionChange Handler="                   
                        #{hdnSelectedCompanies}.setValue(Ext.encode(this.getRowsValues({selectedOnly:true})))" />
                </Listeners>
            </ext:GridPanel>
             
            <ext:Hidden ID="hdnSelectedCompanies" runat="server"></ext:Hidden>
  8. #8
    Hi,
    Thank You for Reply
    Error not producing ,but when i changed code little bit same error producing.I changed code in Subpage.aspx
    Process:
    I added one button in subpage.aspx ,when click on button incrementing count value by 1.here i want load controls dynamically the value in the count variable times ,when click on loaddynamiccontrols button same issue producing.

    SubPage.aspx :
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="SubPage.aspx.cs" Inherits="EXT2._2.SubPage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="~/GridCtrl.ascx" TagName="ucGridCtrl" TagPrefix="ucb" %>
     
    <script runat="server">
       
        protected void Page_Load(object sender, EventArgs e)
        {
            Ext.Net.Panel p1 = new Ext.Net.Panel();
            for (int i = 1; i <= Count; i++)
            {
                GridCtrl ucGrid = (GridCtrl)this.Page.LoadControl("GridCtrl.ascx");
                ucGrid.ID = "G" + i;
                p1.ContentControls.Add(ucGrid);
            }
            panelExceptions.Items.Add(p1);
        }
    
        public int Count
        {
           get
           {
              if(hdnCount!=string.Empty && hdnCount!=null)
              {
                 return Convert.ToInt32(hdnCount.Text.ToString);
              }
              else
              {
                 return 2;
              }
           }
           set
          {
             hdnCount.Text=value.ToString();
          }
       }
    
        public void btnIncrementCount_Click(object sender,DirectEventArgs e)
        {
           Count=Count+1;
        }
     
        protected void btnGenerateControls_Click(object sender, DirectEventArgs e)
        {
            panelAddStep.Hide();
            panelExceptions.Show();
        }
     
        protected void TreePanelHazardIdentification_NodeSelect(object sender, DirectEventArgs e)
        {
            pnlRiskAssessmentTreeDetails.Show();
            pnlRiskAssessmentTreeDetails.Collapsed = false;
            panelAddStep.Show();
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
     
            <ext:Viewport ID="RDRAViewPort" runat="server" Layout="BorderLayout" IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True">
                <Items>
    
                    <ext:FormPanel ID="RDRAPanels" runat="server" Region="Center" Enabled="false" Header="false" AutoScroll="true" Border="true" BodyPadding="5"
                        ButtonAlign="Left" Width="400" Title="" Layout="FormLayout">
                        <Items>
    <ext:Button ID="btnIncrementCount" runat="server" Text="Increment Count">
                                    <DirectEvents>
                                        <Click OnEvent="btnIncrementCount_Click"></Click>
                                    </DirectEvents>
                                </ext:Button>
    
                            <ext:FieldSet DisabledCls="ControlDisabled" ID="fieldRisk" runat="server" Title="<h3>Risk Assessment</h3>" Collapsible="true" Layout="AutoLayout">
                                <Items>
                                    <ext:Container ID="LevelContainer" runat="server" Width="500">
                                        <Items>
                                            <ext:Label ID="LabelTitle" runat="server" Text="HITRA Level" MarginSpec="0 0 0 10" Width="70"></ext:Label>
                                            <ext:RadioGroup LabelSeparator="" ID="HIRARadioHIRALevel2" runat="server" ColumnsWidths="100,100" MarginSpec="0 0 0 10" Layout="ColumnLayout">
                                                <Items>
                                                    <ext:Radio ID="radioLevel1" runat="server" BoxLabel="Level 1" InputValue="1" Width="70">
                                                    </ext:Radio>
                                                    <ext:Radio ID="radioLevel2" runat="server" BoxLabel="Level 2" InputValue="2">
                                                    </ext:Radio>
                                                </Items>
                                            </ext:RadioGroup>
                                        </Items>
                                    </ext:Container>
                                </Items>
                                <Items>
                                    <ext:TreePanel ID="TreePanelHazardIdentification" MinHeight="550" Layout="AutoLayout" MultiSelect="false" runat="server" RootVisible="false"
                                        MarginSpec="0 0 10 10" UseArrows="false" Lines="true" EnableTheming="true" AutoScroll="true" MinWidth="800"
                                        RenderXType="True" IDMode="Explicit" Namespace="App" IsDynamic="False">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar2" runat="server" RenderXType="True" IDMode="Explicit" Namespace="App" IsDynamic="False">
                                                <Items>
                                                    <ext:Button ID="btnGenerateControls" runat="server" Text="Generate Controls" Icon="CartAdd">
                                                        <DirectEvents>
                                                            <Click OnEvent="btnGenerateControls_Click"></Click>
                                                        </DirectEvents>
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Root>
                                            <ext:Node>
                                                <Children>
                                                    <ext:Node Text="Location" NodeID="2" Leaf="true">
                                                    </ext:Node>
                                                    <ext:Node Text="Equipment" NodeID="1" Leaf="true">
                                                    </ext:Node>
                                                    <ext:Node Text="Activity" NodeID="3" Leaf="true">
                                                    </ext:Node>
                                                </Children>
                                            </ext:Node>
                                        </Root>
                                        <DirectEvents>
                                            <Select OnEvent="TreePanelHazardIdentification_NodeSelect">
                                                <EventMask ShowMask="true" />
                                            </Select>
                                        </DirectEvents>
                                        <SelectionModel>
                                            <ext:TreeSelectionModel ID="tsmHazards" runat="server" Mode="Single" IDMode="Explicit" Namespace="App" IsDynamic="False" />
                                        </SelectionModel>
                                    </ext:TreePanel>
                                </Items>
                            </ext:FieldSet>
                        </Items>
                    </ext:FormPanel>
     
                    <ext:FormPanel ID="pnlRiskAssessmentTreeDetails" runat="server" Region="East" Width="395" Header="false" Border="false" Collapsed="true"
                        Title="Details" Split="true" MinWidth="300" MaxWidth="450" AutoScroll="true" Collapsible="true" CollapseMode="Default">
                        <Items>
                            <ext:Panel ID="panelAddStep" runat="server" Width="385" AutoScroll="True" Hidden="true" Layout="AutoLayout"
                                IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True">
                                <Items>
                                    <ext:TextField DisabledCls="ControlDisabled" ID="txtStepDescription" Width="280px" MarginSpec="10 0 0 10" LabelAlign="Top" runat="server"
                                        FieldLabel="Step Description" IDMode="Explicit" IsDynamic="False"
                                        Namespace="App" RenderXType="True">
                                    </ext:TextField>
                                    <ext:TextField DisabledCls="ControlDisabled" ID="txtPosition" Width="280px" MarginSpec="10 0 0 10" LabelAlign="Top" runat="server"
                                        FieldLabel="Position" IDMode="Explicit" IsDynamic="False" Namespace="App"
                                        RenderXType="True">
                                    </ext:TextField>
                                    <ext:Label DisabledCls="ControlDisabled" ID="lblStepValidation" runat="server" Hidden="True" StyleSpec="color: Red"
                                        IDMode="Explicit" IsDynamic="False" Namespace="App" RenderXType="True" />
     
                                </Items>
                            </ext:Panel>
     
                            <ext:Panel ID="panelExceptions" runat="server" Width="385" Layout="AutoLayout" Height="700" AutoScroll="true" ButtonAlign="Left">
                            </ext:Panel>
     
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
            <ext:Hidden ID="hdnCount" runat="server"></ext:Hidden>
        </form>
    </body>
    </html>
    Thank You,
    Mohan
    Last edited by mohan.bizbites; Dec 15, 2013 at 5:13 AM.
  9. #9
    It throws:
    Compiler Error Message: CS0019: Operator '!=' cannot be applied to operands of type 'Ext.Net.Hidden' and 'string'
    for me in line #23.
  10. #10
    Quote Originally Posted by Daniil View Post
    It throws:
    Compiler Error Message: CS0019: Operator '!=' cannot be applied to operands of type 'Ext.Net.Hidden' and 'string'
    for me in line #23.
    Replace Count Property in SubPage.aspx with below Code.

    public int Count
        {
           get
           {
              if(hdnCount.Text!=string.Empty && hdnCount.Text!=null)
              {
                 return Convert.ToInt32(hdnCount.Text.ToString);
              }
              else
              {
                 return 2;
              }
           }
           set
          {
             hdnCount.Text=value.ToString();
          }
       }
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 5
    Last Post: Oct 07, 2013, 7:53 AM
  2. Replies: 2
    Last Post: Apr 01, 2013, 5:35 AM
  3. Replies: 1
    Last Post: Oct 10, 2012, 11:47 AM
  4. Replies: 2
    Last Post: Dec 08, 2011, 1:00 PM
  5. Replies: 2
    Last Post: Feb 10, 2010, 10:45 AM

Tags for this Thread

Posting Permissions