Web Service DataBind

[Ashley]

I understand that when databinding to a web service you can't use the ItemTemplate. As a workaround, I set the Text property of the RadComboBoxItemData to the HTML I wanted to display in the drop down. This works, except that if I select an item in the drop down or use the up or down keys to navigate through the items, the HTML is displayed in the textbox. I am able to change the text when the selected item is changed, using a custom attribute of the item, but I'm not sure how to handle it for the up and down arrow selections.

Is there an event that fires when the text in the textbox is set? Or a way to override what is displayed in the textbox? Basically I need a way to set the DataTextField on the client side if that's possible.

We're really trying to avoid the old load on demand since this is on a master page. We don't want to have all those partial postbacks and the web service seems to be much faster.

[Ashley]

I made some progress handling the onKeyDown event of the combobox input element (onclientkeypressing didn't work since I couldn't stop the propogation of the event and the control went on to handle it, overwriting my changes). It checks if the up or down keys were pressed, gets the highlighted item, and highlights the item before or after it (depending on up or down) - updating the text of the combo box in the process.

The only thing I'm missing now is that when you normally iterate through the items with the down arrow, the highlighted item will stay in in view in the drop down, forcing the scroll bar to move. My modification doesn't do that, it will keep updating the text in the textbox, but the highlighted item is below the visible area of the drop down, if that makes sense.

It works for the most part, but seems like an unnecessary work around. It's too bad there isn't a HighlightedItemChanged event!

function onKeyDownHandler(ev) {

    ev = ev || window.event;

    var keyCode = ev.keyCode || ev.charCode;

    if (keyCode != 38 && keyCode != 40) return; // up or down key

 

    var sender = $find("<%= rcbSearch.ClientID %>");

 

    var highlightedItem = sender.get_highlightedItem();

    var items = sender.get_items();

 

    if (items == null) return;

 

    if (highlightedItem == null) {

 

        // highlight the first item

        var item = items.getItem(0);

        var name = item.get_attributes().getAttribute("Name");

        sender.set_text(name);

        item.highlight();

 

        return;

    }

 

    var index = items.indexOf(highlightedItem);

 

    // index out of range

    if ((keyCode == 38 && index < 1) || (keyCode == 40 && index >= items.get_count() - 1)) return;

 

    if (keyCode == 40)

        item = items.getItem(index + 1);

    else

        item = items.getItem(index - 1);

 

    name = item.get_attributes().getAttribute("Name");

    sender.set_text(name);

    item.highlight();

 

    // stop the propogation so the control doesn't handle it

    ev.cancelBubble = true;

    ev.returnValue = false;

    if (ev.preventDefault) ev.preventDefault();

    if (ev.stopPropagation) ev.stopPropagation();

}

[Kalina]

Hi Ashley,

As far as I understand - you use Load On Demand with WebService and you want to use the RadComboBox templates.
I am not sure that your approach is quite correct.
You can use templates as is described in this blog post. Or you can use JQuery Templates.

Additionally - we plan to implement client-side templates in RadComboBox for the next release.

All the best,
Kalina
the Telerik team

[Ashley]

<rad:RadComboBox id="rcbSearch" Runat="server"  EnableLoadOnDemand="true"  AutoPostBack="false" AllowCustomText="true">
    <WebServiceSettings Method="GetSearchItems" Path="~/HomePage.aspx" />
</rad:RadComboBox>

We used to use the ItemTemplate with LoadOnDemand to the code-behind - which would cause a partial postback. We're trying to now use the WebService as above, but as stated elsewhere, ItemTemplate doesn't work with that.

We don't use ASP.NET 4.0 so we can't use the templates as described in the blog post. I can look into the jQuery templates, but I'm not even sure how I would go about using them. It's also a plugin that was never moved from beta.

What I'm trying to figure out is if there is a way, with javascript, to override the action that puts the highlighted item into the input. With my current workaround (putting the html directly into the text field of the RadComboBoxDataItem) I end up with the html displaying in the textbox. There must be some way of doing what I'm trying to do since the control is already capable of displaying different text than is in the dropdown if you use the old way of Loading on Demand with the DataTextField property. You then have your templated item in the drop down and your specified text gets displayed in the input box.    

[Kalina]

Hi Ashley,

What is the version of RadControls for ASP.NET AJAX that you use?

Greetings,
Kalina
the Telerik team

[Ashley]

I believe we're using 2011 Q1, 2011.1.519.35 specifically.

[Kalina]

Hello Ashley,

In general we plan to implement client-side templates in RadComboBox for future releases.
Meanwhile I can suggest you use the server-side Load On Demand or use the JQuery templates.

Kind regards,
Kalina
the Telerik team

[Wojtek Victor]

Hi, just wondering if you guys got to implement those client-side templates for radcombobox in the latest release and if you could send us to the documentation on the how-to. Thanks!

Nevermind... found it: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/clienttemplates/defaultcs.aspx

Sorrry!!!