CODEWITHSUNDEEP
jqueryjquery-uikendo-uikendo-grid
Shuinvy
Shuinvy

Reputation: 251

Kendo change font-color in grid

Is it possible to change font-color of Kendo grid by some condition? I hope I get data that can be recognized by jquery like:

if($("div td:contains('Online')")) {
         $("div :contains('Online')").css( "font-color", "Red" );
}

I have data get in database to show who is online/offline, but the two words are a little bit similar, so I hope I can change the text 'Online' to red. I can show data successfully, but I don't have any other tag(id or name, etc.) to make different from each data....

Is the only way I have to do is let each row have id or tags? Can I just use .contains to find the object and change the color?

My html just simply:

<body>
<div id="grid"></div>
<script>
    $(function() {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: "data/userState.php"
                },
                error: function(e) {
                    alert(e.responseText);
                },
                schema: {
                    data: "results",
                    total: "Count"
                },
                pageSize: 10
            },
            columns: [{ field: "userAcc", title: "Account" },{ field: "state", title: "State" }],
            pageable: {
                refresh: true,
                pageSizes: true
            },
            height: 430,
            resizable: true
        });
        if($("#grid td:contains('Online')")) {
            $("#grid td:contains('Online')").css( "font-color", "Red" );
        }
    });

</script>
</div>
</body>

Upvotes: 4

Views: 20911

Answers (4)

Anurada Bandara
Anurada Bandara

Reputation: 11

Just use simple styles.

for text in data grid

.k-grid table {
    font-weight: bold !important;
}

for header text

.k-filter-row th, .k-grid-header th.k-header{
    font-weight: bold !important;
}

Upvotes: 0

Shuinvy
Shuinvy

Reputation: 251

Sorry, I found my own answer. That is, I need to use template( I am not familiar with it). And just use template as:

<div id="grid"></div>
<script>
    $(function() {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: "data/userState.php"
                },
                error: function(e) {
                    alert(e.responseText);
                },
                schema: {
                    data: "results",
                    total: "Count"
                },
                pageSize: 10
            },
            columns: [{ field: "userAcc", title: "Account" },{ field: "state", title: "State", template: '#=SetColor(state)#' }],
            pageable: {
                refresh: true,
                pageSizes: true
            },
            height: 430,
            resizable: true
        });
    });
    function SetColor(state)
        {
            if(state=="Online")
                return "<font color=\"red\">"+state+"</font>";
            else
                return state;
        }
</script>
</div>

Use template to what field you want to change, and return text be decorated, and I promise that people want to make different from score or data like less than 60 can use the method, too!

Upvotes: 2

Robert Achmann
Robert Achmann

Reputation: 2035

Additional info for version 2014.1.528

Go Simple.

All you need to do is add a style attribute to the appropriate class

For a grid, add a style:

.k-grid .text-box {
    color: black !important;
}

Upvotes: 0

Kevin Babcock
Kevin Babcock

Reputation: 10247

Get rid of the if statement and use a column template instead. You can wrap the value in a span and conditionally set its class to display red text based on your criteria.

Here's an example:

$("#grid").kendoGrid({
    // ...
    columns: [
        { field: "userAcc", title: "Account" },
        {
            field: "state",
            title: "State",
            template: "<span class='#if(state === \'Online\') {# red #}#'></span>"
        }
    ]
    // ...
});

..and your CSS class...

.red {
    color: red;
}

Upvotes: 8

Related Questions