Create ItemTemplate of RadComboBox at client-side (using JavaScript)

[Abhijit Shetty]

Hi,
I have a RadComboBox as:

<telerik:RadComboBox ID="rcbProducts" runat="server" EmptyMessage="Select a product" AllowCustomText="true"
       AppendDataBoundItems="true" DataTextField="ProductName" ToolTip="ProductDescription"
       HighlightTemplatedItems="true">
       <ItemTemplate>
           <div onmouseover='showToolTip(this);' title='<%# Eval("ProductDescription")%>' style='width: 100%;'>
               <%# Eval("ProductName")%></div>
       </ItemTemplate>
   </telerik:RadComboBox>

I have loaded it with few items using Page_Load on server side. Now i need to add an item at client-side using javascript. How can i achieve this. This is what i have got.

function Add() {
            var combo = $find("<%= rcbProducts.ClientID %>");
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text("New Item");
            var div = document.createElement("div");
            div.setAttribute("onmouseover", "showToolTip(this);");
            div.setAttribute("title", "New Item");
            div.setAttribute("style", "width: 100%;");
            div.innerHTML = "New Item";
            comboItem.set_element(div);//It doesnt set div as element???
            combo.get_items().add(comboItem);
            comboItem.select();
            return false;
        }

Thanks in Advance.

[Abhijit Shetty]

Hi,
I have heard a lot about your quick responses but unfortunately i haven't experienced any such so far.
So can you guys suggest what can i do in order to get quick response from you guys?

[Cat Cheshire]

It is very easy to add an item at client -side.
At first you have to call  combo.trackChanges(), then add the item and call combo.commitChanges().
Take a look at this demo: http://demos.telerik.com/aspnet-ajax/combobox/examples/programming/addremovedisableitemsclientside/defaultcs.aspx

[Abhijit Shetty]

Thanks Cat Cheshire for your valuable response.
I was in impression that trackChanges and commitChanges is used in order to maintain changes made at client-side during postback.
I have tried as you said:

function Add() {
            var combo = $find("<%= rcbProducts.ClientID %>");
            combo.trackChanges(); // Track
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text("New Item");
            var div = document.createElement("div");
            div.setAttribute("onmouseover", "showToolTip(this);");
            div.setAttribute("title", "New Item");
            div.setAttribute("style", "width: 100%;");
            div.innerHTML = "New Item";
            comboItem.set_element(div); //Sets Div
            combo.get_items().add(comboItem);
            comboItem.select();
            combo.commitChanges();//Commit
            return false;
        }

But div is not getting set as its inner element. Am i implementing it in a wrong way?

[Abhijit Shetty]

Anyone?

[Cat Cheshire]

In case you want to apply a template to an item at client-side - you can try this:
http://demos.telerik.com/aspnet-ajax-beta/combobox/examples/functionality/clienttemplates/defaultcs.aspx