Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
65
igx-grid Responsive Row Template and Validations
posted

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:

  1. I didn't see any examples in the demos section of how to setup row validations when editing. Are there any built-in mechanisms for row validations?
  2. Is there a way to completely hide the table column headers (like [showColumnHeaders]="false") on the igx-grid?
  3. Is there any way to make the grid responsive? Where at screen sizes of < 600px, for example, all columns are hidden and a row template is used instead, which shows column values as key/value pairs (example below).
  4. Looking at the code on github I see that there are many interfaces/classes (like grid.interface.ts) that are not exposed to the public-api.ts file. Having many of those interfaces, like CellType, RowType, ColumnType, and GridType, publicly accessible is essential to our development. We want to extend them, use them for typescript typing, etc, You guys inject many services in your grid for editing, row selection, crud, etc, but don't expose them to the public-api, which makes it so we can't extend them and add our own functionality, and use them in our providers. Is this something that you guys would please evaluate exposing through the public-api.ts file? (this applies to more than just the grids, we want all interfaces).

Responsive table stacked example:

Parents
  • 1560
    Verified Answer
    Offline posted

    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

Reply Children