initComplete - Adding custom control after label

BROB201

I'm trying to add a small button to the right of a field in the main editor modal, which will pop up a modal showing more information about the field. I have more text than will reasonably fit into the labelInfo.

var editorParameters.events.initComplete = function (event, settings, jsonData) {
    //setup the $button here
    $('div.DTE_Field_Name_bond_group label div.DTE_Label_Info').before($button);
}

Where $button is set up with a jQuery object containing the button.

I have tried adding the button using the selector above at several times during initialization. If I run the function in the console after opening up the main editor modal, the control shows up just fine. But during the initComplete function, the elements in the form do not yet exist as I would expect from the name. It appears that the main editor form is only truly initialized once the _assembleMain function is called.

Could you recommend a better place to do this. Either a different event, or a method I can call in initComplete which lets me add a control directly to the right of a label? I saw fields.labelInfo, but it doesn't say it can take html like the one for the input field.

allan

The Editor initialisation is synchronous, so you don't need to wait for an initComplete (the fact that it exists at all is a legacy reason, back when events were added at init time). Instead, use field().node() or field().input() to get the nodes and then use them - e.g.:

var editor = new $.fn.dataTable.Editor( {
  ...
} );

editor.field('myField').input().after( $button );

Regards,
Allan

BROB201

I'll try getting the nodes/inputs directly. In the mean time, in case others run into this as well, I did also try:

editor.field('bond_group').labelInfo($button);

but that did not quite work. It did toss the button in there, but it must have just tossed the html in there directly or something because the bound click event didn't survive.

BROB201

That definitely was the direction I needed to go.

var $node = $(editor.field('bond_group').node());
var $labelInfo = $node.find('div.DTE_Label_Info');
$labelInfo.before($button);