Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Displaying grid header fields form grid vertically

  1. #11
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    GridPanel isn't designed for horizontal data.

    You would have to:
    1. Transform the data.
    2. Use a locked column as the header.
    3. Apply additional CSS to make the first column look like a header.
    4. Write a renderer that determines the correct rendering based on the row instead of the column.
    5. (optional) Hide the top header.
    6. (optional) Implement sorting of columns.
    7. (optional) Implement the grid header menu, including row hiding.

  2. #12

    Question

    What intend for transform the data?
    you have any exemple to follow...

    Thanks

  3. #13

    Default

    Hello Animal,

    I tested the code and it's work perfectly, but i'd like to change the width of column, i change it on :

    {header: 'Price', width: 20, sortable: true, renderer: 'usMoney', dataIndex: 'price'},

    but i don't take the good result (see image). have you any solution ?
    thanks

  4. #14

    Default

    Hey Condor,

    Can you please guide me to approach for such implementation?


    Thanks,

  5. #15
    Sencha User xjpmauricio's Avatar
    Join Date
    Jul 2009
    Location
    Portugal, Setbal
    Posts
    88

    Default

    I'm having the same problem. A customer demand. I'm just going to change the records order and then bind them like i usually do. Simple!

    By changing the records order i mean that for example, the records are originaly like this:

    col1 | col2 | col3

    And i have to change them to this:

    col1
    col2
    col3

    ...This can be easily done, i'll just have to create new records while iterating the original ones.

    Quote Originally Posted by vikaskapoor View Post
    Hey Condor,

    Can you please guide me to approach for such implementation?


    Thanks,

  6. #16

    Default

    Is this still the best way to rotate the text for the column headers?

  7. #17
    Sencha User
    Join Date
    May 2013
    Location
    Saint-Petersburg, Russia
    Posts
    37

    Default

    Example does not work in ExtJS 4.2 (FireFox 22, IE 8)

  8. #18

    Default

    Hi Amol,

    It would be very helpful if you can share some of your code in this thread...as I am looking for the same without any luck...Thanks in advance.

    Thanks,
    Sameer

  9. #19
    Sencha User
    Join Date
    Mar 2014
    Posts
    10

    Default

    I think the best way to do that is using the property.grid class

  10. #20
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    17

    Default Howto do that for only several columns

    I only want some of the column headers to be shown vertically, how would I have to do that?

    update: I tried some things, got it working, only tested in FF:

    gave the grid a cls (my-vertical-header-grid), and the columns id's (rotated_column1,rotated_column2).

    In ccs sheet I added this:
    .my-vertical-header-grid .x-grid3-hd-rotated_column1 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    height: 120px;
    width: 120px;
    left: -105px;
    }

Page 2 of 2 FirstFirst 12

Posting Permissions

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