How to fix [Deprecation] Listener added for a synchronous 'DOMNodeInserted'

Posted by: toai.72429 on 17 December 2023, 8:15 pm EST

    • Post Options:
    • Link

    Posted 17 December 2023, 8:15 pm EST - Updated 17 December 2023, 8:20 pm EST

    [code][quote=toai.72429]

    <wjGrid.FlexGrid

    id=‘grid-main-content’

    initialized={initializeGrid.bind(this)}

    itemsSource={this.props.dataGrid.Data}

    allowMerging=“All”

    autoGenerateColumns={false}

    headersVisibility=‘Column’ //hide column header as row header in wijmo flexgrid

    isReadOnly={true}

    allowSorting={false}

    selectionMode=‘None’

    allowResizing=‘None’

    allowDragging=‘None’

    frozenColumns={4}>

    <wjGrid.FlexGridColumn

    key={0}

    header=‘’

    binding=‘’

    minWidth={20} width={130}

    </wjGrid.FlexGridColumn>

    <wjGrid.FlexGridColumn

    key={1}

    header=‘’

    binding=‘’

    minWidth={20} width={100}

    </wjGrid.FlexGridColumn>

    <wjGrid.FlexGridColumn

    key={2}

    header=‘’

    binding=‘’

    minWidth={20} width={100}

    </wjGrid.FlexGridColumn>

    <wjGrid.FlexGridColumn

    key={3}

    header=‘’

    binding=‘’

    minWidth={3} width={3}

    cssClass=‘padding-0’

    </wjGrid.FlexGridColumn>

    {this.generateColumn(this.props.headerLayout)}

    </wjGrid.FlexGrid>

    generateColumn = (params) => {

    let resultColumn = ;

    // create column Header Faclities

    for (let i = 0; i < paramslength; i++) {

    resultColumn.push(<wjGrid.FlexGridColumn

    key={i+4}

    header={}

    name={ }

    binding={‘’ + i}

    minWidth={180} width=“*”>

    </wjGrid.FlexGridColumn>)

    }

    }

    return resultColumn;

    }

    /**

    FUNCTION initialize setting grid

    @param {wijmo grid} flex

    */

    export function initializeGrid(flex) {

    flex.rows.defaultSize = 18;

    flex.columnHeaders.rows.defaultSize = 20;

    // add three extra column header rows

    var hr = new wjcGrid.Row();

    flex.columnHeaders.rows.push(hr);

    flex.columnHeaders.rows[0].allowMerging = true;

    flex.columnHeaders.rows[0].align = ‘center’;

    flex.columnHeaders.rows[1].backgroundColor = ‘#181e35’;

    flex.refresh(true);

    }

    Using the FlexGrid column component results in a DOMNodeInserted warning

    Document Type

    restriction

    Occurrence environment

    Occurs in Angular modules, Vue modules, React modules, and Web Components modules

    situation

    There is a workaround

    detail

    [Deprecation] Listener added for a synchronous ‘DOMNodeInserted’ DOM Mutation Event. This event type is deprecated () and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

    I was try render column in FUNCTION initialize setting grid but column is dynamic and grid does not rerender.

    I using “@grapecity/wijmo.all”: “^5.20202.732”.

    what can i do to fix it? help me please!!

    [/quote][/code]

  • Posted 18 December 2023, 4:22 pm EST

    Hi,

    This issue has been already fixed in the latest release 5.20232.939. You may verify the same from this link: https://stackblitz.com/edit/react-xfptz8

    However, if you are not able to update the version in your application, then to dynamically insert the columns in the FlexGrid, please use the push() method on the Columns collection associated with the FlexGrid.

    Please refer to this API link for more information on the operations that you can perform on the Columns collection: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.columncollection.html

    Please refer to this sample that adds columns to the FlexGrid when “Add Columns” button is clicked: https://stackblitz.com/edit/react-6qyhz1

    Regards

  • Posted 18 December 2023, 5:42 pm EST

    [quote=anirudh.verma]

    Hi,

    This issue has been already fixed in the latest release 5.20232.939. You may verify the same from this link: https://stackblitz.com/edit/react-xfptz8

    However, if you are not able to update the version in your application, then to dynamically insert the columns in the FlexGrid, please use the push() method on the Columns collection associated with the FlexGrid.

    Please refer to this API link for more information on the operations that you can perform on the Columns collection: https://developer.mescius.com/wijmo/api/classes/wijmo_grid.columncollection.html

    Please refer to this sample that adds columns to the FlexGrid when “Add Columns” button is clicked: https://stackblitz.com/edit/react-6qyhz1

    Regards

    [/quote] Thanks for your answer!

  • Posted 19 December 2023, 3:33 pm EST

    Hi,

    I am glad that I was able to help you. In case, if you have any further questions then feel free to ask.

    Thank you.

    Regards

Need extra support?

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

Learn More

Forum Channels