This is a migrated thread and some comments may be shown as answers.

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

5 Answers 193 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Abhijit Shetty
Top achievements
Rank 2
Abhijit Shetty asked on 18 May 2012, 09:36 AM
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.

5 Answers, 1 is accepted

Sort by
0
Abhijit Shetty
Top achievements
Rank 2
answered on 21 May 2012, 05:38 AM
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?
0
Cat Cheshire
Top achievements
Rank 1
answered on 21 May 2012, 06:02 AM
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
0
Abhijit Shetty
Top achievements
Rank 2
answered on 21 May 2012, 07:18 AM
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?
0
Abhijit Shetty
Top achievements
Rank 2
answered on 22 May 2012, 09:24 AM
Anyone?
0
Cat Cheshire
Top achievements
Rank 1
answered on 24 May 2012, 05:45 PM
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
Tags
ComboBox
Asked by
Abhijit Shetty
Top achievements
Rank 2
Answers by
Abhijit Shetty
Top achievements
Rank 2
Cat Cheshire
Top achievements
Rank 1
Share this question
or