Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
George Hunot
1285
igGrid with Hot Towel/Durandal SPA app
posted

Does anyone have any experience integrating Infragistics Ingite UI controls (specifically the igGrid) into a Hot Towel/Durandal SPA application?

I've integrated this ig sample in a basic Hot Towel application using the Knockout extensions:

http://ko.infragistics.com/products/jquery/sample/grid/grid-knockoutjs-integration

It works with a simple binding, such as:

View:

View:

<table id="grid" data-bind="igGrid: { dataSource: gridData, autoGenerateColumns: false, columns: [ { headerText: 'Product Name', key: 'Name', dataType: 'string' } ]}"> </table>

VM:

define(['services/logger'], function (logger) { var vm = { activate: activate, title: 'Details View', gridData: adventureWorks // Points to ig's JSON sample data }; return vm; //#region Internal Methods function activate() { return true; } //#endregion });

This works fine and renders the grid. However, I get an error as soon as I add any features into the binding, eg:

<table id="Table1" data-bind="igGrid: { dataSource: gridData, autoGenerateColumns: false, features: [ { name: 'Sorting', type: 'local' } ], columns: [ { headerText: 'Product Name', key: 'Name', dataType: 'string' } ]}"> </table>

The error is "["Cannot call method '_injectGrid' of undefined", "views/details", Object]".

I'm using the jQuery.Migrate library (as ig still references 1.7 and Durandal wants 1.9), and have this to load the dependent ig scripts:

$.ig.loader({ scriptPath: "../App/Infragistics/js/", cssPath: "../../Content/", resources: "igGrid.*,extensions/infragistics.datasource.knockoutjs.js,extensions/infragistics.ui.grid.knockout-extensions.js" });

Incidentally I have tried using the 'traditional' jQuery (ie non-KO) API for creating the grid and I get even more problems!

Sample app attached (as link). Any help greatly appreciated.

Parents
No Data
Reply
  • 23953
    Offline posted

    Hello George,

    An alternative solution (which is not using Knockout) to what is proposed here: http://stackoverflow.com/questions/15978482/infragistics-ignite-ui-grid-with-hot-towel-durandal-spa-app is to create the grid in the viewAttached view model callback.

    Here is an example code:

    VM:

    define(['services/logger'], function (logger) {
    var vm = {
    activate: activate,
    title: 'Details View',
    viewAttached: viewAttached
    };

    return vm;

    //#region Internal Methods
    function activate() {
    logger.log('Details View Activated', null, 'details', true);
    return true;
    }

    function viewAttached() {
    $("#grid1").igGrid({
    dataSource: [/*some data*/],
    width: 700,
    autoGenerateColumns: false,
    primaryKey: 'ProductID',
    autoCommit: false,
    columns: [
    { headerText: 'Product ID', key: 'ProductID', dataType: 'number' },
    { headerText: 'Product Name', key: 'Name', dataType: 'string' },
    { headerText: 'SellStartDate', key: 'SellStartDate', dataType: 'date', }
    ],
    features: [
    {
    name: 'Sorting'
    }
    ]
    });
    }
    //#endregion
    });

    View:

    <section>
    <h2 class="page-title" data-bind="text: title"></h2>
    <table id="grid1"></table>
    </section>

    Hope this helps,
    Martin Pavlov
    Infragistics, Inc. 

Children