Log in to like this post! Adding igGrid in Durandal 2 [Infragistics] Petar Ivanov / Tuesday, September 16, 2014 This guide builds on Angel’s awesome article detailing how to add an igGrid in a Durandal SPA application: https://es.infragistics.com/community/blogs/b/angel_todorov/posts/we-ve-got-ignite-ui-grids-shining-in-a-durandal-spa-for-you Here we will implement the same scenario in Durandal 2. This example assumes Durandal’s HTML Starter Kit is used. To start with, the required scripts need to be organized in the project’s lib folder. Create a folder called infragistics and place the IgniteUI js and css folders containing all javascript and styling resources within it Create a folder called jqueryui and place the jQueryUI library (of your choosing) in it Create a folder called knockout-mapping and place the knockout-mapping.latest.js library in it. Durandal 2 assumes no global libraries. Because of that the dependencies for the IgniteUI scripts need to be explicitly defined (special thanks to Johnny Ezzell for pointing this out in Angel’s blog). Therefore the core, lob and knockout datasource and grid extension scripts are to be wrapped in: define(['knockout', 'jquery'], function (ko, $) { //--- IG code ---// }); Note that this would be needed if other individual modules are used as well. Next, the required scripts need to be added through RequireJS. The following paths and dependencies for the IgniteUI resources, knockout-mapping and jQuery UI need to be set: requirejs.config({ paths: { 'text': '../lib/require/text', 'durandal': '../lib/durandal/js', 'plugins': '../lib/durandal/js/plugins', 'transitions': '../lib/durandal/js/transitions', 'knockout': '../lib/knockout/knockout-3.1.0', 'knockout.mapping': '../lib/knockout-mapping/knockout.mapping-latest.debug', 'bootstrap': '../lib/bootstrap/js/bootstrap', 'jquery': '../lib/jquery/jquery-1.9.1', 'jquery.ui': '../lib/jqueryui/jquery-ui.min', 'infragistics.core': '../lib/infragistics/js/infragistics.core', 'infragistics.lob': '../lib/infragistics/js/infragistics.lob', 'infragistics.ds.knockout': '../lib/infragistics/js/extensions/infragistics.datasource.knockoutjs', 'infragistics.grid.knockout': '../lib/infragistics/js/extensions/infragistics.ui.grid.knockout-extensions', }, shim: { 'bootstrap': { deps: ['jquery'], exports: 'jQuery' }, 'knockout.mapping': { deps: ['knockout'] }, 'infragistics.core': { deps: ['jquery', 'jquery.ui', 'knockout.mapping'] }, 'infragistics.lob': { deps: ['infragistics.core'] }, 'infragistics.ds.knockout': { deps: ['infragistics.core'] }, 'infragistics.grid.knockout': { deps: ['knockout', 'infragistics.lob'] } } }); The IgniteUI CSS resources can be added in index.html: <link href="http://cdn-na.infragistics.com/jquery/20141/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20141/latest/css/structure/infragistics.css" rel="stylesheet" type="text/css" /> Next, the route to the igGrid view is set in the shell.js viewmodel: activate: function () { router.map([ { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true }, { route: 'flickr', moduleId: 'viewmodels/flickr', nav: true }, { route: 'iggrid', moduleId: 'viewmodels/iggrid', nav: true }, ]).buildNavigationModel(); return router.activate(); } We are now ready to add the igGrid view and viewmodel to the respective directories under the app folder. The view is the same as the one used in Angel’s sample: <section> <div class="row"> <div class="span2">div> <div class="span1" style="padding:10px;"> <input type="button" data-bind="click: buttonClick, value: buttonText"/> div> <div class="span4" style="padding:10px;"> <span data-bind="text: labelText"/> div> div> <table id="grid1" data-bind="igGrid: { dataSource: data, caption: 'Food from Heaven', primaryKey: 'id', height: 300, width: 800, features: [{ name: 'Sorting' }, { name: 'Updating' }] }">table> section> The viewmodel is also mostly unchanged, with the exception of the needed resources being listed in the define statement: define(['knockout', 'jquery', 'jquery.ui', 'knockout.mapping', 'infragistics.core', 'infragistics.lob', 'infragistics.ds.knockout', 'infragistics.grid.knockout' ], function (ko, $) { return { data: ko.observableArray([]), buttonText: "Update!", labelText: "Hit the button to update the model 'desc' value of the first record with the value of 'some custom description & watch out the grid!", buttonClick: function () { // update data (the model for the IGnite Grid) this.data()[0].desc("some custom description"); }, activate: function () { //the router's activator calls this function and waits for it to complete before proceding if (this.data().length > 0) { return; } function Item(id, desc, productName, createdDate) { return { id: ko.observable(id), desc: ko.observable(desc), productName: ko.observable(productName), createdDate: ko.observable(createdDate) }; }; var myData = [ new Item(1, "Best Italian bread", "Bread", new Date(2013, 10, 5, 1)), new Item(2, "Quaker oats for your taste", "Old Fashioned Quaker Oats", new Date(2012, 10, 5, 2)), new Item(3, "peeled and processed", "Canned tomatoes", new Date(2010, 10, 5, 2)), new Item(4, "The best tuna from Norway", "Canned Tuna", new Date(1999, 10, 5, 5)), new Item(5, "Greek olive oil", "Olive oil", new Date(2013, 10, 5, 5)), new Item(6, "heated beverage", "Hot chocolate", new Date(2011, 10, 5, 8)), new Item(7, "black beans from Guatemala", "Beans", new Date(2005, 10, 5, 6)), new Item(8, "Green Equador bananas", "Bananas", new Date(2004, 10, 5, 5)), new Item(9, "raw avocado", "Avocados", new Date(2004, 10, 5, 5)), new Item(10, "brown sugar from the Netherlands", "Brown sugar", new Date(2013, 10, 5, 4)), new Item(11, "Peru 100% cocoa", "Cocoa", new Date(2013, 10, 5, 4)), new Item(12, "Bulgarian natural honey", "Honey", new Date(2012, 10, 5, 9)), new Item(13, "Brought to you by Heinz", "Apple cider vinegar", new Date(1994, 10, 5, 7)), new Item(14, "grass-fed", "Boneless chicken ***", new Date(1998, 10, 2, 7)), new Item(15, "Salmon from Scotland", "Salmon", new Date(2013, 2, 5, 8)), new Item(16, "Uruguay's best ribeye steaks", "Ribeye steaks", new Date(2013, 3, 5, 8)), new Item(17, "turkey lean meat", "Ground turkey", new Date(2013, 4, 5, 11)), new Item(18, "fresh bio lettuce", "Lettuce", new Date(2013, 7, 5, 11)), new Item(19, "Pami peanut butter", "Peanut Butter", new Date(2014, 7, 3, 2)), new Item(20, "Fresh Asparagus", "Asparagus", new Date(2013, 10, 2, 1)), new Item(21, "raw almonds, non salted", "Almonds", new Date(2009, 8, 5, 1)), new Item(22, "White feta cheese", "White cheese", new Date(2013, 10, 5, 3)), new Item(23, "hot peppers", "Black peppers", new Date(2013, 10, 5, 6)), new Item(24, "baked and salted pumpkin seeds", "Pumpkin seeds", new Date(2013, 10, 5, 5)) ]; return this.data(myData); }, canDeactivate: function () { //the router's activator calls this function to see if it can leave the screen return app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']); } }; }); You are all set. Run the index.html and navigate to the igGrid view. As in Angel’s sample, clicking on the Update button causes the “desc” value of the first row to change to “some custom description”. igGridDurandal2.zip