Client-sice template items

[Roman Krsko]

Hi,

I have empty combobox with template created on server side. 
I need add item with javascript on client-side, but I need use template items (checkbox)
If I add new item, I have only clasic combobox item.

class CheckBoxTemplate : ITemplate
{
    string ColName = "cboCol1";
    const string head = "<div onclick=\"StopPropagation(event)\">";
    const string tail = "</div>";

    public void InstantiateIn(Control container)
    {
        CheckBox chkControl = new CheckBox();
        chkControl.ID = "chkControl";
        chkControl.CssClass = "";
        chkControl.Attributes.Add("onclick", "onCheckBoxClick('" + _controlClientId + "')");
        chkControl.DataBinding += new EventHandler(this.chkControl_DataBind);
        container.Controls.Add(new LiteralControl(head));
        container.Controls.Add(chkControl);
        container.Controls.Add(new LiteralControl(tail));
    }

    public void chkControl_DataBind(Object sender, EventArgs e)
    {
        CheckBox chkControl = (CheckBox)sender;
        RadComboBoxItem radComboItem = (RadComboBoxItem)chkControl.NamingContainer;
        chkControl.Text = " " + DataBinder.Eval(radComboItem.DataItem, ColName).ToString();
    }
}

Javascript add items

var xmlDoc = xmlDoc.firstChild;

if (xmlDoc.childNodes.length > 0) {

    var combo = $find(comboid);

    combo.trackChanges();



    for (x = 0; x < xmlDoc.childNodes.length; x++) {

        try {

            sCboID = xmlDoc.childNodes[x].childNodes[0].childNodes[0].nodeValue;

            sCboText = xmlDoc.childNodes[x].childNodes[1].childNodes[0].nodeValue;               

            var comboItem = new Telerik.Web.UI.RadComboBoxItem();

            comboItem.set_text(sCboText);

            comboItem.set_value(sCboID);

            combo.get_items().add(comboItem);

        }

        catch (err) { }

    }

    combo.commitChanges();

}

Thanks for help.
Best regards
Roman

[Simon]

Hi Roman Krsko,

Templates are rendered on the server. Since RadComboBox does not know what is actually being rendered inside its Items it cannot do so on the client by itself, so you need to manually supply the Template content on the client when you add Items.

So I suggest you add the exact same HTML you render on the server in the InstantiateIn method of the Template on the client inside the item element (item.get_element()). You can use jQuery ($telerik.$ for the jQuery version we ship) to add the HTML.

I hope this helps.

Greetings,
Simon
the Telerik team

[Roman Krsko]

Hi Simon,

can you send me sample (source code sample) with item element (item.get_element()) and jQuery using, because I don't understand, what you mind.
Thanks very much.

Best regards
Roman

[Simon]

Hello Roman Krsko,

Yes, below is a sample code snippet showing a function accepting an Item object and puts some HTML inside its element:

function addTemplateToItem(item) {
    // Use jQuery that we ship with RadControls for ASP.NET AJAX.
    var itemElement = $telerik.$(item.get_element());
    itemElement.empty(); // Remove the existing HTML in the Item.
    itemElement.append("<div>some content</div>"); // Add the HTML of the Template inside the Item's element.
}

Please note that the append function also accepts an element, so you can directly pass it some already created element.

You can achieve the same without using jQuery, e.g.

function addTemplateToItem(item) {
    item.get_element().innerHTML = "<div>some content</div>";
}

You can read more about jQuery and the empty and append functions here:

• jQuery Documentation
• .empty() - jQuery API
• .append() - jQuery API

I hope this helps.

Greetings,
Simon
the Telerik team

[Roman Krsko]

Thanks Simon, I will trying it.
Roman