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
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://www.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.