Grid row colour

[AP]

I'm upgrading an application from a 2020 version of Kendo UI to version 2023.3.1010.  An issue I'm having is with a grid that has the row colour set via client templates.

For alternating rows this works, but for others the colour is made almost unnoticeable by the grids alternating row colours (image attached). In this example all rows should be tinted red (but this is dependent on the data being shown and is controlled in the model).

The grid definition is below:-

 @(Html.Kendo().Grid<WLI_Payments.Models.View_Requests_Master>
    ()
    .Name("Grid")

    .Columns(col =>
    {
        col.Bound(o => o.RequestID).Title("Ref.").ClientTemplate("<span style='#=PaymentReviewColour#'> #=RequestID#</span>");
        col.Bound(o => o.Directorate).Title("Directorate").ClientTemplate("<span style='#=PaymentReviewColour#'> #=Directorate#</span>");
        col.Bound(o => o.Site).Title("Site").ClientTemplate("<span style='#=PaymentReviewColour#'> #=Site#</span>");
        col.Bound(o => o.SessionDate).Title("Date").ClientTemplate("#=sessionDateToShowInPaymentReview#");
        col.Bound(o => o.PlannedStart).Title("Planned Start").ClientTemplate("#=PlannedStartToShowInPaymentReview#").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
        col.Bound(o => o.PlannedEnd).Title("Planned End").ClientTemplate("#=PlannedEndToShowInPaymentReview#").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
        col.Bound(o => o.MedicName).Title("Planned Practitioner").ClientTemplate("<span style='#=PaymentReviewColour#'> #=MedicName#</span>").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
        col.Bound(o => o.SessionType).Title("Type").ClientTemplate("<span style='#=PaymentReviewColour#'> #=SessionType#</span>");
        col.Bound(o => o.PointOfDelivery).Title("Point of Delivery").ClientTemplate("<span style='#=PaymentReviewColour#'> #=PointOfDelivery#</span>");
        //col.Bound(o => o.ForecastCost).Title("Planned Cost").Format("{0:C}").HtmlAttributes(new { style = "#=PaymentReviewColour#" });
        col.Bound(o => o.ForecastCost).Title("Planned Cost").ClientTemplate("#=ForecastCostToShowinPaymentReview#");
        col.Bound(o => o.CurrentPaymentApprovalPositionName).Title("Position").ClientTemplate("<span style='#=PaymentReviewColour#'> #=CurrentPaymentApprovalPositionName#</span>");
        col.Bound(o => o.CurrentPaymentApproverName).Title("Approver").ClientTemplate("<span style='#=PaymentReviewColour#'> #=CurrentPaymentApproverName#</span>");

        //col.Bound(o => o.PaymentStatus).Title("Status").HtmlAttributes(new { style = "#=PaymentReviewColour#" });
        col.Bound(o => o.RequestID).Title("").ClientTemplate("<button style='#=ShowPaymentReviewButton#' onclick='reviewRequest(#=RequestID#,\"#=CurrentPaymentApproverName#\");' class='btn btn-primary btn-xs' title='Review' data-toggle='tooltip' data-placement='top'><span class='bi bi-eye-fill' ></span></button>").HtmlAttributes(new { style = "#=PaymentReviewColour#" }).Filterable(false).Sortable(false);



    })
    .Size(ComponentSize.Small)
    .Events(e => e.DataBound("onBound"))
        .DataSource(ds => ds
        .Ajax()
        .Model(m => m.Id(p => p.RequestID))

        .PageSize(20)
        .Read(rd => rd.Action("RD_PaymentRequests_To_Review", "PaymentReview").Data("gridFilter")

        )

        )

        .Pageable(p => p.Refresh(true))
        .Sortable()

        .Filterable()

            )

The PaymentReviewColour will either be empty or "color:rgb(0,125,0);font-style:italic;";

How can I turn off the alternating row colours (or just ensure the colour displays for all rows)?

 

Thanks

[Ivan Danchev]

Hello AP,

The value you mentioned: "color:rgb(0,125,0);font-style:italic;" applies green color and italic to the text in the cell. For example: https://netcorerepl.telerik.com/wRbQalkW31ttbTmg40

All the cells in the Freight column are have the styles applied and the text is italic green. The styles are applied through a ClientTemplate in the Freight column.

With regard to setting all the cells background-color, you can use the HtmlAttributes configuration. Here's another example: https://netcorerepl.telerik.com/mdvGkbks374HnmDM03

The value passed to the HtmlAttributes is: "background-color: pink; border-right: 1px solid gray; border-bottom: 1px solid gray;"

You can use a field instead:

.HtmlAttributes(new { style = "#=SomeField#" })

The Grid also has ClientRowTemplate and ClientAltRowTemplate options that allow customizing the content and the appearance of the whole row (and the alternating row), instead of a specific column (for that the column ClientTemplate is used). Here's a demo that shows the use of these 2 options: https://demos.telerik.com/aspnet-mvc/grid/rowtemplate

Regards,
Ivan Danchev
Progress Telerik

[AP]

Apologies, this grid shows future rows with green text (which is set via the client template), but also uses the onBound event to apply the back ground colour. The javascript is:-

 function onBound() {
        $('[data-toggle="tooltip"]').tooltip();

        //Highlight rows where approver name isn't reviewer name - indicates possible deputisation

        var grid = $("#Grid").data("kendoGrid");
        var gridData = grid.dataSource.view();



        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            if (gridData[i].CurrentPaymentApproverName != reviewerName) {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("deputyClass");
            }
        }

    }

The class is defined as:-

<style>
    .deputyClass {
        background-color: #F0AAB5;
        font-style: italic;
    }

This works for half the rows, but seems to get overidden (or very muted) by the alternate row colours set by the theme.  

Update: After looking at the code again, adding !Important to the style has fixed the issue!