`renderItem` function as option (was: Consider adding progress property to an item)

[Kalyse]

If an item has a "progress" property it would be good if it (optionally) displayed a percentage and an overlay to visualize the progress of the event...

For example, with a 40% complete event, it could display

40% and also have an element positioned over the top with rgba(0,0,0,0.1) for example (with a width of 40%).

[Kalyse]

After I think about think, it would actually work better if you could pass a renderItemFunc or similar callback to the initialization of gannt. The custom function could return the actual domNode for the item, and this way it allows users customize the items individually. (This is the approach taken in quite a few other libraries I use and works nicely).

[usmonster]

Another great suggestion (renderItem function as option), thanks! Currently the only way to make the any modifications to the chart's DOM (short of rewriting portions of the actual plugin) is to pass an onRender function as an option, which can feel dirty and be very annoying, especially when all you want to do is change the way the items are built.

Having the item rendering be encapsulated by a single, overridable function seems like the better way to go. What would you imagine as the arguments to the function? Also, would it have the same scope as the plugin (~ this.renderItem = $.proxy(this.settings.renderItem, this) in case it needs to use existing plugin methods or utility functions, or should it be able to generate each item with whatever is passed to it as arguments? Thoughts?

In the meantime, would you want to update this issue's title/description to reflect your current train of thought? Thanks again, @Kalyse!

[Kalyse]

I think there are a few options...

You could have arugments where either...

1. The row node is passed.. (and the renderItem creates a node and attaches itself to the row)
2. A "blank" item node is passed and the renderItem modifies the node as required
3. The renderItem method creates a HTML string/domNode and returns it, and then the plugin positions and decorates it with the positioning etc...

renderItem : function( data, domNode ){

}

I don't know which would work best, as I've only just picked up your project.

I like the idea of passing an already existing domNode, because that way we don't need to worry about the positioning.

In terms of the scope, I don't think it matters at all...

[usmonster]

I like something like 2 or 3, but it'll take some more reflection. It's definitely on the list, though!