Pass Value to Template w/o Datasource

3 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 17 Jun 2015 Link to this post

    I've got a function that creates a datasource and populates a template. I'm passing a value ("group_by") into this function that controls part of how the template displays, but I'm unsure how to use it from within the template, since it doesn't exist in the datasource.


    function generateTileView(group_by) {  
        var template_html = $('#tile_template').html();
        var template = kendo.template(template_html, {useWithBlock:false});
        var datasource = new{
            transport: {
                read: {
                    url: "/Controllers/MainController.cfc?method=getItems",
                    type: "get",
                    dataType: "json"
            schema : {
                type: "json",
                data: "Items"
        datasource.bind("change", function() {
            var view = datasource.view();  
            var html = kendo.render(template, view);

    What I'd like to do in the template:

    <script id="tile_template" type="text/x-kendo-template">
        # if (group_by == 1) { #
        <div class="list-items-group-content-area ui-layout-west k-widget k-listview">
            <div class="list-items-content-area-heading padding k-block">
                <h2>Group Header</h2>
        # } #
        rest of template

  2. Rosen
    Rosen avatar
    3215 posts

    Posted 19 Jun 2015 Link to this post

    Hello shimmoril,

    In order to use the group_by as shown in the template declaration you could wrap the generated template in a function and extend the data passed in with the field you want:

    var template = kendo.template(template_html/*, {useWithBlock:false}*/);
    var datasource = new{
    datasource.bind("change", function() {
      var view = datasource.view(); 
      var html = kendo.render(function(data) {
        return template($.extend(data, { group_by: group_by }));
      }, view);

    Note that in order to access the value as in the pasted template declaration, the template should be complied with useWithBlock: true option. Otherwise, you will need to prefix the usage with data (i.e. data.group_id).

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2015 in reply to Rosen Link to this post

    Works perfectly, thanks Rosen.
Back to Top