<
style>
tr.condtn1
td:last-child {
background-color: #ff3232;
font-weight: bolder
!important;
}
tr.condtn2
td:last-child {
background-color: green;
font-weight: bolder
!important;
}
tr.condtn3
td:last-child {
background-color: yellow;
font-weight: bolder
!important;
}
tr.condtn4
td:last-child {
background-color: transparent;
font-weight: bolder
!important;
}
</
style>
<
script>
function DataBound
(e)
{
var columns =
e.sender
.columns;
var columnIndex = this
.wrapper
.find("
.k-grid-header [data-field=" + "
MarginValue" + "]")
.index
();
//
iterate the data items and apply row styles where necessary
var dataItems =
e.sender
.dataSource.view
();
for (
var j = 0; j <
dataItems.length; j++)
{
var ForecastedValue = 0;
var actualRevenue = 0;
var budgetedValue = 0;
var marginValue = 0;
ForecastedValue =
dataItems[j]
.get("ForecastedValue");
actualRevenue =
dataItems[j]
.get("
ActualRevenue");
budgetedValue =
dataItems[j]
.get("BudgetedValue");
var row =
e.sender
.tbody.find("[data-uid='" +
dataItems[j]
.uid + "']");
if (ForecastedValue >
actualRevenue) {
row.addClass("condtn1"); // refer
css style above
}
else if (ForecastedValue <
actualRevenue) {
row.addClass("condtn2"); // refer
css style above
}
else if (
budgetedValue <
actualRevenue) {
row.addClass("condtn3"); // refer
css style above
}
else {
row.addClass("condtn3"); // refer
css style above
}
}
}
</
script>
--------------------------------------------------------------------------------------------------------
<
div class="director-
dashboardProject">
@
(Html
.Kendo
()
.Grid<SPAN
.OMS
.ViewModel
.SummaryView>()
.Name
("UsaProjectGrid")
.Columns
(columns =>
{
columns.Bound
(p => p
.ProjectName)
.Format
("{0
:n2}")
.ClientFooterTemplate
("Grand Total:")
.Width
(122);
columns.Bound(p => p.BudgetedValue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
columns.Bound(p => p.ForecastedValue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
columns.Bound(p => p.ActualRevenue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
columns.Bound(p => p.ActualCost).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
columns.Bound(p => p.CommissionValue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
columns.Bound(p => p.MarginValue).Format("{0:n2}").Width(122).ClientFooterTemplate("#= kendo.format('{0:c}', sum) #").Format("{0:c2}");
})
.Events(events => events.DataBound("DataBound")) // On data bound we need to check data values and need to do the required changes.
.DataSource(dataSource =>
dataSource
.Ajax
()
.Events
(events => events
.Error
("error_handler"))
.Aggregates
(aggregates =>
{
aggregates.Add
(p =>
p.BudgetedValue)
.Sum
();
aggregates.Add
(p => p
.ForecastedValue)
.Sum
();
aggregates.Add
(p =>
p.ActualRevenue)
.Sum
();
aggregates.Add
(p =>
p.ActualCost)
.Sum
();
aggregates.Add
(p => p
.CommissionValue)
.Sum
();
aggregates.Add
(p => p
.MarginValue)
.Sum
();
})
.Read
(read => read
.Action
("GetUsaProjectSummary", "
SummaryView")
.Data
("ItemFormValues"))
)
)
</
div>