Getting koGrid to work with Breeze and Durandal HotTowel template

Question

I have a Durandal widget (hot towel template) containing a koGrid which I'm trying to bind to my view model.

I'm pretty new to these technologies, including async deferreds and promises, so please forgive my ignorance of such matters!

The view model gets its data from a datacontext class which simply returns the results of a Breeze entity manager query (which returns a Q promise):

 var manager = new breeze.EntityManager({ dataService: dataService });
 return manager.executeQuery(query)
            .then(function (data) {
                return data.results;
            })
            .fail(queryFailed);

In the constructor of my widget, I have:

var vm = function(element, settings) {
    var self = this;
    this.settings = settings;
    this.myData = ko.observableArray([]);

    this.viewAttached = viewAttached;       

    queryDataContext.executeQuery('Customer', 'good').then(function(ents) {

    var Item = function(id, name, maincontacttelephone) {
        this.ID = id;
        this.Name = name;
        this.MainContactTelephone = maincontacttelephone;
    };

    for (var i = 0; i < ents.length; i++) {
        self.myData.push(new Item(ents[i].ID(), ents[i].Name(), ents[i].MainContactTelephone()));
    }

    self.gridOptions = { data: self.myData };

    });
};
return vm;

function viewAttached(view) {
    $(window).trigger('resize');
    return true;
}

The data comes back in the "ents" variable, gets pushed into the observableArray myData, and that should work...however an error occurs in the koGrid file:

 /***********************************************
* FILE: ..\src\bindingHandlers\ko-grid.js
***********************************************/
ko.bindingHandlers['koGrid'] = (function () {
    return {
        'init': function (element, valueAccessor, allBindingsAccessor, viewModel,      bindingContext) {
            var options = valueAccessor();

valueAccessor() is undefined, which prevents the grid from working.

Now if I change my code which executes the remote query to:

$.when(queryDataContext.executeQuery('Customer', 'good')).then(function(ents) {

(using a jQuery promises when), it works for some reason. However the ents variable is then of type 'makePromise' which I'm not sure how to resolve.

From my understanding it's a Q promise which Breeze returns anyway, and if I use

Q.when(queryDataContext.executeQuery('Customer', 'good')).then(function(ents) {

then ents contains the data, but I'm back to the koGrid undefined problem again.

Any help much appreciated!

Answer 1

Edit : Whoops, just see you weren't talking about Kendo Grid, my bad... But you could try it anyway, that's exactly the error I was having when trying to make KendoGrid working, so you never know! Try it, it cost nothing :)

=====

Wich version of JQuery are you using? Kendo UI controls are compatible with JQuery 1.7.2 only offically. So if you are using the lastest branch of JQuery, 1.9, it is no longer working because it rely on some functions that has been deprecated in JQuery 1.9.x.

I had the same problem few weeks ago while using the Kendo UI Grid control, but there's a solution.

You must include the JQuery.Migrate plugin beside the JQuery standard one. JQuery.Migrate restore the deprecated functions to allow you to use stuff that won't work with the latest version of JQuery.

You can get the latest version of JQuery.Migrate here : http://blog.jquery.com/2013/02/16/jquery-migrate-1-1-1-released/

Hope it solve your problem :)