Display Different Text in ComboBox Header/DropDown

7 posts, 0 answers
  1. Keith
    Keith avatar
    23 posts
    Member since:
    Jan 2013

    Posted 27 Jan 2014 Link to this post

    I would like to be able to display different text in the combo box visual portion and it's dropdownlist.  Example: I have a combobox with the following items

    Supervisor
    Superintendent
    Project Lead
    Project Manager
    Program Manager

    So when you select the combobox you get the dropdown with those items.  But then when you select Supervisor, instead of displaying Supervisor on the screen it now displays a two digit code such as "21".  When clicking the combo box that displays "21" I'd like it to still show the above list items.

    Is this possible?

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Jan 2014 in reply to Keith Link to this post

    Hi Keith,

    Please have a look into the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="select"                                                                     OnClientSelectedIndexChanged="OnClientSelectedIndexChanged1">
        <Items>
            <telerik:RadComboBoxItem Text="Supervisor" />
            <telerik:RadComboBoxItem Text="Superintendent" />
            <telerik:RadComboBoxItem Text="Project Lead" />
            <telerik:RadComboBoxItem Text="Project Manager" />
            <telerik:RadComboBoxItem Text="Program Manager" />
        </Items>
    </telerik:RadComboBox>

    JavaScript:
    <script type="text/javascript">
        function OnClientSelectedIndexChanged1(sender, args) {
            var countriesCombo = $find("<%= RadComboBox1.ClientID %>");
            if (args.get_item().get_text() == "Supervisor")
                sender.set_text("21");
            else
                sender.set_text("20");
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    23 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2014 in reply to Shinu Link to this post

    Amazing.  Thank you.  That worked perfectly.
  5. Keith
    Keith avatar
    23 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2014 in reply to Shinu Link to this post

    I have another question that applies to this if you'd be so kind.  I am populating these RadComboBoxes through the RadGrid's PreRender event and also applying their SelectedValue based upon some lookups.

    Is there a way to fire your javascript after I apply the SelectedValue?

    What I'm running into is the ComboBox initial selected value is displaying "Supervisor" instead of "21".  Once changed it displays the correct value as your solution above, but I would like to apply this to the default values as well.  A codebehind solution that I can run in PreRender would also work.  I attempted to apply the change to the RadComboBox.SelectedItem.Text during PreRender, but that changed the actual item in the dropdownlist as well.  Thank you again for your time.
  6. Keith
    Keith avatar
    23 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2014 in reply to Keith Link to this post

    This is a sample of what my code looks like.

    C#

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
        {
            RadComboBox radComboBox1 = item.FindControl("RadComboBox1") as RadComboBox;
     
            radComboBox.Items.Clear();
            RadComboBoxItem comboItem = new RadComboBoxItem();
            comboItem.Text = "21 Supervisor";
            comboItem.Value = "0";
            radComboBox.Items.Add(comboItem);
     
            // perform some lookup here and come up with 0
     
            radComboBox.SelectedValue = 0;
        }
    }

    ASPX:

    <telerik:RadGrid ID="RadGrid1" runat="server" OnPreRender="RadGrid1_PreRender">
         <MasterTableView AutoGenerateColumns="false" ShowHeader="false" TableLayout="fixed">
              <Columns>
                   <telerik:GridTemplateColumn>
                        <ItemTemplate>
                             <telerik:RadComboBox ID="RadComboBox1" runat="server"
                             ShowToggleImage="false" NoWrap="true"
                             OnClientSelectedIndexChanged="RadComboBox1_SelectedIndexChanged" />
                        </ItemTemplate>
                   </telerik:GridTemplateColumn>
              </Columns>
         </MasterTableView>
    </RadGrid>

    JavaScript:

    <script type="text/javascript" >
        function RadComboBox1_SelectedIndexChanged(sender, args) {
     
            var str = args.get_item().get_text();
            var n = str.length;
     
            if (n > 0) {
                sender.set_text(str.substring(0,2));
            }
     
        }
    </script>


    This takes the dropdown item of "21 Supervisor" and changes it to view "21", but it still shows "21 Supervisor" when the grid loads.
  7. Keith
    Keith avatar
    23 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2014 in reply to Shinu Link to this post

    Another issue just arose from the solution.  When attempting to retrieve the value from codebehind after SelectedIndexChanged fires, I lose the SelectedValue. 
  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 31 Jan 2014 Link to this post

    Hello,

    Regarding your first question - please note that the RadComboBox OnClientSelectedIndexChanged is fired only when a new item is selected from the drop down list. Having this fact in mind the logic for setting the RadComboBox text shown in the following code snippet:
    //JavaScript
    var str = args.get_item().get_text();
    var n = str.length;
            if (n > 0) {
                sender.set_text(str.substring(0,2));
            }
    will not be executed on initial load but only when user selects a new item. My suggestion would be to use the OnClientLoad event as shown below:
    //JavaScript
    function clientLoad(sender) {
        var item = sender.get_selectedItem();
        var itemText = item.get_text();
        sender.set_text(itemText.substring(0, 2));
        sender.set_value(item.get_value());
    }
    //markup code
    <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientLoad="clientLoad" AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">

    As for your second question - please note that when the server-side event SelectedIndexChanged is fired e.Value does contain the newly selected item's value. In order to retrieve the old value ( before selecting the new item) you can get it using e.OldValue .

    Regards,
    Boyan Dimitrov
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017