Nested combobox and treeview with checkbox CheckedChanged event not firing

[Eric]

Hi,

We have a RadTreeView and inside its NodeTemplate we have a RadComboBox. In the Itemtemplate of RadComboBox we have a checkbox. AutoPostback property of checkbox is set to true but when I check the checkbox the page refreshes (a postback occurs but not an Ajax postback although RadTreeView is ajaxified using RadAjaxManager) but CheckedChanged event doesn't fire.

I set the data for RadTreeView on Page Load and Node Expand functions. And I set the data for RadComboBox on ItemsRequested method of RadComboBox since LoadOnDemand is set to true.

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelDefault" runat="server">
</telerik:RadAjaxLoadingPanel>
<fieldset>
    <div>
        <telerik:RadTreeView ID="TreeViewUnits" runat="server"
            OnNodeExpand="TreeViewUnits_NodeExpand"
            onnodecreated="TreeViewUnits_NodeCreated">
            <NodeTemplate>
                <asp:Literal ID="LtrName" runat="server" Text=""></asp:Literal>
                <%# DataBinder.Eval(Container, "Text") %>
                <telerik:RadComboBox runat="server" ID="ComboTags" Height="190px" Width="420px" EnableLoadOnDemand="true"
                    HighlightTemplatedItems="true" OnDataBound="ComboTags_DataBound" OnItemDataBound="ComboTags_ItemDataBound"
                    OnItemsRequested="ComboTags_ItemsRequested">
                    <HeaderTemplate>
                        <ul>
                            <li class="col1">Selected</li>
                            <li class="col2">Tag Name</li>
                        </ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <ul>
                            <li class="col1">
                                <asp:CheckBox ID="CheckTag" runat="server" AutoPostBack="True"
                                    oncheckedchanged="CheckTag_CheckedChanged" /></li>
                            <li class="col2">
                                <%# DataBinder.Eval(Container.DataItem, "Name") %></li>
                        </ul>
                    </ItemTemplate>
                    <FooterTemplate>
                        A total of
                        <asp:Literal runat="server" ID="LtrComboTagsCount" />
                        items
                    </FooterTemplate>
                </telerik:RadComboBox>
            </NodeTemplate>
        </telerik:RadTreeView>
    </div>
</fieldset>

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        MyDataBindSections(TreeViewUnits);
    }

    RadAjaxManager ajax = RadAjaxManager.GetCurrent(this.Page);
    ajax.AjaxSettings.AddAjaxSetting(TreeViewUnits, TreeViewUnits, RadAjaxLoadingPanelDefault);
}

private void MyDataBindSections(RadTreeView radTree)
{
    List<Scope> scopes = SessionHandler.UserSession.Scopes;

    radTree.Nodes.Clear();
    foreach (Scope scope in scopes)
    {
        RadTreeNode node = GetUnitNode(scope.Unit, false);
        radTree.Nodes.Add(node);
    }
}

public static RadTreeNode GetUnitNode(Unit unit, bool expand)
{
    RadTreeNode unitNode = new RadTreeNode();
    unitNode.Text = unit.Name;
    unitNode.Attributes.Add("NodeType", "Unit");

    RadTreeNode unitTagNode = new RadTreeNode();
    unitTagNode.Text = "Tags";
    unitTagNode.Attributes.Add("NodeType", "UnitTag");
    unitTagNode.Attributes.Add("UnitId", unit.Id.ToString());
    unitNode.Nodes.Add(unitTagNode);

    if (expand)
    {
        AddChildUnits(unitNode, unit);
        unitNode.ExpandMode = TreeNodeExpandMode.ClientSide;
    }
    else
    {
        unitNode.ExpandMode = TreeNodeExpandMode.ServerSide;
    }
    return unitNode;
}

public static void AddChildUnits(RadTreeNode node, Unit unit)
{
    List<Unit> childUnits = unit.ChildUnits.ToList();

    RadTreeNode unitNodeFolder = new RadTreeNode();
    unitNodeFolder.Text ="Subunits( " + unit.ChildUnits.Count + " )";
    unitNodeFolder.Attributes.Add("NodeType", "UnitFolder");
    if (childUnits.Count > 0)
    {
        unitNodeFolder.Expanded = true;
    }
    node.Nodes.Add(unitNodeFolder);

    foreach (Unit childUnit in childUnits)
    {
        unitNodeFolder.Nodes.Add(GetUnitNode(childUnit, false));
    }
}

protected void TreeViewUnits_NodeExpand(object sender, RadTreeNodeEventArgs e)
{
    RadTreeNode node = e.Node;

    if (node.Attributes["NodeType"] != null)
    {
        if (node.Attributes["NodeType"] == "Unit")
        {
            UnitService service = new UnitService();
            Unit unit = service.GetUnit(int.Parse(node.Value));

            if (!unit.IsLeaf)
            {
                AddChildUnits(node, unit);
            }
        }
        node.Expanded = true;
    }
}

protected void ComboTags_DataBound(object sender, EventArgs e)
{
    RadComboBox comboTags = sender as RadComboBox;
    ((System.Web.UI.WebControls.Literal)comboTags.Footer.FindControl("LtrComboTagsCount")).Text =
        Convert.ToString(comboTags.Items.Count);
}

protected void ComboTags_ItemDataBound(object sender, Telerik.Web.UI.RadComboBoxItemEventArgs e)
{
    System.Web.UI.WebControls.CheckBox check =
        e.Item.FindControl("CheckTag") as System.Web.UI.WebControls.CheckBox;
    check.Attributes["TagId"] = ((Tag)e.Item.DataItem).Id.ToString();
}

protected void ComboTags_ItemsRequested(object sender, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
{
    UnitService service = new UnitService();
    RadComboBox comboTags = sender as RadComboBox;
    int unitId = 0; //Find unit id
    comboTags.DataSource = service.GetTags(unitId);
    comboTags.DataBind();
}

protected void TreeViewUnits_NodeCreated(object sender, RadTreeNodeEventArgs e)
{
    if (e.Node.Attributes["NodeType"] == "UnitTag")
    {
        e.Node.FindControl("ComboTags").Visible = true;
    }
    else
    {
        e.Node.FindControl("ComboTags").Visible = false;
    }
    e.Node.FindControl("LtrName").Visible = true;
    ((System.Web.UI.WebControls.Literal)e.Node.FindControl("LtrName")).Text = e.Node.Text;
}

protected void CheckTag_CheckedChanged(object sender, EventArgs e)
{
    System.Web.UI.WebControls.CheckBox check =
        sender as System.Web.UI.WebControls.CheckBox;
    int unitId = 0; //Find unit id
    int tagId = int.Parse(check.Attributes["TagId"]);
    UnitService service = new UnitService();
    if (check.Checked)
    {
        //service.AddTag(unitId, tagId);
    }
    else
    {
        //service.RemoveTag(unitId, tagId);
    }
}

How can I fire CheckedChanged event and also enable Ajax on checkbox click?

Thank you.

[Dimitar Terziev]

Hi Eric,

There reason for the behavior you are experiencing is due to the fact that, if you want to ajaxify the controls in the item template of the RadCombobox, you can't achieve this by only setting the RadComboBox to be an ajaxified control or the control, which is using the RadCombobox as an item template.

This is due to the fact that the RadComboBox's drop-down is separate div element, which is not rendered where the RadComboBox is rendered.

In order to overcome this problem you should place RadAjaxPanel or Update panel in each combobox item template. This though requires that your items shouldn't be loaded on demand, since loading server-side controls with callback is not supported. And since when the RadCombobox is sending request for items a callback is made, you should bind the items of the RadCombobox in Node_Created event for instance.

Best wishes,
Dimitar Terziev
the Telerik team