This is a migrated thread and some comments may be shown as answers.

Pass Value to Template w/o Datasource

2 Answers 199 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Ashleigh L
Top achievements
Rank 1
Ashleigh L asked on 17 Jun 2015, 03:20 PM

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:

function generateTileView(group_by) {  
    var template_html = $('#tile_template').html();
     
    var template = kendo.template(template_html, {useWithBlock:false});
 
    var datasource = new kendo.data.DataSource({
        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);
    });
     
    datasource.read(); 
}

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>
        </div>
    # } #
    .....
    rest of template
</script>

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 19 Jun 2015, 11:58 AM

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 kendo.data.DataSource({
       /*...*/
});
 
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).

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 19 Jun 2015, 03:12 PM
Works perfectly, thanks Rosen.
Tags
Templates
Asked by
Ashleigh L
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Ashleigh L
Top achievements
Rank 1
Share this question
or