fnRender friendly suggestion to return also JQuery objects

jamjon3

Under normal circumstances, you output a string and attach any events later such as....
[code]
{ "bSortable": false,"sClass": "SearchColumnDetails","bVisible": true,"mDataProp": "null", "fnRender":
function(oObj) {
return "";
}
},
[/code]

However, it would be super useful to be able to output a JQuery object with events and such already bound to it...

Something like:
[code]
{ "bSortable": false,"sClass": "SearchColumnDetails","bVisible": true,"mDataProp": "null", "fnRender":
function(oObj) {
return $("")
.button({
text: false,
icons: {
primary: "ui-icon-circle-triangle-e"
}
})
.click(function() {
alert('You added a click event to this button');
});
}
},
[/code]

Of course, you already helped me with that last nightly build (WORKS GREAT!!!!) but seemed like a good idea to share with you....

allan

The way fnRender works internally is that a string is expected - not a DOM node, which is what would be needed there. For this kind of thing when you need to do node manipulation (events etc) there is fnRowCallback. I'm afraid that the mechanics of how fnRender works does not allow your suggestion at this time (although it is a good one!).

Allan

jamjon3

Thanks!! Just a thought and not a problem in the least (just convenient I suppose).

hawkip

We're using datatables editable/jeditable for inline column editing and have a number of custom renderers, so at first thought that returning a string from fnRender was a bit restrictive.

But now we use JQuery's .live method to attach handlers to the returned from fnRender, so we can have whatever handlers we want applied automagically.

jamjon3

Hmm... I'll look a little deeper into that. Currently, I'm doing stuff like this:

[code]
{ "sTitle": "Execute Action","sClass": "SearchColumn","bVisible": true,"mDataProp": null,"sDefaultContent":"", "fnRender":
function(oObj) {
var tempDiv = $(''),
executeActionsSelect = $('').appendTo(tempDiv);
$.each(self.administrationRuleChainsTab.data('ruleChains').executeActions.sort(function(a,b) { return (a.executeActionId - b.executeActionId); }),function() {
$('').val(this.executeActionId).html(this.executeActionId+" - "+this.name).appendTo(executeActionsSelect);
});
return tempDiv.remove().html();
}
},

[/code]

And then attaching the default selected value in the fnRowCallback along with the events. Hmmm....

hawkip

Yes, I think you might benefit from using .live. I don't claim credit for this, BTW, it was one of my colleagues.
[code]
function renderAssociation( obj ) { // handler for fnRender for certain columns
var value = obj.aData[obj.iDataColumn];
return '' + value + '\n';
}

/* apply handler to mouseover event for any .association that gets added to the DOM */
$('.association').live('mouseover', function(event) { /* do what you need */ }
[/code]

GregP

There's a bit of a hot debate of .live vs. .delegate (a different jQuery binding method), with many people claiming that .delegate has the same benefits but improved performance. Worth looking into, although there's no point solving a problem you don't have. If .live is doing the trick without any performance hit, I vote for sticking to it. Just throwing this out there because some people don't know about .delegate

jamjon3

That's something I've been looking at also (aka .delegate). So far, I haven't needed it. I have a "click" button that I do an "unbind" before binding it in the fnRowCallback (or the event will go away after changing the page). I think my case is a bit special as I'm building more datatables within the details of the top datatable (which have their own details) so I have some events that need to be rendered on the row level using row and aData info. However, I have been looking at both .live and .delegate for some other uses I certainly see them being very useful. I'm flexible so this is my cue to look deeper.

I'll take a closer look at them as I've used only .live sparingly and have been seeing .delegate mentioned more and more so I probably need to give them some more use in my coding.

As far as fnRender is concerned, I try to stay away from rendering raw HTML as a string as I've been sloppy in the past and missed closed tags and handling it in jquery keeps that straight but it would come in handy to just pass back a selector with an event already attached rather than the raw html text but in a lot of cases I would still handle it in the fnRowCallback.

nithril

I agree with Jamjon3. There is even a patch to add support for JQuery object [1].

I hope one day fnRender will support JQuery object ;)

[1]
http://www.datatables.net/forums/discussion/comment/15906

allan

As I noted above, the way fnRender works is that it expects a string, and the mechanics of DataTables (specifically where in the program fnRender is called) means that a DOM noted (and therefore a jQuery object) cannot be returned as the TR node for the row might not yet exist (specifically with deferred rendering enabled). The only way that this could be made to work would be for DataTables to cache the returned value and then use that when the TR is available, which could be a bit messy, but I will look at this :-).

Allan

Digicrat

Are things any closer to supporting the return of jquery objects now, than when this was first suggested?

I am currently in a scenario where I need to return a JQuery object. In my case, however, I'd like to use an HTML5 Canvas to dynamically draw something in the cell as well as add additional bindings that take advantage of a closure from the context of the table's original creation.