Nested editor plugin

ikel

Hello,

I just stated using datatables and editor this weekend. I am using pointers from the following thread discussion to create a table field type plug-in which has editor controls on it which is called from an editor. http://datatables.net/forums/discussion/14601/nested-editors/p1

jquery-1.8.2.js
DataTables-1.9.4
TableTools-2.1.4
DataTables.editor-1.2.4

I am using the envelope display controller for the plug-in and am seeing the following results.
var envelopeConf = $.fn.dataTable.Editor.display.envelope;
envelopeConf._findAttachRow = function() { return ('div.DTE_Header')[0]; }
-The line above triggers TypeError: i(...).offset(...) is undefined
envelopeConf._findAttachRow = function() { return ('div.DTE_Header'); }
-No errors are observed with the line above. The background gray as if
the envelope is about to drop but nothing happens
-Without either lines, the envelope drops behind the lightbox.
The lightbox then closes if I try to navigate to the envelope
envelopeConf.conf.windowScroll = false;

Based on the reference discussion (14601) a display controller was not needed. The same appears to apply in my case.

Any help is appreciated. Thanks!

[code]
var dataeditor2;
var dataeditor1;

// Our custom field type
$.fn.DataTable.Editor.fieldTypes.mytablefield = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {

"create": function ( conf ) {
var that = this;

conf._enabled = true;

// Create the elements to use for the input
conf._input = $(''+
''+
//''+
'')[0];

var envelopeConf = $.fn.dataTable.Editor.display.envelope;
//envelopeConf._findAttachRow = function() { return ('div.DTE_Header')[0]; }
//envelopeConf._findAttachRow = function() { return ('div.DTE_Header'); }

envelopeConf.conf.windowScroll = false;

dataeditor2 = new $.fn.dataTable.Editor({

"domTable": "#EditTableTwo",
"display": 'envelope',
//"display": 'details',
"fields": [ {
"label": "Tbl2Data1:",
"name": "tbl1data1"
}, {
"label": "Tbl2Data2:",
"name": "tbl2data1"
}
],
} );

var aryColTableChecked = ["Tbl2Col1", "Tbl2Col1"];
var aryColTable = [];

for (var i = 0; i < aryColTableChecked.length; i++) {
aryColTable.push({
"sTitle": aryColTableChecked[i],
"aTargets": [i],
"sWidth": "15px",
"height": "18px"
});
};
//$('#' + conf.id, conf._input).dataTable({
$('#EditTableTwo', conf._input).dataTable({
"aoColumnDefs": aryColTable,
"sDom": "Tfrtip",
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": dataeditor2 },
{ "sExtends": "editor_edit", "editor": dataeditor2 },
{ "sExtends": "editor_remove", "editor": dataeditor2 }
]
}
}); //end datatable

return conf._input;
}
} );

dataeditor1 = new $.fn.dataTable.Editor( {
"domTable": "#EditTableOne",
//"display": 'envelope',
//"display": 'details',
"fields": [ {
"label": "Tbl1Data1:",
"name": "tbl1data1"
}, {
"label": "Tbl1Data2:",
"name": "tbl1data2",
"type": "mytablefield" //Using the custom field type
}
],
} );

var aryColTableChecked = ["Tbl1Col1", "Tbl1Col2"];
var aryColTable = [];

for (var i = 0; i < aryColTableChecked.length; i++) {
aryColTable.push({
"sTitle": aryColTableChecked[i],
"aTargets": [i],
"sWidth": "15px",
"height": "18px"
});
};

$('#EditTableOne').dataTable({
"aoColumnDefs": aryColTable,
"aoColumns": [
{ "mData": "Tbl1Data1" },
{ "mData": "Tbl1Data2" }
],
"sDom": "Tfrtip",
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": dataeditor1 },
{ "sExtends": "editor_edit", "editor": dataeditor1 },
{ "sExtends": "editor_remove", "editor": dataeditor1 }
]
}

}); //end datatable

function findIndex( store, id ) {
for ( var i=0, iLen=store.length ; i

allan

The problem here is that the two built in display controllers to not currently support nesting - there can be only one instance of each display controller at any one time. It can be shared between Editor instances, but there can be only displayed at a time. Also the envelope display control makes assumptions about attaching to the DataTable that is being edited, since Editor 1.2 much attach to a DataTable (1.3 has a standalone mode, although the envelope display controller still assumes a DataTable will be attached to).

I suspect the best thing to do might be to write a custom display controller - perhaps using a modal interface something like jQuery UI's dialogue control. I can send you some code I have for that if you are interested?

Allan

ikel

Any sample code for a custom controller will defiantly help. Please provide at your convenience.

Thanks,
ikel

allan

Can I send it to you at the e-mail address you used to sign up to the forum with?

Allan

ikel

Yes please do so. Thanks again!