Can you add an Editable Column to an EditorGridPanel where the Data Source is Read Only

LabKey Support Forum
Can you add an Editable Column to an EditorGridPanel where the Data Source is Read Only trent  2011-08-09 16:58
Status: Closed
 
First of all, I found this post on the sencha forums: http://www.sencha.com/forum/showthread.php?53009-Adding-removing-fields-and-columns , so I tried implementing that but if I added the call to add a column directly after creating the grid panel, it throws an error of some property being undefined - so probably something isn't properly initialized yet. That's OK - I figured I could just add a button that would add the column. That kinds of breaks the layout, which is fine, I can just make the call to set the size of the panel and that fixes it.

The problem is, the added column is not editable - even if I specify the attribute: editable: true. I think that perhaps there is some behind the scenes stuff going on that determines if a column is editable or not?

Anyway, I then had a thought that I could just create a new query which the extra column already added and then pass that in as the queryname. That's good, it gets the data displaying - but still not editable.

I also tried editing at run time. i.e. I created a query from a list (so not editable), then perform the following:

var t = grid.colModel; var v = t.config1; v.editable = true; //check to make sure console.log(grid.colModel.config1.editable);//output is true

but still no joy.

So, in summary - is there any way I can add a column to a specific data source that will be editable even if the underlying data isn't?

 
 
Ben Bimber responded:  2011-08-09 17:07
hi trent,

i think it's as simple as changing the editable property on your store and/or editorgrid. it probably gets set when the store loads, but you could listen for that even and change it. you could add your column at this point too.

if you want to get more involved, look at what ehrStore.js does in the EHR module. That extends the labkey store. the onProxyLoad method listens for when the query metadata is returned by the server. at this point you can modify or augment it. it's a pretty low level way to hook into things.

out of curiosity, what's the point of editing 1 column if it isnt going to be submitted?

 
trent responded:  2011-08-09 17:28
Thanks. Well I took a look at the store documentation, and there is one config option updatable, so I tried setting that to true (and after checking, it defaults to true anyways); And I also have editable specified as true in the instantiation of the editorgridpanel.

But I'll take a look in the ehrStore.js - that might give me some more clues, thanks.

… just trying out an idea; I found some code to export a grid to XLS format. So seeing if we can get the specimen repo working this way; the requests work by clients requesting a specific vial size, which I don't think the built in specimen repo supports.

 
Ben Bimber responded:  2011-08-09 17:35
you know i think the labkey editorgridpanel has a columnModelCustomize event (or something similar). i believe the way you are supposed to manipulate column in that grid is to listen for that event (which is async since the store must load data from the server) and then modify the columns array it returns. that would allow you to all the column, but you may run into a problem downstream because that column wouldnt actually exist in the store. if this does work though it's easier and requires knowing less about the guts of ext.

hooking into the store as i mentioned above is a step upstream of the EditorGridPanel's columnModelCustomize event. it's more work to get it working (although not that much work), but might be more robust.

 
trent responded:  2011-08-09 17:38
ah right. cool.

just thinking about it, i think i may be looking at this wrong. There are obviously events that take place after editing a column value to update the store, which is why its preventing the columns being editable.

I might be better of just calling the selectRows function and creating an ArrayStore based on the returned data.

 
Ben Bimber responded:  2011-08-10 06:36
hi trey,

a few other comments:

  1. how are you debugging this?
2. the array store thing is probably feasible, but i think you'll find simpler and more robust approaches. i pretty much never use selectRows() for anything these days since passing your data through a store is just much better. it does take some wrapping your head around it though. if you plan to do anything along these lines in the future, i'd suggest taking a little time on this.

3. i saw you mentioned grid -> excel. i dont know what route you were thinking of using, but while the labkey store supports exporting to excel, it appears to be tied to the underlying SQL query, rather than the records in the client-side store. therefore if you're adding values on the client that wont be reflected. however, LABKEY.Utils.convertToExcel can do this. on the client you'd iterate over your store's records, build an excel object and then use this API to return an excel file.

 
trent responded:  2011-08-10 18:14
  1. As you may have noticed, I use console.log a bit. I use chrome, so just use the dev tools included.
2. Ok, I took a better look at the customizecolumnmodel event - actually the documentation provides an example of using it.

However, even if I update the field in the event, it still doesn't become updatable. (I try updating the sortable field there, and that does get affected - it's just the editable that doesn't).

In the example they provide, they call a custom renderer function, so thought maybe something is in there:

function newTest(columnModel, index){
       if (columnModel != undefined){
           console.log(index.vol.editable);
           i = index.vol;
           i.sortable = false;
           i.renderer = newRenderer;
           index.vol.editable = true;
           console.log(index.vol.editable);
       }
   }

function newRenderer(data, cellMetaData, record, rowIndex, colIndex, store){
       console.log('*******');
       console.log(data);
       console.log(cellMetaData);
       console.log(record);
       console.log(rowIndex);
       console.log(colIndex);
       console.log(store);
   }

If I inspect record, the store object has a property of updatable which is set to true, which add to the confusion.

3. I was looking at this code: http://www.sencha.com/forum/showthread.php?32400-GridPanel-directly-to-Excel … but just now I thought I better test it to make sure it actually works. Unfortunately it looks like there are some server side validation that don't like some of the values in the script. So I may have to look for another solution.

Thanks for all your help and advice.. appreciate it :)

 
trent responded:  2011-08-16 20:30
Just as a side note for anyone that may be interested. That script I found on Sencha isn't even necessary as I was trolling through the LabKey Javascript API doco, and found this:

https://www.labkey.org/download/clientapi_docs/javascript-api/symbols/LABKEY.Utils.html#.convertToExcel

Which returns an Excel spreadsheet based on the JSON data sent through. Very cool!