Hello Zach,

I am glad I was able to assist you regarding this matter.

Thank you for using Infragistics components.

Sincerely,
Riva Ivanova
Software Developer

Hello Zach,

Thank you for posting in our community!

I have been looking into your question and noticed that a similar behavior has already been logged in our GitHub repository here and there are pending PRs targeting it. Once the PRs are reviewed and merged, the fix will be introduced in a future version of the product.

In order to receive a notification whenever new information is available, please make sure that you are subscribed to the issue. This can be achieved via the “Subscribe” button.

Please let me know if you need any further information on the matter.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Software Developer

Hello Vignesh,

Thank you for your clarifications!

Regarding rendering a vertical scrollbar when the IgxGrid height is not set explicitly (meaning that it defaults to 100%), as mentioned in our Sizing topic here:

When the height input is set to percentages the IgxGrid will size based on the parent element height. If the parent element has its height set in pixels or percentages, the grid will size relative to the size of the parent.

When the parent element does not have defined height, the browser does not assign height to it initially and sizes it based on its children and their size. That is why there is no way for the grid to know what base height to use in order to apply percentage sizing based on it. For this reason, it will render a maximum of 10 rows and if there are more rows, a vertical scrollbar will be rendered. Otherwise, the grid will fit to the number of rendered rows.

Also, the size of the data chunks is also determined by the row height for the vertical (row) virtualization (reference).

Having this in mind, if the IgxGrid has enough data chunks to fit the available space and exceed it, then a vertical scrollbar will be rendered as could be observed in the previously attached sample.

Additionally, I would suggest referring to our Sizing and Virtualization topics as they provide a detailed explanation along with examples demonstrating how the horizontal and vertical virtualization is enabled.

To conclude, as I not sure of the overall configuration of your application, if any custom styling regarding the height is applied, what is the data structure, etc., and the isolated sample seems to work as expected, this may indicate that the described behavior is local to your own project configuration and environment.

Nevertheless, it is hard to provide any suggestion as the behavior is not reproducible on my side and in order to assist you further, I would encourage you to try and reproduce this behavior in a small working sample.

This would be the best approach to investigating this matter further in a timely manner.

Sincerely,
Riva Ivanova
Associate Software Developer

Hello Vignesh,

Thank you for posting in our community!

I have been looking into your question and what I can say, as mentioned in our Sizing topic here, is that a horizontal scrollbar will be rendered if the combined width of all columns is bigger than the actual IgxGrid width.

From the provided code snippet I can see that the combined width of the columns equals 1700px (100 + 50 + 1300 + 250), however, the IgxGrid width is not set which means that it will default to 100% and will try to fill the available space as per our documentation here. Additionally, as mentioned in our Percentages section here, if we set the grid width input to 100% and there is no parent element it will fill 100% of the available width of the browser window.

Having this in mind, if the <div class="col-12 p-1 flex-column first_child flexContent1"> or <div class="location-grid"> do not have a width CSS property set to a value less than 1700px (the combined width of the columns) and the browser window is greater than 1700px, then it is expected that no horizontal scrollbar is rendered.

Here could be found a small sample where I have placed the IgxGrid in a parent div element which has width and height set to 500px. The IgxGrid itself does not have any width or height set and will size relative to the parent div element which means that the final width and height of the grid will be 500px.

Additionally, the combined width of the columns is 1100px which exceeds the width of the IgxGrid (500px) and results in a horizontal scrollbar being rendered.

Please test it on your side and let me know how it behaves.

To conclude, as the isolated sample seems to be working correctly and both horizontal and vertical scrollbars are rendered, it is hard to tell what the possible reason for this behavior might be.

Having this in mind, in order to assist you further, it would be helpful if you could provide me with a small sample that demonstrates the behavior on your side. Also, if possible, it would be great if you could try and modify the provided by me sample, so it reproduces the issue.

Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that are not directly related to the issue, zip your application, and attach it in this forum thread.

Thank you for your cooperation. Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer

Hello Peru,

Thank you for following up!

I am glad that you found the root cause of this behavior.

Additionally, regarding your additional questions, what I could say is that Ignite UI for Angular is based on the Material Design System and respectively uses the Material Design icons. Having this in mind, in order to use the icons, the icon set should be referenced in the project, i.e.,

However, another approach I could suggest is self-hosting the icon set in your project and I believe that your will find the following section here quite helpful on this matter.

Furthermore, regarding the following line of code, i.e.,

what I could say, as mentioned in our documentation here, is that we have selected Titillium Web to be the default font for the Material Theme in Ignite UI for Angular and in order to use it you have to host it yourself, or include it from Google Fonts. I believe that you will find the following topic here quite helpful as it demonstrates how to host the web fonts on your own server.

By default, when installing the ignteui-angular package via the ng add command, the following configuration is included automatically.

index.html

    ...
    
    


    

Regarding your last question,

[quote user=”E9438D211DF97DA5D703ACD7EE58F4187005AA1E”][/quote]

also how is  this packaged used by infragistics

 "@igniteui/material-icons-extended": "^2.10.0",

what I could say is that the Ignite UI Material Icons Extended is a subset of icons that extends the material icon set by Google. More information along with code snippets demonstrating how to use this package could be found in our Material Icons Extended topic here. Another useful resource I could suggest is the GitHub repository that could be found here.

Please let me know if you need any further information regarding this matter.

Sincerely,
Riva Ivanova
Associate Software Developer

Hello Peru,

Thank you for posting in our community!

I have been looking into your question and in an effort to reproduce the described behavior I have prepared a small sample from scratch by following our Getting started topic here and enabling some IgxGrid features, i.e., filtering, sorting, etc., by using the Ignite UI CLI and the add command as demonstrated in the following topic here.

ng new igxApp –style=scssng add @infragistics/igniteui-angular (installed the latest supported version 16.0.12)ig add (added custom grid with sorting, filtering, grouping, etc)

On my side, I was not able to reproduce the described behavior and when running the project, the IgxGrid along with the features’ icons were displayed successfully and as expected. This could be observed in the attachment below:

Attached could be found my sample for your reference. Please test it on your side and let me know how it behaves.

Additionally, in order to assist you further, it would be highly appreciated if you could provide me with a small sample that demonstrates the behavior on your side.

Having a sample that I could debug on my side will be extremely helpful in further investigating this matter and providing you with a solution as soon as possible.

Thank you for your cooperation. Looking forward to your reply.

Sincerely, Riva Ivanova Associate Software Developer

0753.igxApp.zip

Attachments:

1. 0753.igxApp.zip

Hello Daniel,

Thank you for following up!

After further investigating this matter, I need to ask for some additional information to ensure that your question is addressed correctly.

1. Could you please clarify what do you refer to with “selection of items”? Do you mean that there should be multiple selection of the predefined values?
2. Should the appearance and functionality be similar to the igCombo?

Additionally, in case the filtering should be performed by multiple selection of values, what I could suggest is creating a custom combo editor provider for the filter cell. This is achieved by extending the igEditorProvider class and setting your own editor to filter the igGrid content.

More useful information along with code snippets could be found in our Implementing Custom Editor Provider topic here.

Additionally, a working sample illustrating how to use EditorProviderCombo to customize the filtering fields can be found here.

Please test it on your side and let me know if it is an accurate demonstration of what you are trying to achieve.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Associate Software Developer