Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Need help with dynamic column headers in a DataGrid

  1. #1

    Default Need help with dynamic column headers in a DataGrid

    Hi all,

    I have a web app that I've been working on that sends queries to a Solr database, gets the results, sorts it out to its appropriate columns, and displays it on a paging grid.

    This all works fine, except that I've expanded my data sources. Previously, I had no issue with hardcoded headers, but now that some of the queries are returning with fields that aren't coded in, or with no value for existing columns, its creating a bit of an issue.

    So I'm trying to find a way to define columns dynamically, preferably every query/page that is sent. Hardcoding the new fields in is not an option, as I plan to continue expanding this to use more and more data from progressively different sources, so its far less likely that data will share common fields.

    Thanks in advance for any assistance.

    Side note: filling in values for fields that do not exist in the given query result is not an issue, as I've coded a "safe" method, which simply adds "NA" to that field if there is no given value for it.
    Last edited by jtpacheco; 12 Apr 2010 at 11:43 AM. Reason: Bah, I meant GridPanel.

  2. #2

    Default

    One way of doing dynamic column headers is by adding
    Code:
    <span id="columnId"> </span>
    to a grid header, then calling
    Code:
    document.getElementById('columnId').innerHTML = 'your text'
    to change the text

    Note that when you rearrange columns you have to call this again because the columns are rerendered.

    Another thing you could do is create a new table for the specific data you get.

  3. #3

    Default Not a bad idea

    Thanks for that idea. I think what I will do now is send a small request which returns all possible column headers for the query, then have the user pick 10. That way, I'll have 10 columns no matter what, and whatever isn't used I'll just make hidden.

    I won't be able to use the "span" part though because this is all defined in javascript. However I can definitely give the ColumnModel an ID, and get it using Ext.getCmp, and then just modify it whenever a query is returned.

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2010
    Location
    Austria
    Posts
    87

    Default

    you can reconfigure the grid, and give it a new store and ColumnModel.

    - get the data + meta info
    - extract a columnModel and Reader.fields || Record from your metaInfo
    - reconfigure the grid and calll store.load(data)

  5. #5

    Default

    Hmm. Seems I passed over the JSONReader doc in the api documentation. I was just looking at the JsonStore docs. I'll try out this metaData business, seems like its exactly what I need. I'll post when I get it done (or get stuck).

  6. #6
    Ext JS Premium Member
    Join Date
    Jan 2010
    Location
    Austria
    Posts
    87

    Default

    Reader.metadata should not Be modified directly.
    the Reader creates the Meta Object and recordType from
    the field Array or Record instance you Pass to the constructor.

    creating Record and Pass it to the Reader is imho the easier way
    the recordType is Not updated imediatly if you use fields
    and then the load will not work

  7. #7

    Default

    What do you mean? I'm a bit confused with your reply...

    Here's what I'm planning on doing right now:

    When the query returns the json with the data, it will also have a "metaData" section. Having this will fire the "metaChange" event, or so I understand. Then I just have the reader/store listen for the event:

    Code:
    this.store1.on("metachange", onMetaChange, this);
                
                onMetaChange : function(store, meta)
                {
                    // TODO: extract fields from metaData
                }
    And that should work, right?

    I've actually just tried creating a record for each column that I get back, and adding it to the reader, but that hasn't worked.

  8. #8
    Ext JS Premium Member
    Join Date
    Jan 2010
    Location
    Austria
    Posts
    87

    Default

    i am Not sure if you can use the metaData Object of the reply
    to update the colmodel.
    Never tried the metaData of the Response. in my App. i use
    Grid.reconfigure to Change the Grid.

    the reader will create recordType when Data is loaded.
    After that the onMetaChange Event is fired to change the
    recordType of the stoe.

    using Field Array to init the store/reader i got an
    recordType undefined exception calling Store.loadData.

    when using Record to init the Reader it worked becaue
    the recordType is extracted from Record and therefor available
    After init (don't have to Call load)

    i will post some Code when i get Home and don't have to
    Write from my mobile ...

  9. #9

    Default

    Ok, I understand now. After working a bit I do see what you mean, and I'm loading up my columnModel data in a separate event. It's actually turned into its own query just to get the column names. Once I get that back, I parse through it and create a new column for each header, then make a new ColumnModel, push all the columns into it, and then do grid.reconfigure like you suggested, and that works for the columns! Thanks!

    Code:
    var sels = [];
            
            checkboxSelectionModel1.each(function(rec){
                sels.push(rec);
            });
            
            var cols = [];
            for (var i = 0; i < checkboxSelectionModel1.getCount(); i++)
            {            
                var col = new Ext.grid.Column({
                    header : sels[i].data.col,
                    hidden : false,
                    sortable : false,
                    dataIndex : sels[i].data.col,
                    expandable : true                
                });
                cols.push(col);
            }        
            Ext.getCmp("resultsgrid").reconfigure(Ext.getCmp("resultsgrid").getStore(), new Ext.grid.ColumnModel(cols));
    Now all I have left to do is wrangle the recordType into the reader.

  10. #10

    Default

    HA! I've done it, exactly what I wanted.

    I just messed up the record type, and that's why I was confused about it. I originally had it like

    Code:
    {"id":"id",
    "mapping":"id",
    "type":"string"},
    
    {"name":"name",
    "mapping":"name",
    "type":"string"},
    
    {"rank":"rank",
    "mapping":"rank",
    "type":"string"},
    
    etc...
    when it should have been

    Code:
    {"name":"id",
    "mapping":"id",
    "type":"string"},
    
     {"name":"name",
     "mapping":"name",
     "type":"string"},
    
     {"name":"rank",
     "mapping":"rank",
     "type":"string"},
    
    etc...
    Works perfectly now, thanks for your help.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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