Hi !

We use knockout and Infragistics. We need to expend the rows of a igHierarchicalGrid on the page load and every time that some data are refreshed. I have tried to expand the grid on the onRowsRendered event, but there is a problem because igGrid("allRows") returns an error : Uncaught Error: cannot call methods on igGrid prior to initialization; attempted to call method 'allRows'.

So we have created a new event like this :

igGrid("allRows")

ko.bindingHandlers.igGrid = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            igGrid.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var gridObj = $(element).data("igGrid");
            igGrid.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

            $(element).find("tbody").children("tr[data-grouprow!=true][data-container!=true]").map(function (i, e) {
                gridObj._trigger("rowRendered", null, {
                    owner: element,
                    row: {
                        element: $(e),
                        index: i,
                        id: $(e).data() ? $(e).data().id : null
                    }
                });
            });
        }
    };

    ko.bindingHandlers.igHierarchicalGrid.update = ko.bindingHandlers.igGrid.update;

In the HTML, I intialize the igHierarchicalGrid like this :

        <div class="grid-container"><table class="ighierarchicalgrid"
            data-bind='igHierarchicalGrid: {
           initialDataBindDepth: -1,
           autoCommit: false,
           height: "100%",
           width: "auto",
           expandCollapseAnimations: false,
           dataSource: devicesVM,
           primaryKey: "id",
           autoGenerateColumns: false,
           rowCollapsed: onRowCollapsed,
           rowExpanded: onRowExpanded,
           rowRendered: onRowRendered,
           columns: [
               {
                   headerText: "Nom",
                   dataType: "string",
                   key: "name",
                   width: "auto"
               },
               {
                   headerText: "Playout",
                   dataType: "string",
                   key: "playout",
                   width: "200px",
                  formatter : function(val) {
                         return "<div class=\"center\">" + val + "</div>";
                     }
               },
               {
                   headerText: "Publication frontal",
                   group: [
                       {
                           headerText: "Date",
                           dataType: "string",
                           key: "serverDate",
                           width: "70px",
                           formatter : function(val) {
                                   return "<div class=\"date\">" + val + "</div>";
                           }                              
                       },
                      /* {
                           headerText: "Id de publication",
                           dataType: "string",
                           key: "serverPublicationId",
                           hidden: false,
                           width: "auto"
                       },*/
                       {
                           headerText: "État",
                           dataType: "string",
                           key: "serverStatus",
                           width: "55px",
                           formatter : function(val) {
                              return "<div class=\"center\">" + val + "</div>";
                          }
                       }                                      
                   ],
                   width: "auto"
               },
               {
              headerText: "<span class=\"ui-iggrid-headertext\"><i class=\"fa fa-long-arrow-left\"></i>&nbsp;Téléchargement&nbsp;<i class=\"fa fa-long-arrow-right\"></i></span>",
              group: [
                  {
                      headerText: "Date",
                      dataType: "string",
                      key: "downloadingDate",
                      width: "70px",
                      formatter : function(val) {
                          return "<div class=\"date\">" + val + "</div>";
                      }
                  }, {
                          headerText: "Playout",
                          dataType: "string",
                          key: "downloadingPlayout",
                          width: "auto",
                          formatter : function(val) {
                              return "<div class=\"center\">" + val + "</div>";
                          }
                  }, {
                      headerText: "État",
                      dataType: "string",
                      key: "downloadingStatus",
                      width: "40px",
                      formatter : function(val) {
                          return "<div class=\"center\">" + val + "</div>";
                      }
                  }, {
                      headerText: "Info",
                      dataType: "object",
                      key: "downloadingInfo",
                      width: "40px",
                      formatter : function(val) {
                          return "<div class=\"center\">" + val + "</div>";
                      }
                  }
              ]
             }, {
                   headerText: "Appareil",
                   group: [
                       {
                           headerText: "Date",
                           dataType: "string",
                           key: "playingDate",
                           width: "70px",
                           formatter : function(val) {
                                   return "<div class=\"date\">" + val + "</div>";
                           }
                       }, {
                           headerText: "Playout",
                           dataType: "string",
                           key: "playingPlayout",
                           width: "auto",
                          formatter : function(val) {
                              return "<div class=\"center\">" + val + "</div>";
                          }
                       }, {
                           headerText: "État",
                           dataType: "string",
                           key: "playingStatus",
                           width: "40px",
                           formatter : function(val) {
                              return "<div class=\"center\">" + val + "</div>";
                          }
                       }, {
                           headerText: "Info",
                           dataType: "object",
                           key: "playingInfo",
                           width: "40px",
                          formatter : function(val) {
                              return "<div class=\"center\">" + val + "</div>";
                          }
                       }, {
                           headerText: "Écrans",
                           dataType: "string",
                           key: "playingScreens",
                           width: "70px"
                       }                        
                   ],
                   width: "auto"
               }, {
                   headerText: "Id",
                   dataType: "string",
                   key: "id",
                   width: "1px",                   
               }               
           ],
           columnLayouts : [
                   {
                    key: "variables",
                    primaryKey: "name",
                    autoCommit : true,
                    autoGenerateColumns: false,
                    columns: [
                        { key: "label", headerText: "Variable", width: "auto" },
                        { key: "value", headerText: "Valeur", width: "auto" }
                    ],
                    features:[
                        {
                            name : "Updating",
                            enableAddRow: false,
                            enableDeleteRow: false,
                            editMode: null,
                            enableDataDirtyException: false
                        }
                    ]
                }, {
                    key: "informations",
                    primaryKey: "infoId",
                    autoCommit: true,
                    autoGenerateColumns: false,
                    columns: [
                        { key: "infoId", headerText: "Id", hidden: true, dataType: "string" },
                        { key: "info", headerText: "Information", width: "auto", dataType: "string" }
                    ],
                    features:[
                        {
                            name : "Updating",
                            enableAddRow: false,
                            enableDeleteRow: false,
                            editMode: null,
                            enableDataDirtyException: false
                        }
                    ]
                }
           ],
           features:[                   
               {
                   name: "MultiColumnHeaders"
               }, {
                   name : "Updating",
                   enableAddRow: false,
                   enableDeleteRow: false,
                   editMode: "none",
               }, {
                   name: "Tooltips",
                   columnSettings: [
                       { columnKey: "serverStatus", allowTooltips: false },
                       { columnKey: "downloadingStatus", allowTooltips: false },
                       { columnKey: "playingStatus", allowTooltips: false },
                       { columnKey: "playingScreens", allowTooltips: false }
                   ]
               }
           ]}'></table></div>

In the Javascript, I run the onRowEvent like this :

        that.viewModel.onRowRendered = function(evt, ui) {
            var deviceIndex, row, $owner;
            row = ui.row;            
            if (row) {
                row.element.prop("tabindex", 0);
                $owner = $(ui.owner);
                deviceIndex = that.devicesExpanded().indexOf(row.id);
                if(deviceIndex != -1) {
                    if (!$owner.igHierarchicalGrid("expanded", row.element)) {
                        $owner.igHierarchicalGrid("expand", row.element);
                    }
                }
            }
        };

There is a Javascript error in $.widget._toggleInternalAsync line 26533 :

                popts = parentrow.closest("table").data("igGrid").options;

parentrow.closest("table") returns an empty array.

How can I fix this issue ?

Any help would be very usefull.

Regards,

Xavier