XML Driven Columns

[byuva]

There seems to be a new tutorial every day highlighting some great new functionality so my apologies if this already supported. Here is a brief list of things that I haven't figured out how to accomplish.

1) Can the headers/ColumnModel be defined in the XML? I am generating a lot of dynamic XML which is much easier for me to generate than dynamic javascript. If a lot of the configurability could be pushed into the actual xml that would help a lot (width, column type, column name, sortable, editable, "type", etc)

2) If column index methods (ie addPreprocessor) could instead (or in addition) reference columns by their header name (and fail gracefully if that header name doesn't exist). Or even better could a column type be associated with a certain renderer, sorter and preprocessor (ie just define it as DateTime in the XML get some slick default render, sort, etc.)

3) A line (similar to column width adjustmen line) showing where drag-and-drop rows will be inserted.

3) A tutorial on how to implement a right-click context-menu would be great :-)

Again thanks for all the hard work Jack. You have singlehandidly restored my faith Web 2.0 (and more specifically my ability to create something useful with it :-)

-b

[jack.slocum]

First, thank you very much for the positive feedback. It's nice to hear.

1) There isn't a way to currently do this. The design is very strict about separating the data from everything else. The reason is so the models aren't tied to the grid (see my latest post).

What I'd recommend is to create a helper class that loads an xml document and use that to create the grid. It would flow something like this:

Page load-> calls helper -> helper calls Connect.asyncRequest and loads xml document -> success() would use the result xml document to load column information, create the grid and call loadData() directly passing in the same xml document.

Creating the helper class is obviously a little work, but once it's done you would have exactly the functionality you are looking for.

2) This has the same problem of referencing the column model from the data model. Maybe the solution is to define a column map/alias object that can be shared by both:


var alias = {
'id' : 0,
'name' : 1,
'foo': 2
};
var cm = new YAHOO.ext.grid.DefaultColumnModel({...config...}, alias);
var dm = new YAHOO.ext.grid.XMLDataModel({...schema...}, alias);
dm.addPreprocessor('name', myFunc); //use alias instead of index


After this you could pass the alias to any method that expects an index and it will be mapped. What do you think?

3) I thought about this. It would actually be implemented in DDGrid and not part of the main source. For simplicity I didn't implement it in the example, but it is a good idea.

3b) There is an event "rowcontextmenu" that can be used to do context menus. Since there are a few different ways it could be done, none of which are standard YUI examples, a tutorial is a great idea. Look for it soon.

Jack

[byuva]

Thanks for the quick response:

1) I will look into doing this. My javascript is still a bit weak (I do most of my development in Python), but it is probably time to take off the tutorial training wheels.

I am curious about your first comment about seperating data. I am far from an expert on MVC architecture but it seems like the current implementation doesn't allow a grid to act as a pure viewer. That is I can't just pass it an XML document and have some sort of default behavior. Applications that interact directly with databases can at least introspect the column names and datatypes using a SQL DESCRIBE (or similar) to create a basic view. To me, a data model is inseperable from its column model (especially in XML where everything is a string).

I will see if I can come up write something along these lines and sell you on the merits of it :-)

2) Looking at this again maybe we just need a getColumnNumber (<string> HeaderName) in the AbstractColumnModel. Then we could use:
dm.addPreprocessor(cm.getColumnNumber('name'), myFunc).

1&2) In an ideal world I would have a header section in my XML defining at least the column name and "type" (ie datetime). Then I would have an easy way to associate that "type" with a sort, render and preprocessor functions in my javascript. I would envision the same javascript being used by numerous grids throughout a website simply by passing different xml. Basically I want to dynamically create grids and I am much better at creating dynamic XML than dynamic javascript.

3) I think this would not only look good but provide important feedback to the user (if you got really crazy maybe even animate a small gap being created where they will be inserted). I would volunteer for this but I am still trying to figure out the black magic that created the column width line.

3b (thanks for keeping up with my fubarred numbering) Any hints on how to create a right click context menu would just be killer.

Again thanks for your help,

-b