Knockout virtualization with data bindings

[WindmillParticipant]

Hey guys,

I’ve looked at the following demo and found some problems with it: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/gridwithjson.htm?arctic.

The demo is initializing the grid with jQuery instead of Knockout data binding. This is strange practice from a MVVM point of view. As a matter of a fact, removing the ko.applyBindings call in the demo will result in a still functional grid because the initialization is bypassed completely with the jQuery initialization $(“#grid”).jqxGrid(…).

When I try to initialize a jqxGrid the supposed way for Knockout with a data binding, it loads a bunch of empty rows. Please note that I enabled the virtual scrolling and have placed a rendergridrows function. I notice that the rendergridrows is never called when debugging with Chrome.

To demonstrate these problems, I’ve adapted demo with the code below:

JavaScript:

$(document).ready(function () {

    var url = "../sampledata/beverages.txt"; 

    var GridModel = function () {
        this.items = ko.observableArray();
        var me = this;
        $.ajax({
            datatype: 'json',
            url: url
        }).done(function (data) {
            var jsonData = $.parseJSON(data);
            me.items(jsonData);
        });
    };

    var model = new GridModel();

    // prepare the data
    var source =
    {
        datatype: "observablearray",
        datafields: [
            { name: 'name' },
            { name: 'type' },
            { name: 'calories', type: 'int' },
            { name: 'totalfat' },
            { name: 'protein' },
        ],
        id: 'id',
        localdata: model.items
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    var myGridOptions = {
        width: 670,
        virtualmode: true,
        rendergridrows: function(obj) { // Execution never goes through here...
            return obj.data;
        },
        source: dataAdapter,
        columns: [
            { text: 'Name', datafield: 'name', width: 250 },
            { text: 'Beverage Type', datafield: 'type', width: 250 },
            { text: 'Calories', datafield: 'calories', width: 180 },
            { text: 'Total Fat', datafield: 'totalfat', width: 120 },
            { text: 'Protein', datafield: 'protein', minwidth: 120 }
        ]
    };

    var myViewModel = {
       jqxGridOptions: myGridOptions
    };

    ko.applyBindings(myViewModel, $('#jqxgrid')[0]);
});

HTML:
<div id="jqxgrid" data-bind="jqxGrid: jqxGridOptions"></div>

————————————————————————————————————————————————-
My ultimate question:
Why is it that the grid does not work with a data adapter and virtual scrolling when using a Knockout data binding?

[WindmillParticipant]

Bump. 🙂

[WindmillParticipant]

Double bump

[WindmillParticipant]

Triple bump

Are you guys on to something with this? I would really appreciate some help on this.

[DimitarParticipant]

Hello Windmill,

It is necessary to initialize widgets through jQuery when populating them from a data adapter, as you can also see from the demos DropDownList with DataAdapter and ListBox with DataAdapter.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[WindmillParticipant]

The grid demo that you guys provide on the website handles Knockout the same way.

Just a friendly reminder that I’ve added the link to the demo specific to the grid. I’ve adapted it to use Knockout bindings. Using bindings is the expected way to use Knockout. So please understand that for a Knockout developer, it goes against the normal framework usage.

1. Why does the grid not work with a data adapter and virtual scrolling when using a Knockout data binding?

2. Are there any plans to support the data adapter for Knockout through a binding?

[Peter StoevKeymaster]

Hello Windmill,

When you bind the Grid through DataAdapter i.e in the way my colleague Dimitar pointed you out, the Grid will work the same way as in the Virtual Scrolling and Virtual Data demos available on the Grid’s Demos page. It does not matter whether you bind it to Knockout Observable Array, JSON, XML, CSV, TSV, Array or some other supported data format. We have what we have, the demos and documentation are available on our website. The future development plans are available on our website, too. Check the Roadmap page for reference. If there is some functionality which you can’t find in the demos and documentation then this simply means that it is not implemented.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[WindmillParticipant]

Hi Peter,

I just want to point out that by binding I mean the following:
<div data-bind="jqxGrid: ..."></div

Anyway, thanks for your answer, it clears up a couple of things.

Thanks

[Author]

Posts