Styling individual cells of grid with a template?

[Lisa]

Hello all,
I'm new to using KendoUI, so I'm guessing there's an easy way to do this that I'm just not seeing.  I have templates for rows to alternate colors, but I would like certain cells to change their styling depending upon whether or not they have particular content in them.  What would be the best way to make that happen?

Thanks!

[Iliana Dyankova]

Hello Lisa,

Such functionality is not supported out of the box, but you could achieve it using custom code - in the Grid's dataBound event apply your custom CSS class to the given cell(s) via standard DOM operations. For example: 

dataBound: function () {
   $('td').each(function(){if($(this).text()=='Jane'){$(this).addClass('customClass')}})
}

For convenience I created simple project, which illustrates such approach in action.

 

Greetings,
Iliana Nikolova
the Telerik team

[Arindam]

You can do this using template. Currently when you bind grid you have to specify columns like this .

columns: [ { title: "Name", field: "FirstName" }]

. Here you have specify extra attribute template with a javascript function like this

template: '#=Getvalue(FirstName<br>)#' .

And in Getvalue function you can return HTML or text based on the column value [FirstName in this case]

Example : 

function LoadData() {
            $("#grid").kendoGrid({
                dataSource: ReportDataJson,
                columns: [{ title: "Email", field: "Email", template: '<a href="mailto:#=Email#">#=Email#</a>' },
                            { title: "First Name", field: "FName", template: '#=Getvalue(FName)#' }
                            ]
            });
        }
        function Getvalue(value) {
           // console.log(value);
            if (value && value != null && value.indexOf("A") == 0)
                return "<b style='color:red'>"+ value+"</b>";
            else
                return "";
        }

In this case, if first name has starting letter A , then it will be displayed in red color.

[Jun]

columns: [
{
   field: "FirstName",
title: "First Name", template: '#=Getvalue(FName)#' 
},
{
field: "LastName",
title: "Last Name"
}
],
function Getvalue(value) {
           // console.log(value);
            if (value && value != null && value.indexOf("A") == 0)
                return "<b style='color:red'>"+ value+"</b>";
            else
                return "";
        }

This doesn't work.!!

[Arindam]

You need to match the field name also. For my case it was FName for GetValue(FName) works with "template  :#=GetValue(FName) ".

But for your case it is FirstName.. So you need to this in template section. template: '#=Getvalue(FirstName)#' ... So this must work.

[Jun]

I did it, but didn't work.

<div id="example" class="k-content">
        <div id="grid"></div>
    
    <script>
$(document).ready(function() {
 var people = [
 {
FirstName: "Joe",
LastName: "Jane"
 },
 {
FirstName: "Jane",
LastName: "Jane"
     },
     {
FirstName: "Nancy",
LastName: "Leverling"
 },
 {
FirstName: "Andrew",
LastName: "Peacock"
     },
     {
FirstName: "Janet",
LastName: "Smith"
 },
 {
FirstName: "Jane",
LastName: "Buchanan"
     },
 {
          FirstName: "Margaret",
LastName: "Suyama"
 },
 {
FirstName: "Jane",
LastName: "King"
     },
 {
FirstName: "Steven",
LastName: "Callahan"
 },
 {
FirstName: "Michael",
LastName: "Jane"
     }];
var localDataSource = new kendo.data.DataSource({data: people});
 
$("#grid").kendoGrid({
dataSource: localDataSource,
  columns: [
{
   field: "FirstName",
title: "First Name" ,template: '#=Getvalue(FirstName)#' 
},
{
field: "LastName",
title: "Last Name"
}
],

});
function Getvalue(value) {
           // console.log(value);
            if (value && value != null && value.indexOf("A") == 0)
                return "<b style='color:red'>"+ value+"</b>";
            else
                return "";
        }
});
    </script>
    </div>

[Arindam]

Can you confirm me, without using template #= , this example works? Also post the errors[javascript, if you are using chrome see the console for error] you are getting. In the mean time , i will try the same thing at my end. For some quick suggestion, remove the parent div [<div id="example" class="k-content">]

[Jun]

When I use  template: '#=Getvalue(FirstName)#'  display error: Uncaught ReferenceError: Getvalue is not defined
Whe I use Getvalue('#=FirstName#') display grid as:  

First Name Last Name Jane Jane Leverling Peacock	Suyama
I need an example where FirstName='Jane' color=red, Only FirstName	King
function () {     $('td').each(function(){if($(this).text()=='Jane'){$(this).addClass('customClass')}}) } gets all words "Jane", i need only FirstName='Jane' How can do it?	Callahan
	Jane

[Arindam]

You need to define Getvalue() function outside document.ready even. That is why it showing reference error for get value. Ideally, the following code should work.

<div id="grid"></div>
    
    <script>


function Getvalue(value) {
           // console.log(value);
            if (value && value != null && value.indexOf("A") == 0)
                return "<b style='color:red'>"+ value+"</b>";
            else
                return "";
        }


$(document).ready(function() {
 var people = [
 {
FirstName: "Joe",
LastName: "Jane"
 },
 {
FirstName: "Jane",
LastName: "Jane"
     },
     {
FirstName: "Nancy",
LastName: "Leverling"
 },
 {
FirstName: "Andrew",
LastName: "Peacock"
     },
     {
FirstName: "Janet",
LastName: "Smith"
 },
 {
FirstName: "Jane",
LastName: "Buchanan"
     },
 {
          FirstName: "Margaret",
LastName: "Suyama"
 },
 {
FirstName: "Jane",
LastName: "King"
     },
 {
FirstName: "Steven",
LastName: "Callahan"
 },
 {
FirstName: "Michael",
LastName: "Jane"
     }];
var localDataSource = new kendo.data.DataSource({data: people});
 
$("#grid").kendoGrid({
dataSource: localDataSource,
  columns: [
{
   field: "FirstName",
title: "First Name" ,template: '#=Getvalue(FirstName)#' 
},
{
field: "LastName",
title: "Last Name"
}
],

});

});
    </script>
    </div>

[Jun]

Great! It works. Thanks

[Artur]

2) simple steps:

 

1) define a COLUMN template:

<script id="dataTemplate1" type="text/x-kendo-template">

                <div style="width:100%;text-align:center">
                    # if (CATCCA_PROG > 0 ) { #
                    <span class="progression ok">#: CATCCA_PROG #</span>
                    # } else { #
                    <span class="progression error">#: CATCCA_PROG #</span>
                    # } #
                </div>
                <div style="width:100%;text-align:center">#: CATCCA_CURR #</div>
            </script>

OR 

optionally, you have to define a function (can dynamically call templates based on data):

function kendoTemplate(options) {
                if (options && "name" in options) {
                    var template = kendo.template($(options["name"]).html());
                    function prototype(data) {

                         /*if (data.CATCCA_PROG < 0) {

                               template = kendo.template($("#= kendo.toString(CATCCA_PROG,'n2')#").html());

                               return template(data);

                         }*/
                        if (template) {
                            return template(data);
                        }
                    }
                    return prototype
                }
            }​

2) define using a COLUMN template inside GRID

 

$("#grid").kendoGrid({
                    autobind: false,
                    theme: "Nova",
                    dataSource: gridDataSource,
                    columns: [{
                        field: "NOMA_NAME",
                        title: "Номенклатура",
                        attributes: {
                            "class": "table-cell",
                            style: "text-aligh: right"
                        }
                    }, {
                        field: "CATCCA_CURR",
                        title: "ТО с НДС",
                        template: dataTemplate1
                    }, {
                        field: "CATCCA_LAST",
                        title: "ТО с НДС (пред.)"
                    }, {
                        field: "QTUNCA_CURR",
                        title: "Артикулы",
                        template: dataTemplate2 /* OR, dynamically: kendoTemplate({ name: "dataTemplate" })*/
                    }, {
                        field: "QTUNCA_LAST",
                        title: "Артикулы (пред.)",
                    }]
                });
            }​