Hello Kyle, 

Thank you for posting in  our forum! 

I tried reproducing this in an isolated sample using the code snippets you’ve provided however I was not able to replicate the behavior.

I’ve attached the sample I used to test this. Please test it on your side and let me know if you’re able to reproduce the issue.

If the sample is not an accurate representation of your scenario please feel free to modify it so that it reproduces the issue and send it back so that I may look into it. 

Have you check the browser’s console if perhaps there are any errors being thrown?

Could you let me know which version of the product you’re currently using? Also it would help if you could share the full grid definition. 

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support

Thank you for your response, I have tried a couple of things to no avail.

-added the 'ID' to each entity, and set that as the primary key.

-removed bootstrap completely from the project

-checked my dependencies being loaded in from the .angular-cli file

which are as follows :

"../node_modules/@infragistics/ignite-ui-full/css/themes/infragistics/infragistics.theme.css",
"../node_modules/@infragistics/ignite-ui-full/css/structure/infragistics.css",
"library/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"library/jquery-ui/jquery-ui.js",
"../node_modules/@infragistics/ignite-ui-full/js/infragistics.core.js",
"../node_modules/@infragistics/ignite-ui-full/js/infragistics.lob.js",
"../node_modules/@infragistics/ignite-ui-full/js/infragistics.dv.js"
],

-Could it be because I am loading in the JQuery dependencies from NodeModules?

Hello Kyle, 

Loading the jQuery and jQueryUI dependencies from Node Modules is not a problem as long as they’re loaded before the IgniteUI scripts.

Have you had the chance to check the browser’s console to see if perhaps there are any errors being thrown?

Please also let me know which version of the product you’re currently using? You can check this by opening the browsers console and executing the following code: $.ui.igGrid.version. The latest version at the moment is "17.1.20171.2009". 

In order to look into this further it would help if you could share the full grid definition – all options and settings applied to the grid. 

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support

Thanks for the reply, 

Nothing is showing in the console.

Version: 17.1.20171.1012

The full grid options are being built in the manner below, you will see a mix of ig-grid options and options for my component that wraps the grid. 

---------------------------------------------------Here is where I set up the options for the grid:

class SearchResultConfig {
constructor(actions: any, apiDataCall: any, isHierarchical: boolean, selectionCallback: any, columnDefinitions: any[], features: any[], primaryKey: string) {
this.Actions = actions;
this.ApiDataCall = apiDataCall;//<--Function
this.IsHierarchical = isHierarchical;
this.SelectionCallback = selectionCallback;//<--Function
this.PrimaryKey = primaryKey;
this.GridOptions.columns = columnDefinitions;
this.GridOptions.features = features;
this.GridOptions.dataSource = [];
}

public Actions: any;
public ApiDataCall: any;//<--Function
public IsHierarchical: boolean;
public SelectionCallback: any;//<--Function
public PrimaryKey: string;
public GridOptions: any = {
columns: [] as any[],
dataSource: [] as any[],
features: [] as any[],
autoGenerateColumns: false,
autoCommit: true
};

//Possible future stuff below
public IsGroupable: boolean;//<-- Future Implementation
public Paging: boolean;//<-- Future Implementation
public Sorting: boolean;//<-- Future Implementation
public Filtering: boolean;//<-- Future Implementation
}

------------------------------------------------------Here is where I call the above method:

case 'FacilityRecentExams':
return new SearchResultConfig([], this.examDataService.getRecentExamsByFacility, true, function () { var bob; },
[
{ headerText: "Exam Date", key: "ExamDate", dataType: "date", format: "date" },
{ headerText: "Patient Name", key: "PatientName", dataType: "string" },
{ headerText: "MRN", key: "MRN", dataType: "string" },
{ headerText: "Exam Type", key: "ExamType", dataType: "string" },//THESE ARE NOT THE CORRECT COLUMN DEFS FOR GETTING THE DOCTORS -> Exams
{ headerText: "Physician", key: "PerformingPhysicianName", dataType: "string" },
{ headerText: "Image Count", key: "ImageCount", dataType: "number" },
{ headerText: "Video Count", key: "VideoCount", dataType: "number" },
],
[
{
name: "Selection",
mode: "row",
multipleSelection: false,
touchDragSelect: false, // this is true by default
rowSelectionChanged: (evt, ui) => {
let examId = ui.row.element[0].attributes['data-id'].value;
this.router.navigate(['/ExamViewer/' + examId]);

}
},
{
name: 'GroupBy',
type: 'local',
columnSettings: [
{
columnKey: "PerformingPhysicianName",
isGroupBy: true,
allowGrouping: true
},
{
columnKey: "ImageCount",
isGroupBy: false,
allowGrouping: false
},
{
columnKey: "VideoCount",
isGroupBy: false,
allowGrouping: false
},
{
columnKey: "ExamType",
isGroupBy: false,
allowGrouping: false
},
{
columnKey: "MRN",
isGroupBy: false,
allowGrouping: false
},
{
columnKey: "PatientName",
isGroupBy: false,
allowGrouping: false
},
{
columnKey: "ExamDate",
isGroupBy: false,
allowGrouping: false
}

]
}
],
'ID'
);

-----------------------------------------This is how the angular component actually implements the options given to it:

<ig-grid *ngIf="!searchResultConfig.IsHierarchical" [options]='searchResultConfig.GridOptions' [widgetId]='12' [primaryKey]="searchResultConfig.PrimaryKey"></ig-grid>

- Kyle Horton

Thanks for the help btw Maya 

Hello Kyle , 

I tried reproducing this issue in an isolated angular sample based on the code you’ve provided, however I haven’t been able to replicate this.

I’ve attached the sample I used to test this. Please test it on your side and let me know if you’re able to replicate the issue (npm install to install dependencies + npm start to start the sample).  

Based on the screenshot it looks like what is rendered is a igHierarchicalGrid, however it seems like you’re instantiating a normal igGrid (<ig-grid>).

Is there perhaps an instance of an igHierarchicalGrid (<ig-hierarchical-grid >) somewhere else on your page with different options enabled for it? 

If the attached sample is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one. 

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support

ahhh I found it out Maya, your example got me thinking about how we are instantiating the grid with/without data.

When I would create the grid with the dataSource being an empty array and had groupBy columns set. The grid would die.

The fix was to expand my *ng-if

from *ngIf="!searchResultConfig.IsHierarchical"

to *ngIf="!searchResultConfig.IsHierarchical && searchResultConfig.GridOptions.dataSource.length > 0"

It appears the groupBy sets itself up using the initial data.

Is there a better way I should be telling the grid to get the data so it knows not to set up the groupBy yet?

-Kyle Horton

Great thank you Maya!