componentone wijmo grid breezejs

Question

I am trying to use the wijmogrid and databind it using breezejs.

I have attached my code below for the 4 files that I have, the index html page and 3 javascript files.

The ul in the index page runs fine and gives me the expected results, so I know that my data is being returned.

However the searchgrid is only showing the 2 column headers but no data. Can someone explain to me what I have wrong in the searchgrid code.

I am trying to learn this stuff, and have been using the BreezyDevices sample code from the breezejs website to use as a basis for the breezejs code. It all seems to be working but I can't figure out the wijmo databinding portion. I do think I could use similiar code to the ul and do a foreach on the results and build a table and then turn that table into a wijmogrid if I had to.

*** index.cshtml start ***



<ul data-bind="foreach: resultBPP">
        <li class="results">

            <form>
                <label for="fn">Field 1: </label>
                <input id="fn" type="text" data-bind="value: Field1" placeholder="first" />
                <label for="ln">Field 2: </label>
                <input id="ln" type="text" data-bind="value: Field2" placeholder="last" />

                <br />
            </form>

        </li>
    </ul>

   <table id="searchGrid" data-bind="
    wijgrid: {
        data: resultBPP,
        allowSorting: true,
        columns: [
        {dataKey: 'Field1', sortDirection: 'ascending', headerText: 'Field 1', width: 60 },
        {dataKey: 'Field2', sortDirection: 'ascending', headerText: 'Field 2', width: 60}
        ]
    }">
</table>

<!--3rd party library scripts -->
    <script src="/Scripts/jquery-1.9.0.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.0.min.js"></script>
    <script src="/Scripts/knockout-2.2.1.js"></script>
    <script src="/Scripts/q.js"></script>
    <script src="/Scripts/breeze.debug.js"></script>

    <!-- wijmo CSS and scripts -->
    <link href="~/Content/themes/aristo/jquery-wijmo.css" rel="stylesheet" />
    <link href="~/Content/jquery.wijmo-complete.2.3.5.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.wijmo-open.all.2.3.5.min.js"></script>
    <script src="~/Scripts/jquery.wijmo-complete.all.2.3.5.js"></script>
    <script src="~/Scripts/knockout.wijmo.js"></script>



    <!-- Application scripts -->
    <script src="/Scripts/app/logger.js"></script>
    <script src="/Scripts/app/dataservice.js"></script>
    <script src="/Scripts/app/bppViewModel.js"></script>
    <script src="/Scripts/app/main.js"></script>

***end of index.cshtml****


*** main.js start ****

((function (root) {
    var app = root.app;
    app.logger.info('Data is booting');
    ko.applyBindings(app.bppViewModel);
})(window));

*** end of main.js ***


*** dataservice.js start ***

var searchTable = 'SearchResults';
(function (root) {
    var breeze = root.breeze;
    var app = root.app;
    var logger = app.logger;
    var serviceName = 'api/BPP';
    var manager = new breeze.EntityManager(serviceName);
    var dataservice = {
        getSearchResults: getSearchResults
    };
    app.dataservice = dataservice;
    function getSearchResults(searchArray) {
        logger.info("querying for search results");
        var query = new breeze.EntityQuery().from('searchTable').where('searchfield', 'substringof', '1').orderBy('searchfield').take(10);
        return manager.executeQuery(query).then(function (data) {
            processResults(data, searchArray);
        }).fail(queryFailed);
    }
    ; ;
    function processResults(data, searchArray) {
        logger.success("queried all results");
        searchArray.removeAll();
        var searchResults = data.results;
        searchResults.forEach(function (searchResult) {
            searchArray.push(searchResult);
        });
    }
    function queryFailed(error) {
        logger.error("Query failed: " + error.message);
    }
})(window);

*** end of dataservice.js ****

*** viewmodel.js start ***
((function (root) {
    var app = root.app;
    var dataservice = app.dataservice;
    var vm = {
        resultBPP: ko.observableArray([]),
        hide: ko.observable(true)
    };
    getSearchResults().then(function () {
        vm.hide(false);
    });
    app.bppViewModel = vm;
    function getSearchResults() {
        return dataservice.getSearchResults(vm.resultBPP);
    }
})(window));

*** end of viewmodel.js ***

Answer 1

This was actually an issue in jQuery UI's widget factory. The factory will recursively $.extend all objects inside the options object. Therefor, when setting the Grid's data options to a Breeze data source it would walk through its entire data model and extend every object. This caused a stack overflow in JS. We had to actually hack our grid to remove the data option during init and then put it back in.

Support for breeze has been shipped in Wijmo 3.0.0b3 (Beta 3) and you can read more here: http://wijmo.com/wijmo-v3-beta-3-has-landed/ This support includes much more than just the grid fix. We have a Data API and a breeze adapter for it. So you can easily bind all of our widgets to a breeze datasource.