Hi Pratibha,

For this issue I have made certain assumptions, that being it is your plan to implement the igHierarchicalGrid in a project that uses the Durandal Hot Towel Template.

I would like to however take a moment to confirm that using the Hot Towel Template is indeed the approach you are aiming to take. I ask this as while your project begins to implement the Hot Towel Template, when viewing your details.html, for example, it can be seeing that you are not using the Durandal MVC functionality but appear to be binding the grid in the standard way:

<section class="main-box">            

<table id="grid1">

</table>          

</section>

If you are intending to use the Durandal Hot Towel Template for your project, I can refer you back to the following resources:

Hi Pratibha,

I finalized an example you can reference that implements the igHierarchicalGrid into the Hot Towel template. As you review this example you will find that I have the js file (igHierarchicalGrid.js) in my App/ViewModels folder. It is here that create my Knockout ObservableArray:

      activate: function () {

            //the router's activator calls this function and waits for it to complete before proceding

            if (this.data().length > 0) {

                return;

            }

            var northwindObservableCategories = {

                data: ko.observableArray(

                    [

                        {

                            CategoryID: ko.observable(1),

                            CategoryName: ko.observable("Beverages"),

                            Description: ko.observable("Soft drinks, coffees, teas, beers, and ales"),

                            Products: ko.observableArray(

                                [

                                    {

                                        ProductID: ko.observable(1),

                                        ProductName: ko.observable("Chai"),

                                        CategoryID: 1,

                                        QuantityPerUnit: "10 boxes x 20 bags",

                                        UnitPrice: 18.0000,

                                        UnitsInStock: 39,

                                        UnitsOnOrder: 0,

                                        ReorderLevel: 10,

                                        Discontinued: false

                                    },

                                …. Etc

};

……           
return this.data(northwindObservableCategories.data())

};   

})

I then have the corresponding html file (igHierarchicalGrid.html) that resides in the App/Views folder

    <table id="hierarchicalGrid" data-bind="igHierarchicalGrid: {

            dataSource: data,

            primaryKey: 'CategoryID',

            autoGenerateLayouts: false,

            columnLayouts: [

                {

                    key: 'Products',

                    primaryKey: 'ProductID',

                    foreignKey: 'CategoryID',

                    features: [

                        {

                            name: 'Updating',

                            editMode: 'cell',

                            enableDataDirtyException: false,

                            enableDeleteRow: false,

                            enableAddRow: false

                        }

                    ]

                }

            ],

            features: [

                {

                    name: 'Updating',

                    editMode: 'cell',

                    enableDataDirtyException: false,

                    inherit: false

                }

            ]

        }"></table>   

Hi Pratibha,