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

Posted by: toai.72429 on 18 December 2023, 5:15 am EST

    • Post Options:
    • Link

    Posted 18 December 2023, 5:15 am EST - Updated 18 December 2023, 5:20 am 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 19 December 2023, 1:22 am 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 19 December 2023, 2:42 am 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 20 December 2023, 12:33 am 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

  • Posted 3 December 2024, 9:05 am EST - Updated 3 December 2024, 9:10 am EST

    Hi Team, In my case, when I updated to version 5.20232.939, “DOMNodeInserted” errors have been removed, but now we are getting other multiple warnings. and I am using the JavaScript version on Wijmo.

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

  • Posted 4 December 2024, 5:58 am EST

    Hi Surya,

    It seems you also created a new thread for this issue, we have addressed the issue there, here’s a copy of the response -

    Sorry, but we are unable to replicate the issue on our end, could you please share a small sample in which the issue can be replicated, so that we can investigate the issue further and assist you accordingly?

    Please refer to the attached sample in which we tried to replicate the issue. You can also modify the attached sample to replicate the issue and share it with us.

    This type of warning may appear when a package is getting imported multiple times, so please make sure this is not causing the issue in your project.

    In case, if there is something we missed, please let us know.

    New Case link - https://developer.mescius.com/forums/wijmo/how-to-fix-component-id-generation-collision-detected

    Regards

    angular18_sample.zip

Need extra support?

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

Learn More

Forum Channels