Results 1 to 6 of 6

Thread: How to style Grid cells ?

  1. #1

    Default How to style Grid cells ?

    Folks,

    I need an example of styling grid cells- headers and body cells. I could use a specialized renderer and achieve a particular styling on body cells, but feel it should be a simpler way to impose particular styling for grid elements - like particular font family and size for all headers. I see bunch of properties besides React style - baseCls, cls, bodyCls , tried them but did not find a working solution.

    Like <Column text="Name" dataIndex="name" flex="2" bodyStyle={ {color:'orange'}}>

    Has no effect. Any examples are greatly appreciated.

    Thanks

  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Doing it directly on the component can be done like that. Column behaves a little differently with its header element, but the Cell renders this fine:



    Ideally though, you would want to do this with the theme variables. For example, $gridcolumn-background-color and $gridcell-background-color for this example.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  3. #3

    Default

    Great response and I see your fragment works well. When I added style.css I do not see it being read. I do not see direct statement to load css file. How it is loaded?

  4. #4
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    The resources in the fiddle are all loaded in the response from the server so you won't see the file in the network request.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  5. #5

    Default

    Still no desired outcome, everything is displayed in white/black, my style file on a very top level called style.css:
    .orange {
    background-color: orange;
    color:red;
    }

    .blue .x-header-el {
    background-color: lightblue;
    }


    My Grid is presented as

    return (
    <Grid title="Available Bots" store={this.store} height={'100%'}>
    <Column text="Name" dataIndex="name" flex="2" cls="orange">
    <TextCell cls='blue'/>
    </Column>
    <TextColumn text="Last Updated Date" dataIndex="lastUpdatedDate" flex="1" />
    <Column text="Created Date" dataIndex="createdDate" renderer = {(value)=> this.renderDate(value)}flex="1"/>
    <Column text="Version" dataIndex="version" sortable={false} flex="1"/>
    </Grid>
    )
    Any idea what may go wrong ?

  6. #6
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    You have the classes reversed. .blue targets the column header element so it should be set on Column, and .orange should be set on TextCell.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

Similar Threads

  1. DatePicker does not update cells style
    By sche in forum Sencha GXT Bugs
    Replies: 0
    Last Post: 30 Jun 2012, 4:52 AM
  2. Grid plugin that modifies grid cells style
    By zerkms in forum Ext: Q&A
    Replies: 4
    Last Post: 17 May 2012, 2:55 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •