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

Client Template Not working in chrome and IE

1 Answer 97 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nithyanandam
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
@(Html.Kendo().Grid<EDENEMS.WEB.Models.AccountModel>()
        .Name("Accountsgrid")
        .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;" })
        .Scrollable()
        .Sortable()
        .Filterable()
        .Selectable()
        //.Events(e=>e.DataBound("onDataBound"))
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .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>";
        else 
            return ""
    }

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

1 Answer, 1 is accepted

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

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.

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