Styling individual cells of grid with a template?

11 posts, 0 answers
  1. Lisa
    Lisa avatar
    1 posts
    Member since:
    May 2012

    Posted 18 May 2012 Link to this post

    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!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 19 May 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Arindam
    Arindam avatar
    11 posts
    Member since:
    Oct 2011

    Posted 09 Oct 2012 Link to this post

    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.
  5. Jun
    Jun avatar
    5 posts
    Member since:
    Jul 2012

    Posted 01 Nov 2012 Link to this post

    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.!!
  6. Arindam
    Arindam avatar
    11 posts
    Member since:
    Oct 2011

    Posted 01 Nov 2012 Link to this post

    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.


  7. Jun
    Jun avatar
    5 posts
    Member since:
    Jul 2012

    Posted 01 Nov 2012 Link to this post

    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>
  8. Arindam
    Arindam avatar
    11 posts
    Member since:
    Oct 2011

    Posted 01 Nov 2012 Link to this post

    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">]
  9. Jun
    Jun avatar
    5 posts
    Member since:
    Jul 2012

    Posted 01 Nov 2012 Link to this post

    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


  10. Arindam
    Arindam avatar
    11 posts
    Member since:
    Oct 2011

    Posted 01 Nov 2012 Link to this post

    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>
  11. Jun
    Jun avatar
    5 posts
    Member since:
    Jul 2012

    Posted 01 Nov 2012 Link to this post

    Great! It works. Thanks

  12. Artur
    Artur avatar
    1 posts
    Member since:
    Apr 2014

    Posted 22 Oct 2015 Link to this post

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

     

Back to Top
Kendo UI is VS 2017 Ready