add label to raddropdownlist in a rad listbox

2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    1 posts
    Member since:
    Oct 2016

    Posted 22 Dec 2016 Link to this post

    Hello, I am new to telerik,

     I have being able to add dropdownlist to my radlistbox but I have a couple of challenges with:

    1. I need to display a label in front of each dropdownlist,

    <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox3" runat="server" AutoPostBackOnTransfer="True">
    <ItemTemplate>
    BDF1<telerik:RadComboBox ID="cmbBDF4" Runat="server" Skin="WebBlue">
    <Items>
    <telerik:RadComboBoxItem runat="server" Font-Size="Smaller" Text="NORTH CENTRAL" Value="NORTH CENTRAL" />
    <telerik:RadComboBoxItem runat="server" Font-Size="Smaller" Text="SOUTHERN" Value="SOUTHERN" />
    <telerik:RadComboBoxItem runat="server" Font-Size="Smaller" Text="NORTHERN" Value="NORTHERN" />
    <telerik:RadComboBoxItem runat="server" Font-Size="Smaller" Text="CENTRAL" Value="CENTRAL" />
    <telerik:RadComboBoxItem runat="server" Font-Size="Smaller" Text="ZONE" Value="ZONE" />
    </Items>
    </telerik:RadComboBox>
    </ItemTemplate>
    <Items>
    <telerik:RadListBoxItem Text="BDF1" Value="BDF1" />
    <telerik:RadListBoxItem Text="BDF2" Value="BDF2" />
    <telerik:RadListBoxItem Text="BDF3" Value="BDF3" />
    <telerik:RadListBoxItem Text="BDF4" Value="BDF4" />
    </Items>
    </telerik:RadListBox>

    2. I need to get the value of each selected dropdownlist value.

     

  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    604 posts

    Posted 26 Dec 2016 Link to this post

    Hello.

    You are using RadComboBox and not RadDropDownList.

    RadComboBox has its own label proper, where as RadDropDownList has nor label property at all. Still you could use a bit of javascript:

    <span class="ddl-label" data-label-for="<%= ddl1.ClientID %>">label for ddl</span>
    <telerik:RadDropDownList runat="server" ID="ddl1"></telerik:RadDropDownList>
     
     
    <script>
        Sys.Application.add_load(function() {
            var $ = $telerik.$;
            $(".ddl-label").click( function() {
                var ddl = $find( $(this).data("label-for") );
                ddl.openDropDown();
            });
        });
    </script>

    To get all the values, you need to simply iterate over the controls, like so:

    var listbox = $find( "<%= RadListBox3.ClientID %>" );
    listbox.get_items().forEach(function( item ) {
        var innerCombo = $(item.get_element()).find(".RadComboBox")[0].control;
        // do something with innerCombo
    });

    (assuming that the listbox is named RadListBox3)


    Regards,
    Ivan Zhekov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top