I'm evaluating purchasing Ignite-ui for a project that my company is working on, and I have a few questions about the igx-grids:
Responsive table stacked example:
Hello,
I have been looking into your questions and what I could say regarding the first one is that validating rows should be handled entirely on application level using the exposed grid editing events.
Regarding the second question an approach I could suggest in order to hide the column headers is to set the display attribute of igx-grid-header-row to 'none':
:host { ::ng-deep { igx-grid-header-row { display: none; } } }
A small sample that demonstrates this approach could be found here.
Regarding the third question, in order to achieve your requirement, my suggestion is to use the igxCell directive and based on the grid's width you could define a different template. Also, via the exposed column's hidden property you could hide or show a certain column based on the grid's width or some other conditions. I have prepared a small sample that demonstrates how such behavior could be achieved and it could be found here. Please test it on your side and feel free to modify or style it based on your requirements.
Another possible approach to determine the grid’s size within the ts file would be using the ResizeObservable. In general, both approaches should be implemented entirely on application level.
In addition, more about grid templates could be found here.
Regarding your last question what I could say is that in order to keep the public API simpler for using and understanding we do not expose all services, interfaces or methods which we are using for implementing the build-in functionality. Using the already exposed properties gives you the opportunity to implement different requirements and scenarios without breaking the functionality of the components.
Also, from version 12.1.0 IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent are no longer exposed in the public API. Instead, a new class IgxGridCell replaces all of these. It is a facade class that exposes only the public API of the above mentioned and CellType is the interface implemented by IgxGridCell, so you could use it as well as RowType, etc. for typescript typing. For example, the following is a completely valid code:
const rows: RowType[] = this.grid1.allRows();
Additionally, please keep in mind that according to our support policy we handle a single question per case. This is for better consistency and history tracking.
If you require any further assistance on the matter, please let me know.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
With the cell.rows.cells property in the example for a stacked layout, is there anyway to get access to the parent IgxGridCellComponent for each cell? There is a getter called template that I would really love to use in an ngTemplateOutlet, so that I could just show the cellTemplate/cellEditTempalte for each column. I would use the cellTemplate property on the cell.column, but that wouldn't exist for columns that are using the default template. I want to be able to use this layout for grid editing as well, if possible.
In order to consider exposing some of the private interfaces, I can suggest is submitting a new feature request in our GitHub repository here. Any concerns or questions that you have can be directly addressed in the issue, which will give you the opportunity to directly communicate with our development team.
In addition, in order to set a template to the cells via their column, I could suggest using the exposed on column-level bodyTemplate(when a cell is not in edit mode) and inlineEditorTemplate(when the cell is in edit mode) properties.
Also, a topic that outlines the possible approaches to re-template the column headers and cells could be found here.
Let me know if I may be of any further assistance.