Grid with Durandal and knockout

[shaiMember]

Hi

I am writing a SPA using John Papa’s hot towel template which uses Durandal and Breeze. I am looking for a grid which will work with knock out. jqxgrid seemed promising but when I try to use it , Durandal binding throws an error and the grid does not render. Looks like the timing of the viewmodel binding is causing the issue. Not sure if this is a known problem. To reproduce the problem just download and include Durandal. My code is given below.

View

View Model

define([‘services/logger’, ‘dataContext’], function (logger, datacontext) {

var reportData = ko.observableArray();
var test = ko.observableArray([{ status: ‘abc’, clientName: ‘XYZ’, user: ‘u1’ }, { status: ‘abc’, clientName: ‘XYZ’, user: ‘u1’ }, { status: ‘abc’, clientName: ‘XYZ’, user: ‘u1’ }]);

function activate() {

return true;

}

//#region Internal Methods
function querystring(key) {
var re = new RegExp(‘(?:\\?|&)’ + key + ‘=(.*?)(?=&|$)’, ‘gi’);
var r = [], m;
while ((m = re.exec(document.location.search)) != null) r.push(m[1]);
return r;
}
//#endregion
var prodreport = {
activate: activate,
title: ‘Production Report’,
ReportData: test

};
return prodreport;
});

Js includes

Error

“undefined is not a function” – “views/productionreport”

[shaiMember]

Not sure whats the matter with the editor. Here is the view and the js files

JS Files

   
   <script src="/scripts/jquery-2.0.0.js"></script>
<script src="/scripts/knockout-2.2.1.debug.js"></script>
<script src="/scripts/sammy-0.7.4.js"></script>
<script src="/scripts/toastr.js"></script>
<script src="/scripts/Q.js"></script>
<script src="/scripts/breeze.debug.js"></script>
<script src="/scripts/bootstrap.js"></script>
<script src="/scripts/moment.js"></script>
<script src="/scripts/jqwidget/jqxcore.js"></script>
<script src="/scripts/jqwidget/jqxgrid.js"></script>
<script src="/scripts/jqwidget/jqxgrid.selection.js"></script>
<script src="/scripts/jqwidget/jqxgrid.edit.js"></script>
<script src="/scripts/jqwidget/jqxknockout.js"></script>

View

 <div data-bind="jqxGrid: {
                                 source: ReportData, disabled: false, autoheight: true,
                                theme: 'classic',
                                editable: true,
                                selectionmode: 'singlecell',
                                columns: [
                                    { text: 'Status', dataField: 'status', width: 200 },
                                    { text: 'User', dataField: 'user', width: 200, cellsalign: 'right' },
                                    { text: 'Client', dataField: 'clientName', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                                         ]}" id="jqxgrid">
                                            </div>
                                            <table style="margin-top: 20px;">
                                                <tbody data-bind="foreach: ReportData">
                                                    <tr>
                                                        <td data-bind="text: status"></td>
                                                        <td data-bind="text: user"></td>
                                                        <td data-bind="text: clientName"></td>
                                                    </tr>
                                                </tbody>
                                            </table>
            </div>

[shaiMember]

All right turns out the grid does work with Durandal. The reason for the error was that I was only adding the *grid*.js file along with the core file . But looks like there is a dependency on all the other widgets as well. This clearly can be refactored

[Peter StoevKeymaster]

Hi shai,

The Grid has dependency only on the widgets used in the Grid like buttons, scrollbars, lists, menu. If you missed to add references to these, it will not be able to operate.

Best Regards,
Peter Stoev

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

[shaiMember]

Hi Peter

Is that optional ..can I use my own checkbox + buttons ?

Thanks

Shai

[Author]

Posts