This is a migrated thread and some comments may be shown as answers.

Client Template Not working in chrome and IE

1 Answer 53 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Nithyanandam asked on 21 Feb 2014, 12:40 PM
I have to Colour a Column based on its value after searching sometime found this solution which worked well in firefox. but in other browsers its causing the grid to lose all the rows.

Here is my grid
        .Columns(columns =>
            columns.Bound(c => c.AccountName).ClientTemplate("<a class='GridLink' href='" + Url.Action("AccountView", "Accounts", new { Id = "#=AccountID#" }) + "'>#=AccountName#</a>").Width(180);
            //columns.Bound(c => c.AccountName).Width(180);
            columns.Bound(c => c.FullAddress);
            columns.Bound(c => c.AccountType).Width(120).ClientTemplate("#=Getcoloured(AccountType)#");
            columns.Bound(c => c.PhoneNumber).Width(100);
            columns.Bound(c => c.EmailAddress).Width(150);

        .HtmlAttributes(new { style = "height: 355px;" })
        .Pageable(pageable => pageable
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Accounts_Read", "AccountsGrid"))

this is the function 
function Getcoloured(value) {
        if (value && value != null && value.contains('A') == 1)
            return "<span style='color:#00B067'>" + value + "</span>";
        else if (value && value != null && value.contains('B') == 1)
            return "<span style='color:#4F81BD'>" + value + "</span>";
        else if (value && value != null)
            return "<span style='color:#B366C0'>" + value + "</span>";
            return ""

Is there any other way to achieve Colouring a column based on the value.

1 Answer, 1 is accepted

Sort by
Dimiter Madjarov
Telerik team
answered on 24 Feb 2014, 09:25 AM

The reason for the issue is that the contains method, which is used in the Getcoloured function is supported in Firefox only. I would suggest you to switch it with the indexOf method, which is supported in all major browsers and returns the index of the first occurrence of the searched value or -1, if not found.

Dimiter Madjarov
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question