Disallow custom text for a RadCombo with RadTree in template

[Vijay]

Hello,

I have a RadComboBox with a single RadTreeView as the template item. I essentially want to allow the user to pick an option from the Tree in the drop down, trigger a postback on the tree nodeclick to save and act on the selection, then set the text of the combo box to the item that was selected in the Tree. The only way I've been able to achieve this thus far is by setting the AllowCustomText attribute to "true" on the RadCombo box. If I don't set this to true, the RadCombo box does not display the value that I have set from the selected tree node during the postback. When I set AllowCustomText to "true" however, this allows the user to type text into the RadComboBox field, which is not acceptable. I need to restrict the value of the RadComboBox to the items displayed in the contained tree. Preferably, the user cannot type into the RadComboBox at all. Clicking on this field should just open the drop down so the user can select an item from the tree. 

Markup:

<telerik:RadComboBox ID="RadComboObjectPicker" runat="server" Skin="Office2010Blue" Width="150px" Height="300px" AccessibilityMode="True" EnableTextSelection="False" AllowCustomText="true" DropDownWidth="250px">
<Items>
<telerik:RadComboBoxItem runat="server" TabIndex="1" />
</Items>
<ItemTemplate>
<telerik:RadTreeView ID="RadTreeObjectPicker" runat="server" Skin="Office2010Blue" OnNodeClick="RadTreeObjectPicker_NodeClick" TabIndex="1" >
</telerik:RadTreeView>
</ItemTemplate>
</telerik:RadComboBox>

 
C# Code Behind:

protected void RadTreeObjectPicker_NodeClick(object sender, RadTreeNodeEventArgs e)
{

    //if (!String.IsNullOrEmpty(e.Node.Value))
    //{
    //    TakeSomeAction(e.Node.Value);
    //}

    RadComboObjectPicker.Text = e.Node.Text;
}

I'm open to any suggestions to achieve this behavior. Thanks! 

[Dimitar Terziev]

Hi,

In order to prevent the user from being able to write in the input, but still keep the AllowCustomText property to True, please subscribe to the client-side OnClientLoad even and use the following implementation of the event handler function:

function OnClientLoad(sender){

           var inputElement = sender.get_inputDomElement();
           inputElement.disabled = "disabled";
       }

Regards,
Dimitar Terziev
the Telerik team

[Vijay]

This fix successfully prevents the user from being able to type into the field, even when allowcustomtext is set to true. Thanks for the reply! Setting the input field to disabled actually greys out the field so it looks disabled, however. Is there a way to change the style of the element after it is disabled so that it does not look disabled? Perhaps using javascript after the element is disabled, or some custom css attribute to set the disabled style of the combo box?

Thanks!
Vijay

[Dimitar Terziev]

Hi Vijay,

The text in the RadComboBox is gray because IE adds specific styles to the input elements which are disabled. Please try to make the input read only instead of disabled using the following code:

function OnClientLoad(sender) {

               var inputElement = sender.get_inputDomElement();
              inputElement.readOnly = true;

           }

All the best,
Dimitar Terziev
the Telerik team

[Vijay]

The readOnly attribute was exactly what I needed. Thanks!