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:

    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. Rosen
    Admin
    Rosen avatar
    3234 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 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!
     
  3. Kendo UI is VS 2017 Ready
  4. 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