Grid doing weird things

[assemblerParticipant]

Hi there everyone:

I’m using React 15 and JqWidgets 5.4. I’m facing this problem:

https://mega.nz/#!T5gn1J6A!3nT_bavuGatpXl1NzBdopqnsgFwCa3lbDd6B4v1ixqw

And this is the code that fills the grid:

gridRefBuilder = (grid) => {
  this.grid = grid;
}

componentDidUpdate (prevProps, prevState) {
  if (prevProps.items !== this.props.items) {
     let dataAdapter = new window.$.jqx.dataAdapter({
        datatype: 'array',
        datafields: [{name: 'field_1'}, {name: 'field_2'}, {name: 'field_3'}, {name: 'field_4'}, {name: 'field_5'}],
        id: 'id',
        localdata: this.props.items.map(x => {
          return {field_1: x.field_1, field_2: x.field_2, field_3: x.field_3, field_4: x.field_4, field_5: x.field_5};
        })
      });
      this.grid.source(dataAdapter);
  }
}

render () {

    let columns = [
        {text: 'Field 1', datafield: 'field_1', width: '35%'},
        {text: 'Field 2', datafield: 'field_2', width: '20%'},
        {text: 'Field 3,  datafield: 'field_3', width: '15%', columntype: 'checkbox',  align: 'center', cellsalign: 'center'},
        {text: 'Field 4, datafield: 'field_4', width: '15%', align: 'center', cellsalign: 'right'},
        {text: 'Field 5', datafield: 'field_5', width: '15%', align: 'center', cellsalign: 'right'}];
    
    return (<div style={{height: '100%', width: '100%'}}>
      {'Testing!!!'}

      // ... 

      <div style={{width: 'calc(100% - 2px)', height: '200px'}}>
        <JqxGrid ref={this.gridRefBuilder} columns={columns} width={'100%'} height={'100%'} columnsresize />
      </div>

      // ...

    </div>);
   }
}

Lets say that the items prop is this:

items = [{field_1: 'ABC 1', field_2: 'abc 1', field_3: true, field_4: 50, field_5: 0},
         {field_1: 'ABC 2', field_2: 'abc 2', field_3: true, field_4: 50, field_5: 0},
         {field_1: 'ABC 3', field_2: 'abc 3', field_3: false, field_4: 50, field_5: 0} ]

Also, if I try to expand or reduce the size of the column the entire grid collapses like the image, so How can I correct the missplace in the header?

Best regards,
Assembler

[HristoParticipant]

Hello assembler,

I would like to ask you is there any error message on the console?
Also, you could try to use this method: this.grid.updatebounddata(); after (this.grid.source(dataAdapter);) you set the source.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[assemblerParticipant]

Mr. Hristo,

I appreciate your response, as always. I did as you suggested calling this.grid.updatebouddata();, but anyway if I try to change the columns size the grid do the same weird thing as in the image. This is the scenario: If the columns have a fixed width or if I don’t change the columns width it works fine. Moreover, even if the grid allows me to change the size as expected if I open any other widget and then I try to change the size it collapses as in the image. Also, it shows no error in the console. All the grids I’ve tried do the same thing, even if I connect the grid directly to an api-rest.

I’m thinking your suggestion might work if there is a way to check if the columns change their width

[HristoParticipant]

Hello assembler,

The Grid has columnresized event to which you could bind. (Also and columnreordered event)
Could you clarify this “if I open any other widget and then … the image”? What is the relation between the Grid and other widgets?

Also, I would like to mention if you change the structure of the Grid and use the new DataAdapter then you should use – this.grid.source(dataAdapter);.
If you update the data, I would like to suggest you the right approach. It is to use one DataAdapter and just update the data.
Please, take a look at this example:

source.localdata = newData;
dataAdapter.dataBind();
this.grid.updatebounddata();

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[assemblerParticipant]

Mr. Hristo,

I used the columnresized according to your suggestion, like this:

this.grid.on('columnresized', () => {
   this.grid.updatebounddata();
});

and it keeps the form of the grid. Now I will try to do my best to make myself as clear as possible. If I open another widget, for instance a JqxDialog, the grid don’t allow me to change the column size. Also, if I call this.grid.updatebouddata(); after this.grid.source(dataAdapter); without calling the columnresized event, the grid keeps its aspect, which is good, but if I touch any other widget, and with any other widget I mean even the grid pager or the grid filter, or changing its columns size, it shows me something like this:

https://mega.nz/#!vpITFbyA!gQ8fDKlUtyOSCkyg3sYMX3phsamBmyNQ3QJC3qh5_Ok

So, is it a bug or I’m missing something?

[HristoParticipant]

Hello Assembler,

I saw your image but I cannot reproduce it.
You mean maybe the jqxWindow (instead of JqxDialog).
Please, try to provide me simple example that demonstrates this issue.
With just a few records there and it could be as a plain text with the content of the *.html file and *.js file.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[assemblerParticipant]

Hello Mr. Hristo,

I must tell you I’m using React Boilerplate and Lodash. Here is the entire code of my component:

Testing.js file:

import React from 'react';
// import styled from 'styled-components';

import JqxGrid from '../jqwidgets-react/react_jqxgrid';
import isEqual from 'lodash/isEqual';
import {loadData} from './dataAccessFile';

class Testing extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor (props) {
    super(props);
    this.state = {data: []};
  }

  myGridRefBuilder = (myGrid) => {
    this.myGrid = myGrid;
  };

  shouldComponentUpdate (nextProps, nextState) {
    return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state);
  }

  responseData = (data) => {
    if (data.response) {
      this.setState({data: data.response});
    } else {
      console.log('To handle this error ', data);
    }
  };

  componentDidMount () {
    loadData(this.responseData);
  }

  componentDidUpdate (prevProps, prevState) {
    if (!isEqual(prevState.data, this.state.data)) {
      let dataAdapter = this.getGridSource();
      this.myGrid.source(dataAdapter);
    }
  }

  getGridSource = () => {
    let source = {
      datatype: 'array',
      datafields: [
        {name: 'code', type: 'string'},
        {name: 'description', type: 'string'},
        {name: 'input', type: 'int'},
        {name: 'required', type: 'bool'}
      ],
      id: 'id',
      localdata: this.state.data.map(x => {
        return {
          code: x.code,
          description: x.description,
          input: x.input,
          required: x.required
        };
      })
    };
    // eslint-disable-next-line new-cap
    return new window.$.jqx.dataAdapter(source);
  };

  render () {
    let columns = [
      {datafield: 'id', hidden: true},
      {text: 'Code', datafield: 'code', width: '20%'},
      {text: 'Description', datafield: 'description', width: '50%'},
      {text: 'Input', datafield: 'input', width: '20%', align: 'center', cellsformat: 'f2', cellsalign: 'right'},
      {text: 'Required', datafield: 'required', width: '10%', align: 'center', columntype: 'checkbox'}
    ];

    return (
      <div>
        {'This is a grid for testing'}
        <JqxGrid
          ref={this.myGridRefBuilder} columns={columns} theme={'energyblue'} width={'100%'} height={'100%'}
          columnsresize />
      </div>
    );
  }
}

Testing.propTypes = {};

export default Testing;

the loadData function code:

export function loadData (setData) {
  let url = 'url of my api...';
  request(url, buildBaseHeaders('en'))
    .then(response => {
      setData({response});
    })
    .catch(error => {
      setData({error});
    });
}

And finally my App/index.js file:

export default function App () {
  return (
    <div>
      <Switch>
        <Route exact path='/login' name='Login Page' component={Login} />
        {/*<Route path='/' component={restricted(Layout)} />*/}
        <Route path='/' component={Testing} />
      </Switch>
    </div>
  );
}

this is the contents of the data array:

[{id: 1, code: 'Code', description: 'Description', input: 10, required: true}, ... {id: 100, code: 'Code 100', description: 'Description 100', input: 1000, required: true}]

This is my browser screenshot:

https://mega.nz/#!Hx4DgT7Z!ccAOSgDUFUU6lD9LmHwFHB_aDWxcQecw0Sutbvjejaw

Also I have to tell you I’m using Linux Mint 18.2, react-boilerplate 3.5.0, node 8.9.2, npm 5.5.1 and JqxWidgets 5.4. Is this a bug from the grid? Or am I missing something?

[HristoParticipant]

Hello assembler,

Unfortunately, we do not have experience with these libraries.
I tested with normal Grid with update its source after I change the columns size and it seems to work fine.
That I saw it looks like a style issue. I would like to suggest you. You could try manually correct this displacement with style settings after you update the Grid or after you open and close another widget.
You could find the <div> with role="columnheader" and set to its parrent “margin-left: 0px;”.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts