grid head basic background style question

[JIMAN SON]

hello team ?

I'm developing a sample grid set.  ( React )

background style (my grid header) is different from the Demo grid.

may be... , gradation is not activated in my grid head. 
( image file attached)

how do i set options ? 

[paramvir]

Please ensure to include pqgrid theme file as in the React examples.

BTW your attachment file is showing blank, please re attach it.

[JIMAN SON]

theme file is worked,

re attached image file.

thanks~!

[paramvir]

Not sure why header in your grid is different, Could you please share a stackblitz.

[JIMAN SON]

Sorry
I'm not familiar with stackblitz  .

I tried, react demo code again.

result is the same.

I used pqgrid 7.5.0.


---- demo code ----




import React, { Component } from "react";
import ReactDOM from "react-dom";
import pq from "pqgrid";
import "./style.css";

class Pqgrid extends React.Component {
  componentDidMount() {
    this.options = this.props.options;
    pq.grid(this.refs.grid, this.options);
  }
  componentDidUpdate(prevProps) {
    /*var src = this.props.options, dest = this.options;
    for(var key in src){
      if(src[key] != dest[key])
        dest[key] = src[key]
    }*/
    Object.assign(this.options, this.props.options);
  }
  render() {
    return <div ref='grid'></div>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this);
    this.columns1 = [
      { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
      { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
      { title: "Revenues", width: 150, dataType: "float", dataIndx: "revenues", format: '#.0' },
      { title: "Profits", width: 150, dataType: "float", dataIndx: "profits", format: '#.0' }
    ]
    this.data1 = [
      { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
      { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
      { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
      { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
      { rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
      { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
      { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
      { rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
      { rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
      { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
      { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
      { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
      { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
      { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
      { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
      { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
      { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
      { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
      { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
      { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
    ]
    this.state = {
      showTitle: false,
      reactive: true,
      locale: 'tr',
      height: "flex",
      numberCell: {
        show: false
      },
      columnTemplate: { width: 100 },
      pageModel: {
        type: 'local',
        rPP: 5,
        rPPOptions: [3, 5, 10],
        layout: ["strDisplay", "|", "prev", "next"]
      },
      colModel: this.columns1,
      animModel: {
        on: true
      },
      dataModel: {
        data: this.data1
      }

    }
  }
  handleChange(event) {
   
    this.setState({ locale: event.target.value });
  }
  render() {
    return <div>
      <div style={{ margin: 20 }}>
        <label>Change locale:</label>
        <select value={this.state.locale} onChange={this.handleChange}>
          <option value="en">English</option>
          <option value="ja">Japanese</option>
          <option value="tr">Turkish</option>
        </select>
      </div>

      <Pqgrid options={this.state} />
    </div>
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('root')   //  only change here ( app -> root )
);

[paramvir]

Stackblitz is similar to VS code.

You may make the changes in https://stackblitz.com/edit/paramquery-react-npm to reproduce the issue and share it.

[JIMAN SON]

I tried with stackblitz. Works fine. Because it's the same demo code.
https://stackblitz.com/edit/react-u5nwyq?file=src/index.js

But it still doesn't work local (same demo code).
Am I not good at setting dependencies?

i tested...

Local install
(npm install [filepath])
7.5.0
7.4.0
7.1.0

and

(npm install pqgrid)
Tested but it's the same (not working)

Here is a link to my source code. (It's just demo code)
https://drive.google.com/file/d/xxxxxxxxxxxxxxxxxx


thanks

[paramvir]

Could you please share a smaller zip attachment. You might need to remove node_modules directory to reduce the size.

[JIMAN SON]

thanks!

smaller file link (removed modules folder ) :
https://drive.google.com/file/d/xxxxxxxxxxxxx

[paramvir]

Thanks, I'm able to reproduce it in my local env.

React is dropping some of the css rules meant to add gradient to header, it would be fixed in upcoming version.

For now you can add this css rule at bottom of styles.css to fix it for steelblue theme:

Code: [Select]

.pq-header-outer .pq-cont-inner {
    background-image: linear-gradient( #fefefe, #dae6f0) !important;
}


[JIMAN SON]

 

Thank you !!

Works fine.