Update form fnRemder to mRender

mmcw

Hello,

I see the fnRender code is depreciated! It will be replaced by mRender. How to change the code so it will work wit mRender?
How to update the following code to mRender?

[code]
"fnRender": function ( o, val ) {
return o.aData[4];
}
[/code]

Greetings Michel

allan

There are a number of ways to do it, the easiest is actually to use mData in this case since you are pulling in a static element from the array:

[code]
mData: "aData.4"
[/code]

Allan

mmcw

That will not return anything!
I tried:

mData: "aData.4"
"mData": "aData.4"
"mData": "o.aData[4]"

allan

Gah - sorry - I forgot how fnRender works (another reason to remove it ;-) ). `o.aData` in fnRender is the data for the whole row. So mData should just be:

[code]
mData: 4
[/code]

Allan

mmcw

Still wil not return anything:

THis is part of the code:


{
"mDataProp": null,
"sClass": "control center",
"sWidth": "20px",
"bSortable": false,
"sDefaultContent": ''
},
{
"mDataProp": null,
mData: 4
},
{
"mDataProp": null,
"fnRender": function ( o, val ) {
return o.aData[2];
}
},

allan

Can you link me to your page please?

[code]
"mDataProp": null,
mData: 4
[/code]

mData and mDataProp are the same thing (mData is the new name for it). You should not use both in the same object.

Allan

mmcw

See: http://datatables.net/forums/discussion/12461/how-to-expand-open-the-drilldown-options-when-opening-the-website#Item_1

Greetings,

Michel

allan

It looks like it should work to me. Can you give me a link to your page please? That way I can debug it live.

Allan

mmcw

http://www.bergmanonlineshop.nl/test.html

Greetings

Michel

mmcw

Is is possible for you to use / debug the version I send you?

Michel

allan

Sorry for the delay. I don't see any obvious errors on the page. What specifically is the problem?

Allan

mmcw

2 question;

How to replace the depreciated function fnRender by mData?
How to expand all the extra rows using the drilldon option automatically on pageload?

Michel

allan

Let's take this columns as an example:

[code]

{
"mDataProp": null,
"fnRender": function ( o, val ) {
return o.aData[1];
}
},
[/code]

Dropping fnRender and using just mData you would have:

[code]
{
mData: 1
}
[/code]

In fact, since that's for column 1, you don't need that at all - it is completely redundant since DataTables will assign he column index by default.

In something ever so slightly more complicated:

[code]
"fnRender": function ( o, val ) {
return '';
},
[/code]

would become:

[code]
{
mData: 3,
mRender: function ( data, type, row ) {
return '';
}
}
[/code]

And again, assigning mData is actually redundant since it would be 3 by default anyway (column index3).

Allan

mmcw

OK, I will try it and give you some feedback.
Do you have an answer to my second question also?

Michel

allan

> How to expand all the extra rows using the drilldon option automatically on pageload?

`$('tbody tr').click();` perhaps? Just trigger the event.

mmcw

Where to add the code?

mmcw

I tried this:


{
"mDataProp": null,
"fnRender": function ( o, val ) {
return o.aData[4];
},
"sClass": "align-top",
"sWidth": "140px"
},
{
"mDataProp": null,
"fnRender": function ( o, val ) {
return nl2br(o.aData[8]);
},
"bSortable": false,
"sClass": "align-top"
},


to

{
mData: 4,
"sClass": "align-top",
"sWidth": "140px"
},
{
"mData: 8,
mRender: function ( data, type, row ) {
return nl2br(data);
},
"bSortable": false,
"sClass": "align-top"
},


But this wil not return the value of the 8 row in the database but the 5th!!
How to make it use the value out of the 8 th row?

Michel

allan

[quote]
$.fn.DataTable.version
"1.9.2"
[/quote]

mData and mRender were introduced in 1.9.4... Please update to the latest version.

mmcw

I did but now the drilldown part wil not work anymore!!!

mmcw

[quote]allan said: $('tbody tr').click(); perhaps? Just trigger the event. [/quote]

Question where and how to add this code?

allan

After you've initialised your DataTable and added the click event handler. In fairness you want to activate the trigger on the element with the event handler, so you'd need to use a slightly different selection (i.e. involving `td.control` ).

mmcw

Sorry, I tried a lot of options and searched the forum for more then 14 days.
I can not get it to work. I am not an expert in javascript/ jquery!
I send you an example . Is it possible to give me an example.
I think - looking at the forum - that there will be a lot of persons who would like to use that option!!

allan

I just loaded your web-site to test an example and I'm getting a Javascript error on it at the moment:

[quote]
jquery.rateit.min.js:4
TypeError: 'undefined' is not an object (evaluating 'b[0].nodeName')
[/quote]

mmcw

I do not get the error!
I tried the IE/ Google and Safari browser.
I however uploaded an second example without the rateit script!

http://www.bergmanonlineshop.nl/test2.html

allan

I still get the error when I click on a row to open it. Multiple clicks == multiple errors and multiple rows being inserted.

mmcw

I have removed one more line!
It now drills down the row but isn't returning the right info!
It also will not show the image (+) and (-).
Also added an example using 1.9.2!

http://www.bergmanonlineshop.nl/test2.html (1.9.4)
http://www.bergmanonlineshop.nl/test3.html (1.9.2)

allan

In 1.9.4 please use mData rather than mDataProp. It should be backwards compatible, but it looks like there might be a bug when it is null. However using mData will allow it to work.

Allan

mmcw

I will update the how I think it has to be updated (use the mData function) and will upload the changed version!

mmcw

I have update the code: http://www.bergmanonlineshop.nl/test2.html

Problem:
How to change the code where more then one input mData value is used?

[code]
{
"mDataProp": null,
"fnRender": function ( o, val ) {
var dt_edit = '';
dt_edit = 'Bewerken';
var dt_remove = '';
dt_remove = 'Verwijderen';
return dt_edit+dt_remove;
},
"sClass": "align-center align-top",
"sWidth": "70px",
"bSortable": false
}
[/code]
Question:

How to load the table with all of the drilldowns expanded/ opened?

mmcw

I got it working however stays however stays my question about open the table with the drildowns expanded/ opened?
You told me to use

[quote]allan said: $('tbody tr').click(); perhaps? Just trigger the event. [/quote]

But where and how to add this code to the page (http://www.bergmanonlineshop.nl/test2.html)

Hope you ca help so I can continu with my project?

allan

As I noted you'd need to change the selector to click on what actually has the click event. At the moment it is clicking on the row - but you've got the event handler on the td.control element. A trivial change is all that is needed :-)

[code]
$('tbody tr td.control').click();
[/code]

Allan