Grid row colour

1 Answer 28 Views
Grid
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 28 Nov 2023, 02:27 PM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 01 Dec 2023, 08:45 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

AP
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 01 Dec 2023, 11:56 AM | edited

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!

 

Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or