How to dynamically add css class in cell ColumnTree?

Question

Check this Ext.Net example

http://examples1.ext.net/#/TreePanel/Advanced/ColumnTree/

I want to dynamically add css class to cell with Column "Duration". How can I do that?

Answer 1

try this,inside the colum call the renderer function

    <ext:Column ID="Column10" runat="server" DataIndex="Bolum" Width="35" Text="Blm" Flex="1">
   <Renderer Fn="renderActions"></Renderer>
    </ext:Column>

and renderer function

  function renderActions(value, meta, record) {
            var image = "<div align='center'><img src='{0}' alt='{0}' /></div>";

            if (value == 'BİTTİ') {

                return Ext.String.format(image, 'images/accept.png');
            }
.............

modify it your desire

Answer 2

I am not sure will help you but try this.

PS: I don't know Ext.NET so you should modify the snippet.

columns: [
    {
        dataIndex: 'Duration',
        title="Duration",
        renderer: function(value) {
            if (value == '15 min') {
                status = 'status-up'
            }
            return Ext.DomHelper.markup({
                tag: 'img',
                src: '/image/path/'+status+.png',
                cls: 'icon-status-up'
            });
        }
    }
]

Here, you can use renderer function because columns property of the TreePanel extending grid

Ext.tree.Panel

Answer 3

I do some javascript hack on event nodeLoad through find every html div using css class selector, x-tree-col-text. I use dom manipulation technics. I thought what I do is not best practice, but it works.