Dynamic jqxGrid

[debearParticipant]

Hello
I have a problem with jqxGrid in React. I want to create a control dynamically. I do not know the number of columns and rows. I get all data from another component.
The definition of the component is as follows. As you can see in the createGrid function I tried to set the data by setOptions. It this case grid displayed and returned rows correctly but the columns were set only the first time.
When I use settings like in code no data is displayed.

class Component extends React.Component {
	componentWillReceiveProps(nextProps) {
        this.createGrid(nextProps.data);
    }
	
	createDataFiels(data) {
        var result = new Array();
        if (data != null) {
            data.forEach((item, index) => {
                var dataName = "data" + index;
                result.push({ name: dataName, type: 'number' })
            });
        }
        return result;
    }

    createColumns(data) {
        var result = new Array();
        if (data != null) {
            data.forEach((item, index) => {
                var dataName = "data" + index;
                result.push({ text: item.key, datafield: dataName, columntype: "numberinput", width: 200 });
            });
        }
        return result;
    }

    createLocalData(data) {
        var result = new Array();
        if (data != null) {
            var lc = {};
            data.forEach((item, index) => {
                var dataName = "data" + index;
                lc[dataName] = item.value;
            });
            result.push(lc);
        }
        return result;
    }

    createGrid(data) {
        var columns = this.createColumns(data);
        var source = {
            datatype: 'local',
            datafields: this.createDataFiels(data),
            localdata: this.createLocalData(data)
        };
        var dataAdapter = new jqx.dataAdapter(source);
        
        this.refs.grid.beginupdate(true);
        this.refs.grid.columns = columns;
        this.refs.grid.source = dataAdapter;
        /*this.refs.grid.setOptions
            ({
                source: dataAdapter,
                columns: columns
            });*/

        this.refs.grid.endupdate();
    }

	render() {
        return (
            <div>
                <JqxGrid
                    ref='grid'
                    editable={true}
                    showemptyrow={true}
                    height={200}
                />
            </div>
        )
    }
}

I’m a rookie in React so maybe i made a mistake here. I have looked through your examples and forums and can not find a solution to my problem.

[Ivo ZhulevParticipant]

Hi debear,

You want to create your grid dynamically so you should not render in the component on load.

The render method should only contain a container for the grid, for example:

render() {
    return (
        <div id='gridContainer'></div>
    )
}

And inside the createGrid method you should create the jqxGrid like this:

createGrid(data) {
    var settings = { width: 300........... }; 
    var myGrid = ReactDOM.render(
        <JqxGrid settings={settings} />
    ,document.querySelector('#gridContainer'));
}

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[debearParticipant]

Thank you for your answer. This solution works well. I have a question in to the code from the previous post.
When I set the columns, I checked how the grid control was generated. I was curious that the columns are not overwritten just added. Grid displayed rows of data well, but columns only after removing additional divs and leaving the last div. Maybe it’s a bug in the control.
The following code shows the situation.
Passed two columns:

<div style="overflow: hidden; display: block; height: 30px; width: 1002px; visibility: inherit;" class="jqx-widget-header jqx-grid-header">
	<div id="columntablejqxGridjqx39d84e01243e" style="height: 100%; position: relative; visibility: inherit; width: 402px; margin-left: 0px;">
		<div role="columnheader" style="z-index: 29; position: absolute; height: 100%; width: 200px; left: 0px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 28; position: absolute; height: 100%; width: 200px; left: 200px;" class="jqx-grid-column-header jqx-widget-header">...<div>
	</div>
</div>

Passed four columns

<div style="overflow: hidden; display: block; height: 30px; width: 1002px; visibility: inherit;" class="jqx-widget-header jqx-grid-header">
	<div id="columntablejqxGridjqx39d84e01243e" style="height: 100%; position: relative; visibility: inherit; width: 402px; margin-left: 0px;">
		<div role="columnheader" style="z-index: 29; position: absolute; height: 100%; width: 200px; left: 0px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 28; position: absolute; height: 100%; width: 200px; left: 200px;" class="jqx-grid-column-header jqx-widget-header">...<div>
	</div>
	<div id="#columntablejqxGridjqxead941538e4b" style="height: 100%; position: relative; visibility: inherit; width: 402px; margin-left: 0px;">
		<div role="columnheader" style="z-index: 29; position: absolute; height: 100%; width: 200px; left: 0px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 28; position: absolute; height: 100%; width: 200px; left: 200px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 27; position: absolute; height: 100%; width: 200px; left: 400px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 28; position: absolute; height: 100%; width: 200px; left: 600px;" class="jqx-grid-column-header jqx-widget-header">...<div>
	</div>
</div>

Passed five columns

<div style="overflow: hidden; display: block; height: 30px; width: 1002px; visibility: inherit;" class="jqx-widget-header jqx-grid-header">
	<div id="columntablejqxGridjqx39d84e01243e" style="height: 100%; position: relative; visibility: inherit; width: 402px; margin-left: 0px;">
		<div role="columnheader" style="z-index: 29; position: absolute; height: 100%; width: 200px; left: 0px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 28; position: absolute; height: 100%; width: 200px; left: 200px;" class="jqx-grid-column-header jqx-widget-header">...<div>
	</div>
	<div id="#columntablejqxGridjqxead941538e4b" style="height: 100%; position: relative; visibility: inherit; width: 402px; margin-left: 0px;">
		<div role="columnheader" style="z-index: 29; position: absolute; height: 100%; width: 200px; left: 0px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 28; position: absolute; height: 100%; width: 200px; left: 200px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 27; position: absolute; height: 100%; width: 200px; left: 400px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 26; position: absolute; height: 100%; width: 200px; left: 600px;" class="jqx-grid-column-header jqx-widget-header">...<div>
	</div>
	<div id="##columntablejqxGridjqxffdaeb006c15" style="height: 100%; position: relative; visibility: inherit; width: 402px; margin-left: 0px;">
		<div role="columnheader" style="z-index: 29; position: absolute; height: 100%; width: 200px; left: 0px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 28; position: absolute; height: 100%; width: 200px; left: 200px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 27; position: absolute; height: 100%; width: 200px; left: 400px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 26; position: absolute; height: 100%; width: 200px; left: 600px;" class="jqx-grid-column-header jqx-widget-header">...<div>
		<div role="columnheader" style="z-index: 25; position: absolute; height: 100%; width: 200px; left: 800px;" class="jqx-grid-column-header jqx-widget-header">...<div>
	</div>
</div>

[Ivo ZhulevParticipant]

Hi debear,

Can you share a simple example, with some simple data(everything i need to reproduce that behavior)?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[debearParticipant]

Hello. I’m sorry it took so long. In the sample application, every time I press the button I create a random number of data. The data is transmitted to the grid control.

import React, { Component } from 'react';
import JqxGrid from 'jqwidgets-framework/jqwidgets-react/react_jqxgrid.js';

class CreateDataComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            gridData: new Array()
        };
    }

    createAndSendData() {
        var dataSize = Math.floor((Math.random() * 5) + 1);
        var data = [];
        var result = new Array();
        for (var i = 0; i < dataSize; i++) {
            data.push({ key: "Header_" + i, value: i });
        }
        this.setState({
            gridData: data
        });
    }

    render() {
        return (
            <div>
                <GridComponent data={this.state.gridData}/>
                <button ref="btnData"  onClick={this.createAndSendData.bind(this)}>Create and send data</button>
            </div>
        )
    }
}

class GridComponent extends React.Component {
    componentWillReceiveProps(nextProps) {
        this.createGrid(nextProps.data);
    }

    createDataFiels(data) {
        var result = new Array();
        if (data != null) {
            data.forEach((item, index) => {
                var dataName = "data" + index;
                result.push({ name: dataName, type: 'number' })
            });
        }
        return result;
    }

    createColumns(data) {
        var result = new Array();
        if (data != null) {
            data.forEach((item, index) => {
                var dataName = "data" + index;
                result.push({ text: item.key, datafield: dataName, columntype: "numberinput", width: 200 });
            });
        }
        return result;
    }

    createLocalData(data) {
        var result = new Array();
        if (data != null) {
            var lc = {};
            data.forEach((item, index) => {
                var dataName = "data" + index;
                lc[dataName] = item.value;
            });
            result.push(lc);
        }
        return result;
    }

    createGrid(data) {
        var columns = this.createColumns(data);
        var source = {
            datatype: 'local',
            datafields: this.createDataFiels(data),
            localdata: this.createLocalData(data)
        };
        var dataAdapter = new jqx.dataAdapter(source);

        this.refs.grid.beginupdate(true);
        //this.refs.grid.columns = columns;
        //this.refs.grid.source = dataAdapter;
        this.refs.grid.setOptions
            ({
                source: dataAdapter,
                columns: columns
            });

        this.refs.grid.endupdate();
    }

    render() {
        return (
            <div>
                <JqxGrid
                    ref='grid'
                    editable={true}
                    showemptyrow={true}
                    height={200}
                />
            </div>
        )
    }
}

export default CreateDataComponent;

Best Regards,
debear

[Ivo ZhulevParticipant]

Hi debear,

Sorry, but I still can’t reproduce that behavior. Can you make the demo, zip it and share it?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts