Description
Is your feature request related to a problem? Please describe.
My company is adopting the grid from ignite-ui but we already have our in-house component library based on our own design system.
For the most part, the API of the grid allows us to use our own templates with our own components.
There are a few holes however and one in particular is when you set [rowSelectable]="true"
on the grid, it shows an ignite-ui checkbox in both the header and on each row.
I would like to request some way of providing my own templates for the header/rows
Describe the solution you'd like
I would like to be able to specify a custom template, something like below
<igx-grid>
<ng-template igxSelectionColumnTemplate let-context="context">
<input [checked]="context.selected" (change)="context.selected = $event.target.checked" type="checkbox" />
</ng-template>
</igx-grid>
Describe alternatives you've considered
The only alternative I can see at the moment is to create a custom column and make it work like the selection column
Additional context
Some other places where Im having similar issues
- Icons such as the sort icon (We have our own icon library)
- Some of the filtering stuff
- Its a little difficult to template the header because of how the filter icon works, I have had to result to targeting some of your css classes which isnt ideal
Incidentally, this is my current solution, using a standard column component
<igx-column>
<ng-template igxHeader>
<my-checkbox-input [checked]="allSelected" (checkedChange)="onSelectAllClick($event)">
</my-checkbox-input>
</ng-template>
<ng-template igxCell let-cell="cell">
<my-checkbox-input [checked]="cell.row.isSelected" (checkedChange)="onRowSelectClick(cell, $event)">
</my-checkbox-input>
</ng-template>
</igx-column>
And it works, however I noticed that cell.row.isSelected
specifically isSelected
is marked as hidden which makes me a bit nervous to use it :)
Activity
Lipata commentedon Jun 6, 2019
@Lightw3ight We will discuss the implementation of such a feature and will keep you posted. There isn't a reason why
isSelected
is hidden, so we can easily expose it in the documentation.Will it be a problem to log the requests inside the Additional Context section into separate issues so that they get specific answers? Thank you in advance!
11 remaining items
test(custom-selectors): update initial specs #4998
test(grid): Adding igxGrid selection tests #4998
test(grid): Adding a selection test #4998
test(grid): Removing a fit #4998
test(hGrid): update test scenarios #4998
refactor(hGrid): move click handler to div; add markForCheck #4998
feat(grid): row selection templating #4998