The current behavior of the table insertion works by adding the cursor outside the table. This behavior causes inconsistent issues (e.g. In IE the cursor appears in the last TD, but the typed text is after the table) and faulty user experience. In desktop rich text editors (e.g. MS Word), when a table is inserted the first table cell is selected and this is the users' expected behavior. You can test the modified command by following this example: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml"> </telerik:RadEditor> <script type="text/javascript"> var identifierID = "RadEditor_AfterTable"; function OnClientPasteHtml(editor, args) { var commandName = args.get_commandName(); if (commandName === "InsertTable" || commandName === "TableWizard" ) { var currValue = args.get_value(); currValue = currValue.replace(/<\/table>/gi, "</table><div id=" + identifierID + ">​</div>"); //currValue = currValue + "<div id=" + identifierID + ">​</div>"; args.set_value(currValue); setTimeout(function () { selectFirstTD(editor) }, 0); } } function selectFirstTD(editor) { var $ = $telerik.$; var contBody = editor.get_contentArea(); var identifier = $(contBody).find("#" + identifierID); var table = identifier.prev(); var elmToSelect = table.find("th")[0] || table.find("td")[0]; if (elmToSelect.childNodes && !$telerik.isIE) { elmToSelect = elmToSelect.childNodes[0].nodeName === "#text" && elmToSelect.childNodes[0]; } var hasNextElement = identifier.next()[0]; while (hasNextElement && $(hasNextElement).is("style")) { hasNextElement = $(hasNextElement).next()[0]; } editor.selectElement(elmToSelect); if (!hasNextElement) { table.after("<br/>"); } identifier.remove(); } </script>
There is an on your live demo http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/rows/detailitemtemplate/defaultcs.aspx
None of the demos are displaying correctly. Take a look at: http://demos.telerik.com/aspnet-ajax/orgchart/examples/overview/defaultcs.aspx. It appears that the stylesheet might be missing.
The shortcut TAB key provides correct behavior only for IE ( entities are added). UNder Firefox and Chrome the behavior is incorrect and not expected. In FF - nothing is added to the content, moves the focus to the next HTML element. In Chrome - a SPAN element is inserted. A possible resolutions replacing the added shortcut for TAB key with the InsertTab command: <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { var shortcutManager = editor.get_shortCutManager(); if (shortcutManager.findShortCutByName("InsertTabMozilla")) { shortcutManager.removeShortCut("InsertTabMozilla"); editor.addShortCut("InsertTab", "TAB"); } } </script>
Basic screen design tool will help designers design screens quickly and visualize how they will look with Telerik controls. And then developer with telerik license can develop it as designed by designer.
Resize before focus, and the focus and start typing. Here is the page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="MultiLine" Resize="Vertical"></telerik:RadTextBox> </form> </body> </html>