My client desires to have a dropdown similar to Symbols Dropdown in the RTE (sitecore version 7.0). The client wants different dropdowns for different symbol types, for example, a dropdown having Greek Symbols Upper case, a dropdown having Greek Symbols Lower case, a dropdown having Mathematical Symbols and a dropdown having Other/Misc types of symbols.
I have tried to understand how RadControls work and how to add this on Telerik RadControl but I am unable to map the concept to sitecore's rich text editor. Additionally, I have tried to understand how existent Symbols Dropdown in RTE works but since its code is embedded in Sitecore.Client dll I cant understand much from it.
Can some one please detail the steps to achieve this?
Thanks,
Vaibhav.
You can add your own custom drop list or drop button to the RTE.
Switch to the core database and add a new button in the toolbar of the RTE profile you are using (e.g. /sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Toolbar 1)
Make sure the template of the button is of type Html Editor Custom Drop Down or Html Editor Custom Drop Down Button, these can be found in /sitecore/templates/System/Html Editor Profiles. Give a name in the 'Click' field, e.g. InsertCustomSymbols
Add child items to your button to create the "symbols" or text you need using Html Editor List Item template. The 'Header' value is what will be displayed in the dropdown list and 'Value' is what will get inserted (e.g. your greek symbols).
You now need to handle the click event of the button, create a file with the following JS:
RadEditorCommandList["InsertCustomSymbols"] = function(commandName, editor, args) {
var val = args.get_value();
editor.pasteHtml(val);
args.set_cancel(true);
}
Create a patch config to add the JS file:
<clientscripts>
<htmleditor>
<script src="/location/to/custom.js" language="javascript" key="customJs" />
</htmleditor>
</clientscripts>
If you used the Drop Down Button then also add a css style to set the icon, it should also be the same name as the 'Click' field.
<style type="text/css">
span.InsertCustomSymbols
{
background-image:url('/path/to/icon.gif');
}
</style>
I didn't style it but you get the idea. Add as many as you need, make sure you set the correct RTE profile.
You can find a bit more info in this Telerik Custom Dropdown demo
Related
For the various kendo editor tools like List, Table etc. we need to change the content before its inserted into the editor. For example, add a CSS class to a UL element or add some data properties.
How do we achieve this? We looked at the command event, however, changing values of the command does not seem to have any impact in the final HTML that is inserted into the editor.
I've been trying to get a selected dropdown option to appear in a Word Document on export.
The current default behavior is that all option tags appear in the exported document with no indication of which was selected. (This makes sense that this behavior would occur since the export function is simply exporting all the html as plain text).
So far, these are the approaches I've tried (none of which work):
-Capture the export event before it is sent to the controller via the javascript execute event (thus being able to strip out any unwanted text). The issue is the execute event and exportas event are asynchronous, so I can't modify the file before the export event call is executed.
-Modify the text on the controller side before it is converted to a Word document and downloaded (the text is sent through without special characters, which makes it nearly impossible to parse)
-Attempt to replace the dropdown with a kendo autocomplete widget (this would also be an acceptable solution). The widget does not render properly inside the document. All of the datasource options are there and even filters corretly, but it does not style correctly or open.
Has anyone else been able to find a solution to this problem or have another approach I could use?
EDIT:
As per requested, here is a screenshot of the base code:
My initial idea on how you could accomplish this:
1. Pull that select list out of your editor.
2. Bind an event handler to the change event of your list to add the value of your list into the editor. Are you using JQuery in your project? It's a dependency for Kendo so this ought to work:
$("#selectListId").on("change", function () {
$("#editor").val( $("#selectListId").val());
});
In reality though I'm guessing this approach will be used to populate some template of text with values selected by the user? In that case, you may want to save the template first before applying the value selected.
Now that you've identified you need that dropdown menu to be usable on the exported word document, attempt the following:
Create a new word document.
In that word document, open the Developer tab. (If you don't know about it, google how to enable it)
Insert a new Dropdown Menu Content Control using the Developer tab.
Select this content control, then open Properties menu item on Developer tab.
Update the content control with your values:
Save this word document.
Use the Kendo Editor Import to import this document containing your template.
Attempt exporting what was just imported.
If that works and the editor has editable dropdowns from that content control, I will be very surprised... Good luck!
Does kendo have any option to set FOOTER template like header ?
My requirement is to show some content in Footer, say that "Type more for refine search"
The Kendo Combobox does not support footers.
http://www.telerik.com/forums/footer-template-in-combobox
The ComboBox widget does not support footerTemplate. As an alternative
solution I suggest putting the checkbox outside of the widget and use
the setOptions method to modify the filter that is used by the widget.
For example:
I would kindly ask for your help :) From couple of days I am trying to achieve "linked" custom field in content editor and dropdown in page editor.
Basically I want to have dropdown in page editor and content editor which are responsible for a same thing.
In my c# code i have enums which represent directions. I created custom field which accepts assembly and class with overridden onload method and successfully populate dropdown values in the content editor. So far so good but i have no idea how to create dropdown which will represent the same functionality inside page editor.
So please give me any ideas...
Judging from your reply to my comment you need to think of the following: How is my field value being rendered onto a page?
If you are always using 1 control to do this then you just need to ensure that this control has 2 different rendering modes depending on the Context.PageMode
But as I understand it you want this dropdown to also appear when someone renders your custom field using a <sc:FieldRenderer>. In this case you'll need to look into the RenderField pipeline of Sitecore. There you find a processor called RenderWebEditing. Possibly through some manipulation here you can get your dropdown appear as you wish.
We are using a Telerik Rad ComboBox to render a drop down. The issue is by default it renders a div and<ul><li> for the drop down list. We tried setting the RenderingMode to "Simple" BUT for some reason the RenderingMode property is not taking. We want the Simple property because it is SUPPOSED TO ouput:
<select><option></option></select>
instead it is still rendering
<ul> <li>.
On mobile devices we want the list to pop up the device's default select option viewer.
We found that there is a property for the ComboBox to set RenderingMode="Simple", HOWEVER, it does not seem to be switching out our RadComboBox to elements, it is keeping the default. I checked the HTML output in Firebug and nothing has changed. The RadComboBox is inside a RadGrid that is triggered when "Add new record" selected.
Any reasons why setting the RenderingMode to Simple doesn't work???
EDIT
I see it rendering the select in Firebug and the style is pushed way left -9999 and the position if fixed, I overwrote the CSS so that those came into view BUT the values are not taking or inputting into our RadGrid when we click save. It does not seem the items have the same values.
EDIT 2
Image 1. Even though we have RenderingMode="Simple" it still creates the 'ul li' version.
Image 2. It creates the HTML but according to the documentation the 'ul li' is supposed to be gone and the droplist is supposed to show up in place of it. Instead, as you can see in Firebug, it inputs BOTH.
Image 3. Shows both input types when I take the -9999px or the position fixed from the CSS can see both actually are rendered on the page
Image 4. Is the Code example. Very simple .Net using the RadComboBox with the RenderingMode specified but not working correctly.