Template function For Grid Columns(This should be documented)

8 posts, 0 answers
  1. Lorenzo Castrico
    Lorenzo Castrico avatar
    13 posts
    Member since:
    Jul 2007

    Posted 25 Feb 2012 Link to this post

    I'm posting something that should be highlighted in the documentation.
    A great feature i discovered playing with the source code.
    You can assign, not only a string to a COLUMN.template ( es. #= column_a # ) , but also a function.
    This function has a parameter that is the current-row data item.
    So no need for complicated strings, escaping, conditional clause inside strings...
    Just put your logic in this function and return just the formatted value
    You can even return the classic string template that is parsed by the kendo template engine.

  2. Richard Wilde
    Richard  Wilde avatar
    14 posts
    Member since:
    Jul 2009

    Posted 06 Mar 2012 Link to this post

    Do you have an example kicking around anywhere?
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Alexander Valchev avatar
    2877 posts

    Posted 07 Mar 2012 Link to this post

    Hello Vincenzo,

    Thank you for the nice words.
    Indeed the possibility to use JavaScript code inside the template definition is mentioned in our demos.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Cosmin
    Cosmin avatar
    2 posts
    Member since:
    Jun 2012

    Posted 08 May 2012 Link to this post


    Can I use jquery templates instead of kendo templates?

    It is not clear from the documentation how the template property works for a column.
    Can you please point me to a page that describes how to use this property in a "non obtrusive" manner?

    I am building my grid columns from code as JSON and returning them to an ajax call that takes them and creates the grid.

    I do not have to go and write html into code for template columns, I would like to be able to specify something like the template name if possible.

    Is there a way to do something like this?

    LE: It seems that you can and is supported.

     I only wish for a more "all in one place" documentation of these features. 
     Is there something like a controls reference documentation that we get if we buy a license?

    Thank you,
  6. colby
    colby avatar
    3 posts
    Member since:
    Jul 2013

    Posted 31 Oct 2013 Link to this post

    None of the document examples linked show how to build a template which uses data within the dataSource. e.g.  Based on whether a data field contains a true or false value, I want to insert an icon.

    Instead they should how to insert external data without any consideration for the data within the field the template is made for.
  7. Alexander Valchev
    Alexander Valchev avatar
    2877 posts

    Posted 01 Nov 2013 Link to this post

    Hi Colby,

    The DataSource is intended to be used with Kendo UI widgets. It is easier to bound a simple template to Observable array as shown in the source and template MVVM example.

    In case you prefer to use DataSource and template please consider using the ListView widget which will simplify the configuration code.
    Kendo templates allow JavaScript execution which will let you to insert an icon based on a data field value. In the templates overview help topic you will find code samples which demonstrate conditional rendering.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. colby
    colby avatar
    3 posts
    Member since:
    Jul 2013

    Posted 01 Nov 2013 Link to this post

    Thanks for this info.  The observable array looks very interesting indeed.  Forgive me if your examples answer my question and the only way for me to achieve what I want is by redoing my page, but here is my conundrum:

    I built a custom inline editor which was quite easy to work with.

    columnSettings[key].editor = customInlineEditor; //attach a function call to the editor property of a column setting.

    function customInlineEditor(container, options){
        var currentField = options.field;
        var inputField;
        if(options.model[currentField] === true){
            inputField = $('<input type="checkbox" data-value-field="'+currentField+'" name="'+currentField+'" checked>');
        }else if(options.model[currentField] === false){
            inputField = $('<input type="checkbox" name="'+currentField+'">');
            inputField = "Locked";

    In this example I have access to the data field from which the function is called.  I would like to follow the same style for my template, but it seems there is no way of knowing from which field the function is called.  When template function is called there is only one parameter with the entire row of data.
  9. colby
    colby avatar
    3 posts
    Member since:
    Jul 2013

    Posted 01 Nov 2013 Link to this post

    I found a way!  This relies upon some javascript magic in which a function has access to the environment in which it was defined.

    So I have some javascript which is going to take the current column settings array which is predefined in some of our server code and add some custom templating which takes into account some predefined fields and checks their value and based on that value returns one of three images. 

    function buildIconTemplates(colSettings){
        var editableColArray = ["RQ", "RR", "ER", "CO", "CA", "CU", "EU", "RP", "CJ", "CQ", "AR", "DR"];

        $.each(colSettings, function(key, value){
            if($.inArray(value.field, editableColArray) != -1){
                colSettings[key].template = function(dataItem){
            if(dataItem[value.field] == true){
                return '<img src="/img/rectangle_green.png">';
            }else if(dataItem[value.field] == false){
                return '<img src="/img/rectangle_red.png">';
                return '<img src="/img/rectangle_grey.png">';

    return colSettings;
Back to Top
Kendo UI is VS 2017 Ready