Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom template for row selection checkbox #4998

Closed
Lightw3ight opened this issue Jun 5, 2019 · 2 comments · Fixed by #5558
Closed

Custom template for row selection checkbox #4998

Lightw3ight opened this issue Jun 5, 2019 · 2 comments · Fixed by #5558

Comments

@Lightw3ight
Copy link

Lightw3ight commented Jun 5, 2019

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 :)

@Lipata
Copy link
Member

Lipata commented 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!

@Lipata
Copy link
Member

Lipata commented Jul 31, 2019

Development:

  • Implementation
  • Merge new grid selection implementation, refactor
  • API snippets, Changlog and Grid Readme
  • Tests
    • Integration tests
  • Code Review
    • Update Specification
  • Manual test

Demos:

  1. Row numbering
  2. Excel-like row numbering
  3. Conditional row selector

Topic:

  1. Add row selector column templating row section in the selection topic

dafo added a commit that referenced this issue Aug 29, 2019
dafo added a commit that referenced this issue Aug 29, 2019
@radomirchev radomirchev added 🆕 status: new ✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged. and removed 🛠️ status: in-development Issues and PRs with active development on them 🆕 status: new labels Aug 30, 2019
@radomirchev radomirchev removed this from the Milestone 9 milestone Feb 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants