Styling individual cells of grid with a template?

3 Answers 3500 Views
Grid
Lisa
Top achievements
Rank 1
Lisa asked on 18 May 2012, 05:02 PM
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!

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 19 May 2012, 04:20 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Arindam
Top achievements
Rank 1
answered on 09 Oct 2012, 02:37 PM
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
Top achievements
Rank 1
commented on 01 Nov 2012, 01:44 PM

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
Top achievements
Rank 1
commented on 01 Nov 2012, 02:06 PM

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
Top achievements
Rank 1
commented on 01 Nov 2012, 03:24 PM

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
Top achievements
Rank 1
commented on 01 Nov 2012, 03:43 PM

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
Top achievements
Rank 1
commented on 01 Nov 2012, 04:00 PM

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
Top achievements
Rank 1
commented on 01 Nov 2012, 04:08 PM

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
Top achievements
Rank 1
commented on 01 Nov 2012, 04:25 PM

Great! It works. Thanks

0
Artur
Top achievements
Rank 2
answered on 22 Oct 2015, 11:58 AM

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: "Артикулы (пред.)",
                    }]
                });
            }​

 

Tags
Grid
Asked by
Lisa
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Arindam
Top achievements
Rank 1
Artur
Top achievements
Rank 2
Share this question
or