RadComboBox / AJAX 4.0 Template Keyboard Issue

[Kori]

I have the following:

<telerik:RadComboBox ID="healthNumberCmbo" runat="server" AllowCustomText="true"
HighlightTemplatedItems="true" EnableLoadOnDemand="true" LoadingMessage="Loading ..." Height="250px"
MarkFirstMatch="true" OnClientItemsRequesting="onClientItemsRequesting"
OnClientItemDataBound="onClientItemDataBound">
     <WebServiceSettings Method="GetPatients" Path="Services/PatientAC.asmx" />
</telerik:RadComboBox>

<!-- Client-side Data Template -->
<div id="myTemplate" class="sys-template">
     <b>Name:&nbsp;</b>{{FullName}}<br />
     <b>DOB:&nbsp;</b>{{BirthDate.format("MM/dd/yyyy")}}<br />
     <b>HC#:&nbsp;</b>{{HealthNumber}}
</div>

function onClientItemsRequesting(sender, eventArgs)
{
    var context = eventArgs.get_context();
    context["filterString"] = eventArgs.get_text();
}

function onClientItemDataBound(sender, eventArgs)
{
    var item = eventArgs.getItem();
    var dataItem = eventArgs.get_dataItem();

    // set the attributes that we can use when they select the item
    item.get_attributes().setAttribute("healthNumber", dataItem.HealthNumber);
    item.get_attributes().setAttribute("fullName", dataItem.FullName);
    item.get_attributes().setAttribute("birthDate", dataItem.BirthDate);

    // set the value to the ID of the patient
    item.set_value(dataItem.PatientID);

    var template = new Sys.UI.Template($get("myTemplate"));
    template.instantiateIn(item.get_element(), dataItem);
}

I've based my functionality off of the blog post here .. my issue is this:

When the user clicks to open the combo box, and it loads, and they use the UP and DOWN arrows on the keyboard, the text that gets set in the combo box is what was in the template for that item. 

How can I use the template, but at the same time - be able to only put the Health Number in the textbox. The reason is that we have clientside validation by using the CustomValidator - and for that to work before you select the item, the text in the box needs to be what i'm expecting. 

Case 1: What I currently get in the textbox when the user uses the UP/DOWN keys and doesn't press enter or leave the combo ...

Name: Some Guy DOB: 1/1/2009 HC#: 1234567890

Case 2: What I want in the textbox under that situation:

1234567890

I'm using a validation RegEx of "^\\d{10}$", which obviously isn't valid under Case 1 .. 

Help!

[Kori]

I guess one solution would be to match against "^Name" first .. but that's not really a great solution. It still shows all the information in the textbox and it looks weird to the user.

[Simon]

Hi Kori,

This is the normal behavior in this case as each Item's Text becomes a concatenation of all fields of the respective DataItem returned by the WebService.

In order to achieve your requirement you need to set the Text of Items manually to the desired value by handling the client-side SelectedIndexChanged event as shown below:

function onSelectedIndexChanged(sender, eventArgs)
{
    var item = eventArgs.get_item();
    sender.set_text(item.get_attributes().getAttribute("HealthNumber"));
    sender.set_value(item.get_value());
}

Greetings,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Kori]

I'm already doing exactly that, which is why I'm confused as to why it's not working.

I oversimplified my declarative sample to show you, but I am indeed doing what you suggested. I can give you exactly what I'm doing if that would help.

[Simon]

Hi Kori,

Indeed, this is strange. Surely if you provide us with your full implementation we would be able to provide more specific information about the issue.

In this sense, please open a support ticket and send us your working page/project there - we will inspect it more thoroughly.

Greetings,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.