What's New?

Add tab to my center tabpanel on tree node click. The new tab should come from server and having webcontrols with it. Not rendering in DOM

  1. #1
    Apr 03, 2009, 4:58 AM

    Add tab to my center tabpanel on tree node click. The new tab should come from server and having webcontrols with it. Not rendering in DOM


    I am not able to add a new tab into tabpanel from my server side code. The control is hitting my getFK method and crearting a new tab and also adding it into the center panel i.e. pnlCenter. But the newly added tab is not displayed and I am not getting the newly added tab in the DOM.

    Please suggest, how to add a new tab dynamically on tree node click. The new tab should come from server.

      


<ext:TreePanel ID="pnlTree"
Width="175" 
runat="server" 
Border="false"
RootVisible="false"
EnableDD="false"
AutoScroll="true"
Collapsible = "true"> 
<Loader>
<ext:TreeLoader DataUrl="Handlers/getTreeNodes.ashx" />
</Loader>
<Root>
<ext:AsyncTreeNode NodeID="TreeRoot" Text="Root"/>
</Root>
<AjaxEvents>
<Click OnEvent="getFK" />
</AjaxEvents>



The getFK method should add a new tab to my center tabpanel. 
Here is code of my getFK which lies on server.


public void getFK()
{
try{
Tab newFK1 = new Tab();
newFK1.ID = "newFK1" + DateTime.Now.Second;
newFK1.Listeners.Activate.Fn = "ActivateTab";
newFK1.Closable = true;
newFK1.Title = "My Function Key" + DateTime.Now.Second;
newFK1.Listeners.BeforeClose.Fn = "fkBeforeClose";
////Creating object of my web control.
FKWindow fkTab1 = (FKWindow)LoadControl("FKwindow.ascx");
fkTab1.IsCopyColVisible = true;
fkTab1.IsZeroSAreaVisible = true;
fkTab1.LabelForColumn = "Adressen2" + DateTime.Now.Second;
fkTab1.LabelForCopyColumn = "Kopier Nach2" + DateTime.Now.Second;
fkTab1.FKWindowId = "newFK1" + DateTime.Now.Second;
////Adding a new tab to my web control
Tab newTab1 = new Tab();
newTab1.Html = "My tab1" + DateTime.Now.Second;
newTab1.Title = "Tab1" + DateTime.Now.Second;
fkTab1.AddTab(newTab1, 0);
newFK1.DoLayout(true);
////Adding the newly added tab to my center panel
if (!pnlCenter.Tabs.Contains(newFK1))
    pnlCenter.Tabs.Add(newFK1);

pnlCenter.DoLayout(true);
pnlCenter.SetActiveTab(newFK1);
}
catch (Exception Ex)
{throw new Exception(Ex.Message);}
}
  2. #2
    Apr 03, 2009, 5:46 AM

    RE: Add tab to my center tabpanel on tree node click. The new tab should come from server and having webcontrols with it. Not rendering in DOM

    I am also facing similar issues.
    My UI consists of a Viewport and a borderlayout.

    West region is a treepanel
    Center region is a tabpanel.

    I want to make a custom inheriting panel/tab and add the tabs dynamiccaly to the center region's tabpanel.


    Step 1 : Generating a tree on the west panel of the viewport. Associating a loader maping it to a generic handler.

    Step 2: Generic handler returns the tree nodes in JSON.

    Step 3: On click of node item in tree ... new Tab has to be added to the tab panel.
    My custom tab/panel contains row layout with 2 rows.
    1st row contains a form panel
    2nd row contains a tabpanel
    Each tab panel inside this tab panel is also dynamic.

    Need a way to make custom control and use it.

    2nd query is how can i make the JSON of a tab directly from Coolite.Ext.Web.Tab instance.
  3. #3
    Apr 04, 2009, 3:52 AM

    RE: Add tab to my center tabpanel on tree node click. The new tab should come from server and having webcontrols with it. Not rendering in DOM

    it may help


    
<ext:BorderLayout ID="Border1" runat="server">
<West Collapsible="true" Margins-Left="5">
      
            <ext:TreePanel ID="Manage_Contact" runat="server">
                <Root>
                <ext:TreeNode Text="Manage_Contacts" Expanded="true">
                <Nodes>
                <ext:TreeNode Text="Add">
                     <Listeners>
                     <Click Handler="#{ContactTab}.addTab(#{Add});" />
                     </Listeners>
                </ext:TreeNode>
                
                </Root>
          
</West>
<Center>
       <ext:TabPanel ID="ContactTab" runat="server">
       </ext:TabPanel>
</Center>
</ext:BorderLayout>


<ext:TabPanel ID="invisible" runat="server" Hidden="true">
    <Tabs>
     <ext:Tab ID="Add" runat="server" Title="Add">
          <Body>
             <ext:Panel runat="server">
             <Body>
                   <ext:TextField ID="webUrl" runat="server" FieldLabel="Web Url"></ext:TextField>
             </Body>
             </ext:Panel> 
          </Body>
    </ext:Tab>
    </Tabs>
</ext:TabPanel>

  4. #4
    Apr 04, 2009, 4:12 AM

    RE: Add tab to my center tabpanel on tree node click. The new tab should come from server and having webcontrols with it. Not rendering in DOM

    Thanks pearl for quick reply, but we have a constraint here.
    I cannot have predefined tabs in the list
    i.e.
    <ext:TabPanel ID="invisible" runat="server" Hidden="true">
    <Tabs>
     <ext:Tab ID="Add" runat="server" Title="Add">
          <Body>
             <ext:Panel runat="server">
             <Body>
                   <ext:TextField ID="webUrl" runat="server" FieldLabel="Web Url"></ext:TextField>
             </Body>
             </ext:Panel> 
          </Body>
    </ext:Tab>
    </Tabs>
</ext:TabPanel>
    cannot be in the page.
    Moreover the tabs has to be created new rather. I cannot have the tabs in invisible mode as it will eat up browser memory and the apps have to deal with numerous tabs inside it (something not less than 50 tabs).

    I have to load tabs dynamically preferred async.

    based on your code
    <Listeners>
    <Click Handler="#{ContactTab}.addTab(#{Add});" />
</Listeners>
    can't we have a ajax method instead and add a tab in the center panel in that method.

    I have tried with plaing a ajax event for click handler
    and a tab dynamically created at server in the ajax method..
    ...that but its not working out for me....!!!
  5. #5
    Apr 04, 2009, 8:34 AM

    RE: Add tab to my center tabpanel on tree node click. The new tab should come from server and having webcontrols with it. Not rendering in DOM

    Hi,

    Dynamic control creation *during AjaxEvent is not supported by Coolite Toolkit


  6. #6
    Apr 04, 2009, 9:15 AM

    RE: Add tab to my center tabpanel on tree node click. The new tab should come from server and having webcontrols with it. Not rendering in DOM


    Hi Vladimir,

    Thanks for the quick reply.
    Can you please tell me how can i achieve the requirement.

    1) Any alternate way can you please suggest.
    2) Atleast, can I serialize my control into JSON and send it to the client. How can I serialize a control?
    3) Can we expect such functionality in next versions?

Similar Threads

  1. How To Add tab In center Panel When we click tree Node in West Panel in View Port
    By Dinesh.T in forum 1.x Help
    Replies: 1
    Last Post: Oct 26, 2012, 8:52 AM
  2. How to check if a tree node is dragged out of a tree
    By mutouaa in forum 1.x Help
    Replies: 0
    Last Post: Dec 19, 2011, 12:11 AM
  3. [CLOSED] Stack overflow on click of Tree node
    By Aparna_B in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 31, 2011, 8:50 AM
  4. [CLOSED] Find Parent Node and Reassign node to founded Parent Node in Tree view
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 16
    Last Post: Jul 19, 2011, 3:53 AM
  5. In TreePanel how to get the node id on click on the server code?
    By nitin.j in forum 1.x Help
    Replies: 1
    Last Post: Apr 25, 2011, 12:44 PM

Posting Permissions