View Full Version : [CLOSED] Overwrite the Tree Panel Node expanded Icon

Mar 16, 2018, 5:32 PM
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">
<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;
<form id="form1" runat="server">
<ext:ResourceManager ID="ManagementResourceManager" runat="server">
<DocumentReady Handler="viewPlugin.loadI18nUnits('SISAInfo');"/>
<asp:ScriptManager ID="ScriptManagement" runat="server"></asp:ScriptManager>

<ext:Viewport ID="Viewport1" runat="server" Layout="Fit">

<ext:TreePanel runat="server" ID="treeMain" Collapsible="true" UseArrows="true" RootVisible="False" SingleExpand="False">
<ext:ModelField Name="Mandant"/>
<ext:ModelField Name="MandantCreated"/>
<ext:ModelField Name="Company"/>
<ext:ModelField Name="CompanyCreated"/>
<ext:ModelField Name="BusinessUnit"/>
<ext:ModelField Name="BusinessCreated"/>

<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"/>

<ext:CellSelectionModel runat="server" Mode="Single"/>
<%--<ItemCollapse Handler="SetIcon(this, null);"></ItemCollapse>--%>
<Collapse Handler="this.setIconCls('my-icon-collapse');"/>
<Expand Handler="this.setIconCls('my-icon-expand');"/>


Doesn't work ? Any Idea to solve my problem ?


Mar 19, 2018, 10:36 AM
Any Update on this Problem ?

Mar 19, 2018, 12:08 PM
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 (http://examples2.ext.net/#/TreePanel/Basic/Built_in_CodeBehind/).

Hope this helps!

Mar 19, 2018, 12:49 PM
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...


Mar 19, 2018, 12:56 PM
Hello again Peter!

Glad you could find a solution that fits you, and thanks for the feedback!