Friday 25 November 2016

Changing the Background Color of the kendo grid cell

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

No comments:

Post a Comment