Warning console

<wjGrid.FlexGrid
    id='grid-main-content'
    initialized={initializeGrid.bind(this)}
    itemsSource={this.props.dataForGrid}
    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.arrayHeader)}
</wjGrid.FlexGrid>



 generateColumn = (params) => {
    let arrayColumn = [];
        // create column header base on each item
        for (let i = 0; i < paramslength; i++) {
            resultColumn.push(<wjGrid.FlexGridColumn
                key={i+4} 
                header={}
                name={ }
                binding={'' + i}
                minWidth={160} width="*">
            </wjGrid.FlexGridColumn>)
        }
    }
    return arrayColumn;
}

/**
 * initialize grid
 * @param {wijmo grid} grid 
 */
export function initializeGrid(grid) {

    grid.rows.defaultSize = 16;
    grid.columnHeaders.rows.defaultSize = 18;
    // add three extra column header rows
    var hr = new wjcGrid.Row();
    grid.columnHeaders.rows.push(hr);
    grid.columnHeaders.rows[0].allowMerging = true;
    grid.columnHeaders.rows[0].align = 'center';
    grid.columnHeaders.rows[1].backgroundColor = '#182e38';
    grid.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 (<URL>) 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!

0

There are 0 best solutions below