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

Display Different Text in ComboBox Header/DropDown

6 Answers 393 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 27 Jan 2014, 08:57 PM
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?

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 28 Jan 2014, 08:24 AM
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.
0
Keith
Top achievements
Rank 1
answered on 28 Jan 2014, 12:39 PM
Amazing.  Thank you.  That worked perfectly.
0
Keith
Top achievements
Rank 1
answered on 28 Jan 2014, 07:06 PM
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.
0
Keith
Top achievements
Rank 1
answered on 28 Jan 2014, 07:16 PM
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.
0
Keith
Top achievements
Rank 1
answered on 28 Jan 2014, 07:43 PM
Another issue just arose from the solution.  When attempting to retrieve the value from codebehind after SelectedIndexChanged fires, I lose the SelectedValue. 
0
Boyan Dimitrov
Telerik team
answered on 31 Jan 2014, 11:17 AM
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.
Tags
ComboBox
Asked by
Keith
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Keith
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or