Change column text conditionally within row template

1 Answer 105 Views

Grid

Luke asked on 07 Jul 2023, 07:12 PM

How do I display text in a grid row conditionally using a row template? I have tried the following variations.

#Sex == 1 ? Male : Female#
#Sex == 1 ? \"Male\" : \"Female\"#
#Sex == 1 ? <span>Male</span> : <span>Female</span>#

Here is the row template definition:

.ClientRowTemplate(
        "<tr data-uid='#: uid #' class='k-master-row p-2 m-2'>" +
            "<td class='k-hierarchy-cell k-table-td' aria-expanded='false' role='gridcell' style='max-width:40px;'>" +
                "<a href='\\#' aria-label='Expand' tabindex='-1' class='k-icon k-i-caret-alt-right'></a>" +
            "</td>" +
            "<td class='defendantDetails col-sm-12 col-md-10'>" +
// THIS IS THE PROBLEMATIC SPOT
                "<div class='d-inline-block'>#Sex == 1 ? <span>Male</span> : <span>Female</span># - #=Race# - SSN: #=Ssn# - DOB: #=Dob#</div>" +
                "</div>" +
                "<div class='d-inline-block ms-auto'>" +
                    "<button type='button' class='ms-auto k-grid-edit-command k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary'>" +
                        "<span class='k-svg-icon k-svg-i-pencil k-button-icon' aria-hidden='true'>" +
                            "<svg viewBox='0 0 512 512' focusable='false' xmlns='http://www.w3.org/2000/svg'>" +
                                "<path d='m334.9 86.6 45.3-45.3c12.4-12.4 32.8-12.4 45.3 0l45.3 45.3c12.4 12.4 12.4 32.8 0 45.3l-45.3 45.3-90.6-90.6zm-22.6 22.6L32 389.5V480h90.5l280.3-280.3-90.5-90.5zM99.9 412.1l-22.6-22.6 235-235 22.6 22.6-235 235z'></path>" +
                            "</svg>" +
                        "</span>" +
                        "<span class='k-button-text'>Edit</span>" +
                    "</button>" +
                    "<button type='button' class='k-grid-remove-command k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>" +
                        "<span class='k-svg-icon k-svg-i-x k-button-icon' aria-hidden='true'>" +
                            "<svg viewBox='0 0 512 512' focusable='false' xmlns='http://www.w3.org/2000/svg'>" +
                                "<path d='M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96l45.3 45.3z'></path>" +
                            "</svg>" +
                        "</span>" +
                        "<span class='k-button-text'>Delete</span>" +
                    "</button>" +
                "</div>" +
            "</td>" +
        "</tr>"
    )

Also, is there any documentation on changing the look of the row? Using width, margins, classes etc. doesn't appear to alter how the row looks.

1 Answer, 1 is accepted

Accepted

answered on 12 Jul 2023, 01:24 PM

Hi Luke,

I would initially like to say a big thank you for taking the extra time and effort to further supplement the relevant code snippets that further depict the currently incorporated row template scenario on your side. I really appreciate it.

Please allow me to address each of your inquiries in a more decoupled manner.

In regards to the templating error that is persisting on your end:

Upon further examination of the provided row template, it appears that the described behavior is caused by the fact that the span elements are not wrapped with the ' single quotes. The following alteration seems to prevent the error from persisting:

"<div class='d-inline-block'>#= Sex == 1 ? '<span>Male</span>' : '<span>Female</span>'# - #=Race# - SSN: #=Ssn# - DOB: #=Dob# </div>" +

In regard to changing the row appearance of the Grid:

We have a readily available knowledge base article that tackles such an approach that can be found here:

Style Grid Table Rows and Cells Based on Values - https://docs.telerik.com/kendo-ui/knowledge-base/style-rows-cells-based-on-data-item-values

Notice that the aforementioned knowledge base article describes three different approaches how to alter the overall appearance of the Grid. Although the knowledge base article tackles a Kendo UI for jQuery approach for the Grid, the same implementation can be integrated for the Telerik UI for ASP.NET Core Grid as well.

"Note that although the aforementioned knowledge base article tackles a conditional cell-based value scenario, the same approach can be undertaken for non-conventional cell-based rows"

Having this in mind, please allow me to elaborate more on the specifics of the approaches in more detail:

The first two rely mostly on subscribing to the DataBound event handler of the Grid through all the rows, or data items and based on the values they contain, determine arbitrary customizations.

Here are two Telerik REPL examples that tackle the first two approaches, particularly for the Telerik UI ASP.NET Core suite:

Telerik REPL for ASP.NET Core Example #1

Telerik REPL for ASP.NET Core Example #2

The third approach utilizes an identical approach to yours by directly embedding arbitrary HTML markup using the .ClientRowTemplate() and. ClientAltRowTemplate() API's.

Additionally, when it comes to the customization of the existing Grid, I would recommend reviewing the following resources that you might find helpful in this regard:

Override the widget's styling - https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes

Use custom HTML markup and CSS styling inside the Grid Cells - https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/columns/templates

Create custom CSS themes - https://docs.telerik.com/aspnet-core/styles-and-layout/sass-themes/sass-theme-builder#telerik-ui-for-telerik-ui-for-aspnet-core-themebuilder-overview

I hope this information helps.

Kind Regards,
Alexander
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

Luke

commented on 12 Jul 2023, 02:39 PM

Thanks for the reply. I had tried single quotes as follows #Sex == 1 ? 'Male' : 'Female'# but that didn't work either. I realized from your post I was missing the '=' after the first '#' character.