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

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.

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

Quote:

---

Originally Posted by Vamsi

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.

Quote:

---

Originally Posted by Vamsi

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.

Quote:

---

Originally Posted by Vamsi

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:

Code:

---

<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!

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.

Hello @Vamsi!

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

Code:

---

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

---

Or, in ASPX's ResourceManager, like this:

Code:

---

<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!

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.

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!

Thank you and now displaying custom image.. I have two questions here :

1)I don't want to set specific height based image height need to set height automatically.

2)Attachment 25285

Pls see above attachment it display the same image and that last leaf image.i.e., It overrides the previous image and display the last image to all the leaf in treelist.


May be there was an issue with iconcls ="my-custom-icon"

.my-custom-icon {
background-image: url('<%=picPath%>') !important;
height: 18px;
}

picPath was public property that was declared on code behind page.

Thank you,
Vamsi.

Hi Vamsi. Please edit your previous posts in this thread and wrap the code samples in [CODE] tags as well as format the indentation of the code samples. That will help make the code sample much more readable for everyone.

Vamsi, if you use the height specified as suggested, you won't need to specify height for every image.

I have no idea why you are getting the icon replicated to every node in the list, this does not happen if I set a custom icon in the TreePanel > List > Simple example.

I strongly advise you to try to draw your scenario in a simplified test case, so we can understand and reproduce the scenario you're describing. Just as a reminder, here's our threads that offers guidelines to posting to our forums, so that we can best help you with the issues you have:

- Tips for creating simplified code samples
- More Information Required
- Forum Guidelines