Why is ClientTemplate with td tag adding empty column?

[Brian]

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.

 

[Petar]

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