CODEWITHSUNDEEP
htmlcssangularjskendo-uikendo-grid
Lost
Lost

Reputation: 13575

How to set style for k-grid td BUT just for one column?

I am using a kendo grid and for one of the column in my Kend-grid, I am using tooltip. Now, after some tinkering around, I found that for tool tip to show properly, I need to override overflow property on k-grid tdclass. So I did just say 

 k-grid td {
                overflow:visible
            }

in my HTML and boom my tooltip was fixed. However, it allowed other columns to overflow which clearly messed up my grid. So I realized that I need a way to basically say that please override k-grid td BUT for only this column. I am using Kendo Grid with Angular and my field definition looks like below

 {
                            field: "StateString",
                            title: "State",
                            width: "120px",                                                   

                        }

What should I change in the code so that I can override overflow property of k-grid-td just for this column?

Upvotes: 1

Views: 3006

Answers (3)

kite
kite

Reputation: 1548

This is for dynamically changed cell(td) style based on value. I tried to style td based on properties. But so far what I found was solution for changing div style inside td via template. sometimes we need to work on the td itself.

For static td style in one column you can use the selected answer, but for dynamically changed td style based on column value, you cannot use the selected answer.

the trick to change the td style based on content:

  1. use cell template to change the div style inside td.
  2. in grid databound event. use jquery to to assign new style to the td using parent().

sample databound function:

function onGridDataBound() {
        //need to change cell class here, we cannot access cell from clientTemplate,
        //so we do it here after grid is bound with data and template
        $(".colorClass.btn-primary").parent().addClass("btn-primary");
        $(".colorClass.btn-danger").parent().addClass("btn-danger");

        //".colorClass.btn-danger" and ".colorClass.btn-primary" are the style we set in our cell template based on value
    }

Upvotes: 0

Lost
Lost

Reputation: 13575

Well, it turned out that I did not need to do anything fancy to solve this issue. This functionality comes built-in with Kendo-Grid. I just added a configuration item called attributes to solve this issue:

                   {
                        field: "StateString",
                        title: "State",
                        width: "120px",
                        encoded: true,                           
                        attributes: {
                            "class": "table-cell",
                            style: "overflow: visible;"
                        }
                    }

Upvotes: 5

mrmashal
mrmashal

Reputation: 1863

You need to use a custom row template like this demo. give the corresponding td a class to be able to and apply the style only to that column.

Upvotes: 2

Related Questions