EasyUI Forum
September 22, 2020, 10:33:06 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [SOLVED] DATAGRID Styling headerStyle & headerCls cannot working?  (Read 249 times)
kifni41
Newbie
*
Posts: 23


View Profile
« on: August 06, 2020, 12:41:49 AM »

Code:
import React from 'react';
import { DataGrid, GridColumn } from 'rc-easyui';

class Coba2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.getData()
    }
  }
  getData() {
    return [
      {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
      {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
      {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
      {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
      {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
      {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
      {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
      {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
      {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
      {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
    ]
  }
  render() {
    return (
      <div>
        <h2>Basic DataGrid</h2>

        <DataGrid data={this.state.data} style={{height:250}}>
          <GridColumn field="itemid" title="Item ID"></GridColumn>
          <GridColumn field="name" title="Name" headerStyle={{backgroundColor:'#ccc'}}></GridColumn>
          <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
          <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
          <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
          <GridColumn field="status" title="Status" align="center"></GridColumn>
        </DataGrid>
        
      </div>
    );
  }
}

export default Coba2;

i try this basic code, then try to use
Code:
headerStyle={{backgroundColor:'#ccc'}}
this not affect the style ,

also when i try
Code:
headerCls
then i inspect element, no class in the header

also need more example in document tho
« Last Edit: August 12, 2020, 07:28:46 PM by kifni41 » Logged
jarry
Administrator
Hero Member
*****
Posts: 1888


View Profile Email
« Reply #1 on: August 08, 2020, 01:02:03 AM »

Please set the 'hcellCss' to modify the header cell's style.
Code:
<GridColumn field="name" title="Name" hcellCss={{backgroundColor: '#ddd'}}></GridColumn>
Logged
kifni41
Newbie
*
Posts: 23


View Profile
« Reply #2 on: August 12, 2020, 02:26:07 AM »

i also try your code using hcellCss, nothing happen

i see on inspect element, no style added there,
is there any config i miss?
« Last Edit: August 12, 2020, 02:50:28 AM by kifni41 » Logged
jarry
Administrator
Hero Member
*****
Posts: 1888


View Profile Email
« Reply #3 on: August 12, 2020, 04:29:28 PM »

Please try to update to the newest version.
Logged
kifni41
Newbie
*
Posts: 23


View Profile
« Reply #4 on: August 12, 2020, 07:23:25 PM »

thanx, solved now
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!