Template function For Grid Columns(This should be documented)

[Lorenzo Castrico]

Hello,
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.

[Richard Wilde]

Do you have an example kicking around anywhere?

[Alexander Valchev]

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

[Cosmin]

Hello,

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.
http://www.kendoui.com/blogs/archive/11-08-26/kendo_ui_templates_faster_than_a_speeding_resig.aspx 

 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,
Cosmin

[colby]

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.

[Alexander Valchev]

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.

• http://demos.kendoui.com/web/listview/mvvm.html
  
  

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.

• http://docs.kendoui.com/getting-started/framework/templates/overview
  
  

Regards,
Alexander Valchev
Telerik

[colby]

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+'">');
    }else{
        inputField = "Locked";
    }
    container.append(inputField);
}


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.

[colby]

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">';
        }else{
            return '<img src="/img/rectangle_grey.png">';
        }
};
}
});

return colSettings;
}