I am using the jQueryEasyUI datagridview: http://www.jeasyui.com/extension/datagridview.php
in the default formatter, I'm defining my textarea wich will become my jHTMLArea:
detailFormatter: function(rowIndex, rowData){
var x = rowIndex + 1;
html = '<table>'+
' <tr>' +
' <td style="border:0">' +
' <textarea id="text_'+x+'" cols="125" rows="25">'+rowData.text+'</textarea>' +
' <button type="submit" class="btn btn-primary" onclick="save();">Save</button>'+
' <button type="submit" class="btn btn-info" onclick="discard();">Discard</button>'+
' </td>' +
' </tr>'+
'</table>';
$('#text_'+ x).htmlarea({
css: 'style/jHtmlArea.Editor.css',
toolbar: [
["bold", "italic", "underline"],
["p", "h3"],
["link", "unlink"]
]
});
$('#text_'+ x).hide();
Now, when I expand the row to show the details, I load the jHTMLArea:
onExpandRow: function(rowIndex, rowData) {
var x = rowIndex + 1;
window.index = x;
window.gk_text = rowData.text;
setHTML(x, rowData.text);
}
and:
function setHTML(rel, text) {
var html = text;
html = html.replace(/\[/g, '<').replace(/\]/g, '>');
$('#text_'+ rel).htmlarea('html', html);
}
This is an example of the data:
{"totals": 2,
"rows": [{ id: 0, prg_code: "ABC", state: "OL", text: "[h3]Important Information[/h3][p]This is a notice.[/p]"},
{ id: 0, prg_code: "DEF", state: "WB", text: "[h3]Important Information[/h3][p]This is a another notice.[/p]"}]
}
As you can see, I set the toolbar buttons to show only:
["bold", "italic", "underline"],
["p", "h3"],
["link", "unlink"]
But, when I expand the row the editor has ALL the default buttons.
Any ideas how to do that and make the editor fit 100% in the editor area? Note: The Save and Discard buttons work as expected.
Oh, one other thing, when using in conjunction with Bootstrap, the Bootstrap .h? classes override the jHTMLArea classes and cause the toolbar to be messed up.
Would also like to get a select editor for the Type with options OL (val:0), CR (val:1), and WB (val:2)
Your problem is that you are trying to run the htmlarea function on a textarea that doesn't exist yet. The detailFormatter function returns the html that will be rendered, but it doesn't add it to the dom.
Wait and run the htmlarea function in the onExpandRow function and the toolbar will be set up correctly.
detailFormatter: function(rowIndex, rowData){
var x = rowIndex + 1; html = '<table style="width:100%">'+
' <tr>' +
' <td style="border:0;margin:0;padding:0;width:100%">' +
' <textarea id="text_'+x+'" style="width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" rows="25">'+rowData.text+'</textarea>' +
' <button type="submit" class="btn btn-primary uppercase" onclick="save();">Save</button>'+
' <button type="submit" class="btn btn-info uppercase" onclick="discard();">Discard</button>'+
' </td>' +
' </tr>'+
'</table>';
return html;
},
onExpandRow: function(rowIndex, rowData) {
var x = rowIndex + 1;
window.index = x;
window.gk_text = rowData.text;
html = rowData.text.replace(/\[/g, '<').replace(/\]/g, '>');
$('#text_'+ x).htmlarea({
toolbar: [
["bold", "italic", "underline"],
["p", "h3"],
["link", "unlink"]
]
});
$('#text_'+ x).htmlarea('html', html);
}