Display Different Text in ComboBox Header/DropDown

[Keith]

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?

[Shinu]

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.

[Keith]

Amazing.  Thank you.  That worked perfectly.

[Keith]

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.

[Keith]

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.

[Keith]

Another issue just arose from the solution.  When attempting to retrieve the value from codebehind after SelectedIndexChanged fires, I lose the SelectedValue. 

[Boyan Dimitrov]

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