[CLOSED] TreeList with out using leaf=true and custom image

[Vamsi]

Hi,

Generally any treeList will check by its own with out setting any property, but in Ext.Net treelist need to use leaf=true.

Is there any option with setting the property leaf=true.

If there is no child node then it should not display "+" in treelist.

beforerender event not available in treelist listners.

in treelist assign custom image to IconFile, but its not supporting..Treepanel supports iconfile and displayed custom image as expected(bitimage)

here is the iconfile code and supports in treepanl but not supporting in treelist.

System.Drawing.Bitmap bmp = (System.Drawing.Bitmap)OTISNet.Utility.GetImage(fi eldListChild[treecount].Picture, true, true, otis);
System.IO.MemoryStream ms = new System.IO.MemoryStream();
bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
var base64Data = Convert.ToBase64String(ms.ToArray());
picPath = "data:image/png;base64," + base64Data;

Iconfile=picpath.

Thank you,
Vamsi.

[fabricio.murta]

Hello @Vamsi, I will try to answer your questions, one by one.

Generally any treeList will check by its own with out setting any property, but in Ext.Net treelist need to use leaf=true.
Is there any option with setting the property leaf=true.
If there is no child node then it should not display "+" in treelist.

This boils down to the same we discussed for the full-fledged TreeGrid some days ago in this forum thread: Tree Panel with out using leaf=true. Have you tried the alternative there? Unfortunately there won't be much else that can be done here. It may be designed differently in applications or frameworks you are used to, but the way it is designed in Ext JS, underlying Ext.NET framework, every node is a folder (so there can be empty folders) unless specified otherwise.

beforerender event not available in treelist listners.

The Ext.Net.TreeList is intended to be a simplified, lighter component in spite to the full-featured TreePanel. Client side being the Ext.list.Tree component, it does not implement that event, in fact.

in treelist assign custom image to IconFile, but its not supporting..Treepanel supports iconfile and displayed custom image as expected(bitimage)

Icon support in both components are not the same as well. Maybe we should not be using the usual Ext.Net.Node as tree list entries. Yet, the IconCls concept for binding the icons is the same and should work fine, as can be seen in this example: TreePanel > List > Simple.

In the example, it uses font awesome glyphs, which probably is not what you're looking for. Ext.NET also has its own icon structure, but again, all are "ready-to-use" as CSS classes. You seem to need to set your own path though.

For that end, you should use the "picpath" you mentioned in your post in a CSS class, according to documentation on client-side Ext.list.TreeItem.iconCls. In other words, you should do something like:

<style>
    .tree-home {
        background-image: url(<%= picPath %>) !important;
        height: 100%
    }
</style>

Then give the desired nodes the IconCls="my-custom-icon".

In general, the TreeList component is intended to support a subset of what a TreePanel does, as it is meant to be lightweight, this means the range of features is also trimmed down to the basic.

Hope this helps!

[Vamsi]

Thank you for your quick response. I have tried and its working as expected in tree panel but not tree list you have given earlier. But I'm expecting same in tree list as well. I don't want to use leaf=true property in tree list as well.

Thank you,
Vamsi.

[fabricio.murta]

Hello @Vamsi!

You just need the same script running, right? What if you call it in the OnReady event? Either by calling, like:

Ext.onReady(function() {
 flatten(App.MyTreeList1.getStore().getData().items);
});

Or, in ASPX's ResourceManager, like this:

<ext:ResourceManager runat="server">
    <Listeners>
        <DocumentReady Handler="flatten(App.MyTreeList1.getStore().getData().init" />
    </Listeners>
</ext:ResourceManager>

I tested this approach in the Simple TreeList Example by removing all Leaf="true", then calling the same flatten() method suggested in the other thread and it worked just fine.

Hope this helps!

[Vamsi]

Thankyou for your solution and working as excepted with out leaf=true

but there was an issue with custom image

picPath="/Images/OTISBlue.png";

(or)

picPath= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAC QkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJc EhZcwAADsQAAA7EAZUrDhsAAAEdSURBVDhPY/iPBG6cWXpmb8+u5ZUbZueum5W7aX7h3tVNZ/bPhkqDAUIDUOnt83Nf3F/7+c3OX18PARGQ8fjWyotHpuxYUQ1VBNewY3HJ359H8aCptaEQl QgNX65mf38x69fnrRAVQBt+f1j/5XEPUPzpDjt0DUDnfjjiDJQDqvj2etGX+80fTge+3Sr3cgXTo0 WMt+cwo2sA+hK/hr4SP4hKqAZgmJCmYfXUDCpraMt2g6iEaljan0JjDbNbovBrqI qzhahEaHi+1+Xj5XSsGi5N40TXAASr+0P2L465cqDi2c2pQA1v jgXcXaVyfJLYmgalCXmmUEXIGoDg+JY2YIQAbQMGItDRk4odFz W67pqdApUGAxQNhJP3//8A1s5JdFkRsjQAAAAASUVORK5CYII=";

<style>
.my-custom-icon {
background-image: url(<%# picPath %>) !important;
}
</style>

IconCls="my-custom-icon".

Image not displaying at all. please suggest how take it forward.

Thank you,
Vamsi.

[fabricio.murta]

Hello @vamsi!

It seems giving the css class a height is all you need to have that working. I have reviewed the CSS block in the response above adding it to the sample CSS portion.

Hope this helps!