CODEWITHSUNDEEP
javascriptextjsext.net
Dani Petrick
Dani Petrick

Reputation: 359

How to dynamically add css class in cell ColumnTree?

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?

Upvotes: 0

Views: 142

Answers (3)

sakir
sakir

Reputation: 3502

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

Upvotes: 1

Dani Petrick
Dani Petrick

Reputation: 359

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.

Upvotes: 0

Oğuz &#199;elikdemir
Oğuz &#199;elikdemir

Reputation: 4980

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

Upvotes: 0

Related Questions