JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Table › Row formatting

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 4, 2023 at 3:00 am #104464
    Yaw
    Participant

    In typescript or Angular, how can I change the style or color of an entire table row based on a column value?

    All examples of conditional formating are for columns and cell, but not entire rows.

    March 7, 2023 at 10:53 am #104491
    Steven Peterson
    Participant

    Hi,

    You may use the onCellRender callback to style each row.
    The onCellRender accepts: (row: any, dataField: string, value: any, cellElement: HTMLTableCellElement)
    Here is an example: https://stackblitz.com/edit/github-qf1sqv?file=src/app/app.component.ts

    I hope this helps

    Best Regards,
    Steven Peterson

    Smart UI Team
    https://www.htmlelements.com/

    March 12, 2023 at 2:16 pm #104503
    uterere
    Participant

    Dear Steven,

    Very peculiar this solution to pass a function as a binding property.

    Anyway it does not solve an important  problem:  What to do when the information of which row must be highlighted  is external to the component.

    How to do that in Angular?

    Example: suppose you have an ajax table,

    (i) you click in a row => onClick

    (ii) save the id of the row => this.selectedId = data.id

    (iii)=> ???? =>  highlighted the entire row where row.id === this.selectedId.

    Thank you so much

    Ute

     

     

     

     

     

     

    March 13, 2023 at 4:59 am #104505
    svetoslav_borislavov
    Participant

    Hi,

    What you are saying is different to the one in the original question

    To do the desired thing please see here: https://stackblitz.com/edit/github-qf1sqv-bdtga8?file=src/app/app.component.ts

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    March 14, 2023 at 9:18 pm #104514
    uterere
    Participant

    OK, the trick was binding “this” in the template.

    “[onCellRender]=”onCellRender.bind(this)”

    Best regards
    Ute

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.