This is a migrated thread and some comments may be shown as answers.

RibbonBarDropDown and RibbonBarComboBox issue in client side

4 Answers 63 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Abhilash
Top achievements
Rank 1
Abhilash asked on 09 Oct 2013, 06:02 AM
Hi all,

I want to access rad ribbonbar items in client side and set/get its values. Please help me to achieve this.
I want to do the following things.
1.Get and Set values to ddlText (RibbonBarDropDown )
2.Get and Set values to cbSize (RibbonBarComboBox)
3.How can I bind data to ddlText  and cbSize

NB: I am using Telerik  2013.1.220.40

My rad ribbonbar looks like follows.

 <telerik:RibbonBarGroup Text="Font" EnableLauncher="false" Value="Font">
                        <Items>
                            <telerik:RibbonBarControlGroup Orientation="Vertical">
                                <telerik:RibbonBarControlGroup Orientation="Horizontal" >
                                    <telerik:RibbonBarDropDown ID="ddlText"   Width="97" >
                                        <Items>
                                            <telerik:RibbonBarListItem Text="Arial" />
                                            <telerik:RibbonBarListItem Text="Calibri (body)"  Selected="true" />
                                            <telerik:RibbonBarListItem Text="Comic Sans" />
                                            <telerik:RibbonBarListItem Text="Tahoma" />
                                            <telerik:RibbonBarListItem Text="Verdana" />
                                        </Items>
                                    </telerik:RibbonBarDropDown>
                                    <telerik:RibbonBarComboBox ID="cbSize"  Width="40" >
                                        <Items>
                                            <telerik:RibbonBarListItem Text="8"  />
                                            <telerik:RibbonBarListItem Text="9" />
                                            <telerik:RibbonBarListItem Text="10" Selected="true" />
                                            <telerik:RibbonBarListItem Text="11" />
                                            <telerik:RibbonBarListItem Text="12" />
                                            <telerik:RibbonBarListItem Text="14" />
                                            <telerik:RibbonBarListItem Text="16" />
                                            <telerik:RibbonBarListItem Text="18" />
                                            <telerik:RibbonBarListItem Text="20" />
                                            <telerik:RibbonBarListItem Text="22" />
                                            <telerik:RibbonBarListItem Text="24" />
                                            <telerik:RibbonBarListItem Text="26" />
                                            <telerik:RibbonBarListItem Text="28" />
                                        </Items>
                                    </telerik:RibbonBarComboBox>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarToggleButton  ID="tgleBold" Size="Small" Text="Bold" ImageUrl="images/icons/formD-Small-Icon-Bold.png"
                                        DisabledImageUrl="images/icons/formD-Small-Icon-Bold.png" Value="BOLD" />
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="images/icons/formD-Small-Icon-Italic.png"
                                        DisabledImageUrl="images/icons/formD-Small-Icon-Italic.png" Value="ITALIC" />
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="images/icons/formD-Small-Icon-Underline.png"
                                        DisabledImageUrl="images/icons/formD-Small-Icon-Underline.png" Value="UNDERLINE" />
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="images/icons/formD-Small-Icon-Strike.png"
                                        DisabledImageUrl="images/icons/formD-Small-Icon-Strike.png" Value="STRIKE" />
                                    <telerik:RibbonBarToggleList>
                                        <ToggleButtons>
                                            <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="images/icons/Superscript.png">
                                            </telerik:RibbonBarToggleButton>
                                            <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="images/icons/Subscript.png">
                                            </telerik:RibbonBarToggleButton>
                                        </ToggleButtons>
                                    </telerik:RibbonBarToggleList>
                                </telerik:RibbonBarControlGroup>
                            </telerik:RibbonBarControlGroup>
                        </Items>
                    </telerik:RibbonBarGroup>

 
Thank you
Abhi

4 Answers, 1 is accepted

Sort by
0
Abhilash
Top achievements
Rank 1
answered on 14 Oct 2013, 05:51 PM
hi all,
Any help???
0
Bozhidar
Telerik team
answered on 17 Oct 2013, 08:40 AM
Hello Abhilash,

You can set the selected index of these controls (and the text for the ComboBox) using the client API of RadRibbonBar. Here's a small example:
<telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" >
    <Tabs>
        <telerik:RibbonBarTab Text="Home">
            <telerik:RibbonBarGroup Text="Button">
                <Items>
                    <telerik:RibbonBarDropDown>
                        <Items>
                            <telerik:RibbonBarListItem Text="item 1" />
                            <telerik:RibbonBarListItem Text="item 2" Selected="true" />
                            <telerik:RibbonBarListItem Text="item 3" />
                        </Items>
                    </telerik:RibbonBarDropDown>
                </Items>
            </telerik:RibbonBarGroup>
        </telerik:RibbonBarTab>
    </Tabs>
</telerik:RadRibbonBar>
    <script type="text/javascript">
    function pageLoad() {
        $find("RadRibbonBar1").getTab(0).getGroup(0).getItem(0).set_selectedIndex(0)
    }
</script>

As for databinding, RadRibbonBar supports loading its items through XML
 

Regards,
Bozhidar
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Abhilash
Top achievements
Rank 1
answered on 19 Oct 2013, 06:41 AM
Thank you Bozhidar ,

It is woking. But the same time OnClientDropDownSelectedIndexChanged event also firing. How can i avoid firing this event while set the selected index .

Thank you
abhi
0
Bozhidar
Telerik team
answered on 22 Oct 2013, 07:16 AM
Hi Abhilash,

You can simply use the _setSelectedIndex function instead.
 

Regards,
Bozhidar
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
RibbonBar
Asked by
Abhilash
Top achievements
Rank 1
Answers by
Abhilash
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or