Forums Ignite UI for Angular
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
Close
Daniel Breen
35
Data Grid With Actions Cell and Linkable Text
posted

I'm trying to start utilizing igniteui for my web app.

I implemented a data grid with pagination, but I've noticed that there's no "ngFor" to loop through the data. Therefore, I can't customize the content of the rows.

Two things I want to do, but can't are to make the text in some of the cells links.

I also want to provide a column that contains actions for that row, but maybe I can use "selection" for this? The actions will be: edit and delete.

Parents
No Data
Reply
  • 320
    Offline posted

    Hello,
    Thank you for contacting Infragistics Support.

    In order for you to can customize the order of your columns and how the data is displayed inside the cell you should set the property [autoGenerate]="false" of the igx-grid. After that you should define each column in the following way:

    <igx-column field="AthleteNumber" header="Athlete Number" dataType="number">
        <ng-template igxCell let-val>              
            <a href="">{{ val }}</a>
        </ng-template>
    </igx-column>

    The field property should be the same as the key in your data source for example:

    data = [{name: "Test Name",  AthleteNumber: 10}, {name: "Test 2",  AthleteNumber: 97}];

    If you want to have a custom cell template you should define it by using igxCell directive as is shown above; If you don't set the field property, the empty column will be displayed and you can customize it's content according your needs. I am sending you a link to a sample application https://stackblitz.com/edit/angular-4cskqc; Also this links are very useful:

    https://ko.infragistics.com/products/ignite-ui-angular/angular/components/grid.html#columns-configuration

    https://ko.infragistics.com/products/ignite-ui-angular/angular/components/grid.html#crud-operations

    If you need any further assistance, please contact us.

    Best Regards,
    Desislava Dincheva
    Associate Software Developer
    Infragistics, Inc.

Children
No Data