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.
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.