RibbonBarDropDown and RibbonBarComboBox issue in client side

5 posts, 0 answers
  1. Abhilash
    Abhilash avatar
    9 posts
    Member since:
    Dec 2012

    Posted 09 Oct 2013 Link to this post

    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
  2. Abhilash
    Abhilash avatar
    9 posts
    Member since:
    Dec 2012

    Posted 14 Oct 2013 Link to this post

    hi all,
    Any help???
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 17 Oct 2013 Link to this post

    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.
  5. Abhilash
    Abhilash avatar
    9 posts
    Member since:
    Dec 2012

    Posted 19 Oct 2013 Link to this post

    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
  6. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 22 Oct 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017