Need help with dynamic column headers in a DataGrid

[jtpacheco]

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.

[mpawlowski]

One way of doing dynamic column headers is by adding

<span id="columnId"> </span>

to a grid header, then calling

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.

[jtpacheco]

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.

[Nesta]

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)

[jtpacheco]

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).

[Nesta]

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

[jtpacheco]

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:

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.

[Nesta]

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 ...

[jtpacheco]

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!

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.

[jtpacheco]

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

{"id":"id",
"mapping":"id",
"type":"string"},

{"name":"name",
"mapping":"name",
"type":"string"},

{"rank":"rank",
"mapping":"rank",
"type":"string"},

etc...

when it should have been

{"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.