Resetting Custom EditorSplitButton

[Mano srinivasan]

Hi,

I am using RadEditor for ASP.Net AJAX.  i have created custom EditorSplitButton with dropdownitems.

if i click one dropdownitem, it will fire the event correctly. after that the selected item wont be reset.how can i do that in javascript.

// Design
 <telerik:RadEditor runat="server" ID="RadEditor1" Skin="Sunset" EditModes="Design" OnClientCommandExecuting="OnClientCommandExecuting">
 <Tools>
 <telerik:EditorToolGroup>
<telerik:EditorSplitButton Name="FontSize" Text="Size" ItemsPerRow="1" ShowText="true"  Width="200px">
<telerik:EditorDropDownItem Name="Smallest"   Value="1"/>
<telerik:EditorDropDownItem Name="Smaller"   Value="2"/>
</telerik:EditorSplitButton>
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>

//Javascript

function OnClientCommandExecuting(editor, args)
            {
              if (name == "FontSize")
                {
                    var tool = args.get_tool();
                    var span = tool.get_element().getElementsByTagName("SPAN")[0];
                    span.style.backgroundImage = "url(" + val + ")";
                     editor.pasteHtml('[SIZE="' + val + '"]' + editor.getSelectionHtml() + '[/SIZE]');
                    args.set_cancel(true);
                    editor.getSelectedElement() = val;
                }

My question is initially the tool looks like , FontSize- within the dropdown Smallest,Smaller will come.
if i select Smaller, it fires the event and selected item is on the top.

but i want to reset the tool, so that Font Size will come on the top.

How to do that?

Please reply me early,

Thanks,
Mano.

[Rumen]

Hi Mano,

Use the set_updateHeader method to disable the header update functionality of your split button

var tool = editor.getToolByName("FontSize");  
//Disable header update functionality  
tool.set_updateHeader(false);


All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Mano srinivasan]

Thanks Rumen .... its working properly...

i am having another one doubt... can we give different image icons for each drop down item in the tool group?

[Rumen]

Hi Mano,

Using the following syntax  you can set icons for the splitbutton items:

<telerik:RadEditor runat="server" ID="RadEditor1" Height="200px"
        OnClientCommandExecuting="OnClientCommandExecuting">
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorSplitButton Name="Emoticons2" Text="Emoticons set inline" ItemsPerRow="5"
                    PopupWidth="170px" PopupHeight="117px">
                    <telerik:EditorDropDownItem Name="<img src='icons/1.gif' />Item Name" Value="icons/1.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/2.gif' />" Value="icons/2.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/3.gif' />" Value="icons/3.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/4.gif' />" Value="icons/4.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/5.gif' />" Value="icons/5.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/6.gif' />" Value="icons/6.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/7.gif' />" Value="icons/7.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/8.gif' />" Value="icons/8.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/9.gif' />" Value="icons/9.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/10.gif' />" Value="icons/10.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/11.gif' />" Value="icons/11.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/12.gif' />" Value="icons/12.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/13.gif' />" Value="icons/13.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/14.gif' />" Value="icons/14.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/15.gif' />" Value="icons/15.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/16.gif' />" Value="icons/16.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/17.gif' />" Value="icons/17.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/18.gif' />" Value="icons/18.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/19.gif' />" Value="icons/19.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/20.gif' />" Value="icons/20.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/21.gif' />" Value="icons/21.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/22.gif' />" Value="icons/22.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/23.gif' />" Value="icons/23.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/24.gif' />" Value="icons/24.gif" />
                    <telerik:EditorDropDownItem Name="<img src='icons/25.gif' />" Value="icons/25.gif" />
                </telerik:EditorSplitButton>
            </telerik:EditorToolGroup>
        </Tools>

You can see the following live demo for more info: Custom Dropdowns.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.