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

Trouble with groupHeaderTemplate and MVVM

3 Answers 38 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 2
Alex asked on 07 Mar 2014, 08:15 PM
Hi,

I have the grid and the model below. Everything works but getSum, I get a "getSum is not defined" error. Any idea?

    <div class="k-widget" 
      data-role="grid"
      data-bind="source: nbh"
      data-columns="[{title: 'Tâche', field: 'task'}, {title: 'Heures', field: 'hours', width: '125px', format: '{0} h', aggregates: ['sum'], 
        footerTemplate: 'Total: #= data.hours? data.hours.sum: 0 # h'}, {title: 'Personnelle', field: 'personal', hidden: true, 
        groupHeaderTemplate: '#= value? \'Projets\':\'Tâches personnelles\'# (#= getSum(value) # h)'}]">
    </div>

bound to this model:

        var model = kendo.observable({

            nbh: new kendo.data.DataSource({
                aggregate: [{ field: "hours", aggregate: "sum" }]
            }),

            getSum: function (value) {
                var datasource = this.nbh;
                var result;
                //loops through the dataSource view
                $(datasource.view()).each(function (index, element) {
                    //compares view value with the current template value
                    if (element.value === value) {
                        result = element.aggregates.hours.sum; //gets the aggregate value
                    }
                });

                return result;
            }

        });

Thanks,

Alexis

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 11 Mar 2014, 01:24 PM
Hello Alexis,

The grid template will not be called in the context of the ViewModel so you should use the method full name:
#= model.getSum(value) #


Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 2
answered on 11 Mar 2014, 05:57 PM
Hi Daniel,

The declaration of the grid is in a template and has no knowledge of the javascript code, except what's available in the model (through the bind method). Why groupHeaderTemplate cannot access the variables/methods declared in the model?

Regards,

Alexis
0
Daniel
Telerik team
answered on 13 Mar 2014, 11:41 AM
Hello again Alexis,

The grid which is the one that renders the template has currently no knowledge that it has been initialized via MVVM. Therefore the template will not be rendered in the context of the model object and so getSum will not be available. If you do not wish to use the ViewModel variable in the template then you should move the function out of the ViewModel in order to avoid the error:
function getSum(value) {
    var datasource = model.nbh;
    var result;
    //loops through the dataSource view
    $(datasource.view()).each(function (index, element) {
        //compares view value with the current template value
        if (element.value === value) {
            result = element.aggregates.hours.sum; //gets the aggregate value
        }
    });
  
    return result;
}
  
var model = kendo.observable({
    nbh: new kendo.data.DataSource({
        aggregate: [{ field: "hours", aggregate: "sum" }]
    })
});




Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Alex
Top achievements
Rank 2
Answers by
Daniel
Telerik team
Alex
Top achievements
Rank 2
Share this question
or