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:
<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.
Sorry for such a slow reply. I am still having issues with this, but it looks like Durandal integration has been looked into, as per this blog post:
http://ko.infragistics.com/community/blogs/angel_todorov/archive/2013/08/02/we-ve-got-ignite-ui-grids-shining-in-a-durandal-spa-for-you.aspx
Hopefully this will sort it, although I note the service release mentioned in which this fix is applied is not yet available. Any chance I can get my hands on it sooner?!
Hi Vivian,
I'm trying out your sample but there are some reference errors. I tried to install missing packages like breeze but still have wrong version error with "WebGrease" Could you include the reference dlls in your sample?
Thanks!
Hi,
Are all Infragistics related scripts need to be at certain location?
Could you provide a quick sample how to get this work?
Does this mean that in Hottowel like structure, knockout can't be used with Infragistics control?
I'm trying to use IG controls in Single Page App using Durandal and knockout. Any help from IG team?
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:
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});
<section> <h2 class="page-title" data-bind="text: title"></h2> <table id="grid1"></table></section>
Hope this helps,Martin PavlovInfragistics, Inc.
Hello Christian,
Please let me know if you have any questions