The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Overwrite the Tree Panel Node expanded Icon

  1. #1

    [CLOSED] Overwrite the Tree Panel Node expanded Icon

    Hi all,
    I use the first Time the Treepanel. I need to use custom icons.
    Loading the Nodes in Code behind with custom icons works fine.

    But after the node is expanded, the 'normal' open Folder apears - that's not what I want :-)
    I tried to solve the Problem with a 'Tree Panel Expand Handler' (found this in th 1.x Forum)

    Here's my Markup

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
      <script type="text/javascript" src="../../Center/js/jquery.min.js"></script>
      <script type="text/javascript" src="../../Center/js/ViewPlugin.js"></script>
      <script type="text/javascript" src="../../Center/js/Multisession.js"></script>
      <script src="../js/Common.js"></script>
      <script src="../js/SISA.Info.js"></script>
      <link href="../css/SISAIcon.css" rel="stylesheet"/>
      <link href="../css/SISAInfoWidget.css" rel="stylesheet"/>
    
      <style type="text/css">
        .my-icon-expand {
          background-image: url("../img/user.png") !important;
          height: 32px !important;
          width: 32px !important;
        }
    
        .my-icon-collapse {
          background-image: url("../img/user.png") !important;
          height: 32px !important;
          width: 32px !important;
        }
      </style>
    </head>
    <body>
    <form id="form1" runat="server">
      <ext:ResourceManager ID="ManagementResourceManager" runat="server">
        <Listeners>
          <DocumentReady Handler="viewPlugin.loadI18nUnits('SISAInfo');"/>
        </Listeners>
      </ext:ResourceManager>
      <asp:ScriptManager ID="ScriptManagement" runat="server"></asp:ScriptManager>
    
      <ext:Viewport ID="Viewport1" runat="server" Layout="Fit">
        <Items>
    
          <ext:TreePanel runat="server" ID="treeMain" Collapsible="true" UseArrows="true" RootVisible="False" SingleExpand="False">
            <Fields>
              <ext:ModelField Name="Mandant"/>
              <ext:ModelField Name="MandantCreated"/>
              <ext:ModelField Name="Company"/>
              <ext:ModelField Name="CompanyCreated"/>
              <ext:ModelField Name="BusinessUnit"/>
              <ext:ModelField Name="BusinessCreated"/>
            </Fields>
    
            <ColumnModel>
              <Columns>
                <ext:TreeColumn runat="server" Text="Mandant" Flex="1" DataIndex="Mandant"/>
                <ext:Column runat="server" Text="Mandant since" Flex="1" DataIndex="MandantCreated"/>
    
                <ext:Column runat="server" Text="Company" Flex="1" DataIndex="Company"/>
                <ext:Column runat="server" Text="Company since" Flex="1" DataIndex="CompanyCreated"/>
    
                <ext:Column runat="server" Text="Business Unit" Flex="1" DataIndex="BusinessUnit"/>
                <ext:Column runat="server" Text="Business since" Flex="1" DataIndex="BusinessCreated"/>
              </Columns>
            </ColumnModel>
    
            <SelectionModel>
              <ext:CellSelectionModel runat="server" Mode="Single"/>
            </SelectionModel>
            <Listeners>
              <%--<ItemCollapse Handler="SetIcon(this, null);"></ItemCollapse>--%>
              <Collapse Handler="this.setIconCls('my-icon-collapse');"/>
              <Expand Handler="this.setIconCls('my-icon-expand');"/>
            </Listeners>
          </ext:TreePanel>
    
        </Items>
      </ext:Viewport>
    </form>
    </body>
    </html>
    Doesn't work ? Any Idea to solve my problem ?

    Peter
    Last edited by fabricio.murta; Mar 19, 2018 at 11:56 AM.
  2. #2

    Any Update?

    Any Update on this Problem ?
  3. #3
    Hello Peter!

    I'm afraid the problem with your approach here may lie in the data you are feeding, so a sample on how you're populating the tree panel would be required.

    In fact, Ext.Net.Node can have an Icon enum property and another IconCls string property which can be used to permanently set the node's icon -- as well as the 'leaf' or 'not leaf' (allows or not the node to have children).

    So, maybe instead of completing the test case, an example with a tree filling might help: TreePanel built in code behind.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hi Fabricio

    I found the solution at lunch :-)
    When I put the 'IconFile' property on the node I have the result I want.
    I can live with that...

    salute
    Peter
  5. #5
    Hello again Peter!

    Glad you could find a solution that fits you, and thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Jan 22, 2015, 5:41 PM
  2. Replies: 13
    Last Post: Jan 20, 2015, 5:30 PM
  3. [CLOSED] Tree panel node icon change
    By alscg in forum 2.x Premium Help
    Replies: 1
    Last Post: Jan 07, 2014, 11:34 AM
  4. [CLOSED] Save the Tree expanded Node state between sessions
    By Peter.Treier in forum 2.x Premium Help
    Replies: 1
    Last Post: Sep 02, 2013, 3:51 PM
  5. Replies: 2
    Last Post: Apr 02, 2009, 8:13 AM

Tags for this Thread

Posting Permissions