Hi Telerik team,
We have an issue with table caption in the table wizard, this issue can be reproduce on demo site.
How to reproduce :
1. create a table using table wizard
2. go to "Accessibility tab" and add caption
3. close the table wizard
4. bold the table caption and switch to <HTML> mode, you will see "<caption><strong>table caption</strong></caption>"
5. right click mouse and open "Table Properties"
6. caption textbox is empty if you format caption
Is there any solution to fix this issue?
Thanks in advance,
Lan
2 Answers, 1 is accepted
Hi Lan,
The reported behavior is by design. If there is applied formatting on the text of the caption, the caption text is not shown since it will include the HTML tags which is not a good UX practice because of the end-users who may not understand what the HTML is.
Similar behavior can be observed in the Hyperlink dialog when the URL text is formatted, the Link Text input is not shown in the dialog. If the formatting is removed the Link Text textbox will appear back again.
If you'd like to customize this behavior for your users, you can modify the following function inside the \EditorDialogs\AccessibleTable.ascx external dialog file:
_loadData: function () {
if (this._table) // retreive table's data
{
// caption
var caption = this._table.caption;
if (caption) {
this._captionHalign = this._getCaptionHalign(caption);
this._captionValign = this._getCaptionValign(caption);
if ($telerik.isIE) // IE
this._caption = this._table.caption.innerText;
else // NS
this._caption = this._table.caption.innerHTML;
}
else {
this._caption = '';
this._captionHalign = '';
this._captionValign = '';
}
this._alignmentSelector.setTagName("CAPTION");
this._alignmentSelector.updateValue(this._captionHalign, this._captionValign);
// summary
this._summary = this._table.summary;
// heading
this._headingRows = this._countHeadingRows();;
this._headingColumns = this._countHeadingColumns();
this._setCellID = this._checkHeadersHasIds() || this._checkCellsHasHeaders();
// show data
this._updateData(false);
}
},The changed line is
this._caption = this._table.caption.childNodes[0].nodeValue;
to
this._caption = this._table.caption.innerHTML;
You can find more information how to register the external editor dialogs in this article: ExternalDialogsPath Property.
Best Regards,
Rumen
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran