Trouble with groupHeaderTemplate and MVVM

[Alex]

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

[Daniel]

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

[Alex]

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

[Daniel]

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