GroupHeader Cell Style / cssClass

Posted by: hoang.nguyen on 29 August 2018, 8:22 am EST

    • Post Options:
    • Link

    Posted 29 August 2018, 8:22 am EST

    I am trying to add a class to a cell in groupHeader through formatItem() but it does not work:

    This is my css:

    .level0:not(.wj-state-selected):not(.wj-state-multi-selected) {

    background: #FFCC99 !important;

    color: #666666 !important;

    font-weight: normal !important;

    }

    .level_0:not(.wj-state-selected):not(.wj-state-multi-selected) {

    background: #FFCC99;

    color: #0066CC !important;

    text-decoration: underline !important;

    cursor: pointer !important;

    font-weight: normal;

    }

    This is my loadedRows()

    loadedRows(s: wjGrid.FlexGrid): void {

    for (let i = 0; i < s.rows.length; i++) {

    if (s.rows[i].hasChildren) {

    s.rows[i].cssClass = ‘level0’;

    s.rows[i].align = ‘right’;

    }

    }

    }

    this is my formatItem:

    formatItem(s: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs): void {

    if (e.panel === s.cells && e.col === 0 && s.rows[e.row] instanceof wjGrid.GroupRow) {

    if (s.rows[e.row].dataItem.groupDescription.propertyName === ‘ProjectManager’) {

    e.cell.classList.replace(‘level0’, ‘leve_0’);

    }

    }

    I have also tried to change cell.style in formatItem instead of e.cell.classList.add()

    e.cell.style.textDecoration = ‘underline’;

    e.cell.style.color = ‘#0066CC’;

    e.cell.style.cursor = ‘pointer’;

    or

    e.cell.style.textDecoration = ‘underline !important’;

    e.cell.style.color = ‘#0066CC !important’;

    e.cell.style.cursor = ‘pointer !important’;

    I have inspected element through console log and what I see is class “level0” is still existing and class “level_0” is no where to be found. What am I doing wrong here? Thank you very much.

  • Posted 29 August 2018, 4:44 pm EST

    Hi,

    Thanks for the code snippet.

    Everything in the code snippet seems to be fine. The issue might be with the use of classList.replace() method. If your using IE then replace() is not supported at all, also chrome supports replace() method for version > 61.

    Refer to this doc for a complete list of supported browsers:-

    https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/replace

    Please confirm that your browser supports DOMTokenList.replace() method.

    To be on safe side use addClass()/removeClass() method provided by Wijmo.

    Please refer to the following sample for the same:-

    https://stackblitz.com/edit/angular-8zjyeq?file=app%2Fapp.component.ts

    Please let us know if the issue persists for you.

    ~Sharad

  • Posted 30 August 2018, 3:45 am EST

    Thank you Sharad very much.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels