Hello team,
Requirement: I have igx data grid that displays grid data dynamically(Programmatically). As it is the same Igx grid but the data source can be generated dynamically.Please help how can i achieve the same stated above.
Hello Shobhana,
Thank you for posting into our community!
I have been looking into your question and I need to ask for some additional information. Could you please clarify how is the data displayed on your side and what do you refer to with “data source can be generated dynamically”? Do you mean that the data, respectively the columns, could be changed at some point, e.g., on button click?
Here could be found a small sample, demonstrating how the IgxGrid’s data and its columns could be changed on button click. Please test it on your side and let me know if you need any further assistance regarding this matter.
Additionally, if this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce it.
Looking forward to your reply.
Sincerely,Riva IvanovaEntry Level Software Developer
Hello Riva,
Thank u for fast reply. Can u pls tell me if i can have multiple grid in the same grid html? Instead of <igx-grid #grid1 [data] = "data"> can i have <igx-grid [grid]= "grid1" [data] = "data">Please reply.
Thank you for following up!
I have been looking into your additional question regarding having multiple grids in a single grid html template, however, what I could say is that, at this point, we do not provide this functionality out of the box. Every IgxGrid should me defined separately in the html file as this is required for the IgxGrid features like filtering, selection, column pinning, column hiding, etc., to have a specific instance of the component in order to work properly and as expected.
Additionally, could you please provide additional details regarding your requirement? Do you require, for example, having two IgxGrids, one with filtering and row selection enabled and another having an IgxPaginator and an IgxToolbar, and on a certain condition, e.g., button click, to display the first grid and on another button click to display the other one?
For such scenarios as the abovementioned one, what I could suggest is defining the IgxGrids in the html file with all required features enabled and using an *ngIf directive to display the required IgxGrid when needed.
This could be observed in the below attachment:
Here could be found a small sample demonstrating my suggestion. Please test it on your side and let me know if you need any further assistance regarding this matter.
After looking into your question, what I could suggest in order to determine whether the data is filtered is using the IgxGrid’s filteredData property which gets/sets an array of objects containing the filtered data or using the IgxGrid’s filteringExpressionsTree property and more specifically its filteringOperands property which contains an array of IFilteringExpressionsTree. If this array is empty, then no filtering is applied.
let isFiltered = this.grid.filteredData?.length > 0; // OR let isFiltered = this.grid.filteringExpressionsTree.filteringOperands.length > 0;
Please test it on your side and let me know if you need any further assistance regarding this matter.
My requirement is one set of data is filtered data and another set is non-filtered data. It is same igx grid html i am using. But how can i tell programmatically weather i am in grid with filtered data or non-filtered data.