YUI extension grid templates

[alexb]

Hi Jack,

When I wrote the comment about templates, I meant something like http://quickstarts.asp.net/QuickStartv20/util/srcview.aspx?path=~/aspnet/samples/ctrlref/data/DataList/DataList1.src

E.g.

<ItemTemplate>
<DataBinder> (asd.php?id=<%# DataBinder.Eval(Container.DataItem, )
</ItemTemplate>


Container.DataItem is a row (object) in the datasource
StringValue is the object property you want to show

That's a very simple example of templating

In your answer to the blog post comment you mentioned a renderer function. Does it serve the same purpose? It would be nice to see an example.

And you're right it's one-way binding only.

p.s. The code is not shown properly here either. But you can have a look at the page on www.asp.net. http://quickstarts.asp.net/QuickStartv20/util/srcview.aspx?path=~/aspnet/samples/ctrlref/data/DataList/DataList5.src has a more complex template

[jack.slocum]

Ah yes, I see what you are saying. The JSONDataModel and a renderer function will accomplish something similar, but it's doesn't render the table. There actually is no table. What you would be rendering is content for the cells in a particular column. For example:

function renderLink(value){
return 'Click here (foo.php?id=' + value + ')';
}

Then you would assign that to a column on configuration. See this post (http://www.jackslocum.com/yui/2006/09/04/creating-an-ajax-feed-viewer-using-yahoo-ui-and-the-new-grid-component/) for more details on the ColumnModel and how to use it. There's also a JS file linked at the end which give some examples of using rendering functions.

The design/approach is a little different, but I think if you try it out and get used to it, you will start to like it. It very flexible and automates much of the process required for a template approach. The UI is less flexible than a template, but it does offer a much rich richer user experience as the trade off.

[alexb]

The UI is less flexible than a template, but it does offer a much rich richer user experience as the trade off.

Yep. E.g. it's not possible to show a post text underneath its title. You had to use a separate function and container to show it in your ajax feed reader example.

Did you think about introducing row renderers? Once a row container is created, this function can do anything to show the row. The default implementation can call cell renderers one by one.

Obviously there will be some issues with column resizing and other features when adopting this strategy. However, custom rendered rows can be excluded from certain processing.

Alex

[jack.slocum]

Yep. E.g. it's not possible to show a post text underneath its title. You had to use a separate function and container to show it in your ajax feed reader example.

I didn't have to, I chose to. It's a user interface layout people are used to (like the new Yahoo! Mail, or Outlook) and has very high user approval rating. To be honest, I never considered doing it any other way. I thought the UI turned out pretty decent for an example app.

Did you think about introducing row renderers? Once a row container is created, this function can do anything to show the row. The default implementation can call cell renderers one by one. Obviously there will be some issues with column resizing and other features when adopting this strategy. However, custom rendered rows can be excluded from certain processing.

The grid also controls the cells. That's how it able to offer column resizing, moving, etc. The entire layout is managed by the GridView. If you need a custom layout, you are welcome to extend it and create your own View. But my question would be, if all you need is a container with rows, why use a grid like this? This is more of a data oriented grid. If you just want to display some things organized into rows and don't need the other stuff, the template system you are descibing would be your best choice. It's like throwing a boulder at a bird when all you need is rock.

But, if you must implement custom row rendering, it is very easy:


Yahoo.ext.grid.GridView.prototype.renderRow =
function(dataModel, row, rowIndex, colCount, renderers){
// render your row
}


Another way, and probably a better way is like this:


MyView = function(){
MyView.superclass.constructor.call(this);
};
YAHOO.extend(MyView, YAHOO.ext.grid.GridView);

MyView.prototype.renderRow = function(...){
// render your row
};


Jack