How to create RadComboxItem using ItemTemplate on postback

[Scott]

I am creating dynamic RadComboBox controls in the Page_Init event handler.  The control needs have have multiselect checkboxes therefore I am leveraging the "Load on Demand" feature using web method.  I am able to add the checkbox using a client template successfully that looks like this:

function onItemDataBound(sender, eventArgs) {
    var item = eventArgs.get_item();
    var dataItem = eventArgs.get_dataItem();

    item.get_attributes().setAttribute("text", dataItem.Text);
    item.set_value(dataItem.Value);
    item.set_clientTemplate("<div onclick='StopPropagation(event)' class='combo-item-template'><input id='chkMultiSelect' class='rcbCheckbox' type='checkbox' value='#=Value#' onclick='checkboxClick(this);' /><span>#=Text#</span></div>");
    dataItem.Index = item.get_index();
    item.bindTemplate();
}

 

All of this works just fine, the "Load on Demand" is working great.  I'm able to select the items in the checkbox and all of that is good.

The problem exists when another control on the page performs a postback.  I need to recreate this RadComboBox control in the Page_Init event handler, and what I would like to do is to create the "checked" items during the control creation.  In other words, the RadComboBox would be initially created with only the checked items server-side, and when the client-side "OnClientItemsRequesting" event handler fires it would already have these items in the control.

So I created a server side ItemTemplate class as such:

public class KimDDLItemTemplate : ITemplate
{
    public void InstantiateIn(Control container)
    {
        System.Web.UI.HtmlControls.HtmlGenericControl outerDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
        outerDiv.Attributes.Add("onclick", "StopPropagation(event)");
        outerDiv.Attributes.Add("class", "combo-item-template");

        System.Web.UI.HtmlControls.HtmlInputCheckBox cbx = new System.Web.UI.HtmlControls.HtmlInputCheckBox();
        cbx.ID = "chkMultiSelect";
        cbx.Attributes.Add("class", "rcbCheckbox");
        cbx.Attributes.Add("onclick", "checkboxClick(this);");

        System.Web.UI.HtmlControls.HtmlGenericControl innerSpan = new System.Web.UI.HtmlControls.HtmlGenericControl("span");

        outerDiv.Controls.Add(cbx);
        outerDiv.Controls.Add(innerSpan);

        outerDiv.DataBinding += new EventHandler(rcbDDLValue_DataBinding);
        container.Controls.Add(outerDiv);
    }

    private void rcbDDLValue_DataBinding(object sender, EventArgs e)
    {
        System.Web.UI.HtmlControls.HtmlGenericControl targetParent = (System.Web.UI.HtmlControls.HtmlGenericControl)sender;
        RadComboBoxItem item = (RadComboBoxItem)targetParent.BindingContainer;
        string itemValue = (string)DataBinder.Eval(item, "Value");
        System.Web.UI.HtmlControls.HtmlInputCheckBox target = (System.Web.UI.HtmlControls.HtmlInputCheckBox)targetParent.FindControl("chkMultiSelect");
        System.Web.UI.HtmlControls.HtmlGenericControl innerSpan = (System.Web.UI.HtmlControls.HtmlGenericControl)targetParent.Controls[1];

        target.Value = itemValue;
        target.Checked = true;

        innerSpan.InnerText = (string)DataBinder.Eval(item, "Text");
    }
}

 

And in the Page_Init event handler I added each of the items obtained from the viewstate value in the Postback to create the new RadComboBoxItem.  But these are not visible in the control when I open the drop down.

Am I adding the items on the Page_Init event properly?

[Eyup]

Hello Scott,

You can find generic information about combo templates in these articles:
http://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/templates/overview
http://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/templates/data-binding-in-templates

Generally, there are some limitations when using LoadOnDemand, for example the built-in checkboxes:
http://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support

You can try to temporarily remove the LoadOnDemand functionality and see whether this will change something. Also, AJAX may sometimes hide both server and client-side errors. Therefore, when developing your app, we highly recommend you to ensure that the functionality works without adding AJAX. Please temporarily disable any AJAX on the page if present (RadAjaxManager, RadAjaxPanel, UpdatePanel, RadXmlHttpPanel, etc.) and enable your script debugger (FireBug or F12) to see whether there are any script or server errors interfering, and make sure that the application works without AJAX. 

If this is not the case, you can create a very basic isolated sample including the RadComboBox definition demonstrating the problematic behavior and open a new formal support thread to send it back to us for further investigation. 

Regards,
Eyup
Telerik by Progress