Why is ClientTemplate with td tag adding empty column?

1 Answer 29 Views
Grid
Brian
Top achievements
Rank 1
Brian asked on 14 Dec 2021, 05:14 PM

I am trying to format some cells in a Kendo grid.

Here is the code:

c.Bound(p => p.YTD).ClientTemplate("<td bgcolor=\"red\">#:YTD#</td>");

A new empty column is created in the grid next to the column that I want to change the background color.

If I use c.Bound(p => p.YTD).ClientTemplate("<strong>#: YTD #</strong>"); the alignment is correct.

 

Why does the td tag add a new column?  How can I address this?

 

Thank you.

 

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 16 Dec 2021, 04:44 PM

Hi Brian,

Here is a REPL project demonstrating how you can control the background of a selected Grid cell. The example used UI for ASP.NET Core but the same as the demonstrated approach is applicable in UI for ASP.NET MVC context.

The key things in the example the as follows:

  • The ClientTemplate definition
columns.Bound(p => p.Category.CategoryName).ClientTemplate("#=templateCell(data)#").Width(180);

You can see that we are using a function to achieve the targeted functionality

  • The definition of the templateCell function
function templateCell(data) {
    var template = "";
    setTimeout(()=>{
        $("tr[data-uid='"+data.uid+"']").find("td").eq(3).addClass("red");
    })
    template = data.Category.CategoryName;
    return template;
}

The important thing in the above snippet is the code in yellow that adds a "red" CSS class to the Grid cell. 

  • The last thing we should define to achieve the targeted functionality is to define the "red" CSS class:
.red {
    background-color:red;
}

Check the linked example and let me know if you have questions about the suggested implementation. If you need further assistance with the current ticket, I will be happy to help you.

Looking forward to your reply.

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Brian
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or