ComboBox postback on blur

[Ivaylo]

Hi,

I have created a combo box that has custom item template. Each item is visualized as a checkbox and the value is kept as a hidden field, also inside the item template. The purpose is to allow multiple items to be selected at once (don't ask why, it was a client requirement). Also, we should not do any postback to the sever on each selection, instead, when the server code first attempts to get the selected items, each item is looped and depending on the state of the checkbox, a collection of selected items is being assembled. So far, everything works as expected, but the only issue I am having is when I click on the label of a checkbox item, or on the page right after blurring the items list, a postback event occurs. I have set both the RadComboBoxand the checkboxes AutoPostBack to 'false'. Any idea where this postback comes from and a way to disable it?

Here is a quick code example:

<telerik:RadComboBox ID="RadComboBox" runat="server" AllowCustomText="false" AutoPostBack="false">
    <ItemTemplate>
        <asp:CheckBox
            ID="CheckBox"
            runat="server"
            Text='<%# Eval(DataTextField ?? "Text") %>'
            AutoPostBack="false"
            ClientIDMode="Predictable"
            />
        <asp:HiddenField ID="HiddenField" runat="server" Value='<%# Eval(DataValueField ?? "Value") %>' ClientIDMode="Predictable" />
        <asp:HiddenField ID="CheckedHiddenField" runat="server" Value='False' ClientIDMode="Predictable" />
    </ItemTemplate>
</telerik:RadComboBox>

Here is how I collect the items:

private ICollection<RadComboBoxItem> GetItems()
        {
            return RadComboBox.Items.Aggregate(
                new List<RadComboBoxItem>(),
                (list, item) =>
                {
                    var checkBox = item.Controls.OfType<CheckBox>().First();
                    var hidden = item.Controls.OfType<HiddenField>().First();
                    var selectedHidden = item.Controls.OfType<HiddenField>().Last();

                    if (bool.Parse(selectedHidden.Value))
                    {
                        list.Add(new RadComboBoxItem(checkBox.Text, hidden.Value) { Selected = true });
                    }
                    return list;
                });

        }

And here is the clientside function that I am attaching to the checkbox event:

protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            RadComboBox.Items.ToList().ForEach(ProcessItem);
        }

        private void ProcessItem(RadComboBoxItem item)
        {
            var checkbox = item.Controls.OfType<CheckBox>().Single();
            var hidden = item.Controls.OfType<HiddenField>().First();
            var selectedHidden = item.Controls.OfType<HiddenField>().Last();
            checkbox.InputAttributes["onchange"] = string.Format(
                "multiselectComboBoxItemClick('{0}', '{1}', '{2}', '{3}', '{4}');",
                RadComboBox.ClientID,
                checkbox.ClientID,
                hidden.ClientID,
                selectedHidden.ClientID,
                checkbox.Text);
        }

and the js code:

function multiselectComboBoxItemClick(comboBoxID, checkBoxID, valueHiddenFieldID, stateHiddenFieldID, itemText) {
    var combo = $find(comboBoxID);
    var checkbox = document.getElementById(checkBoxID);
    var hidden = document.getElementById(valueHiddenFieldID);
    var selectedHidden = document.getElementById(stateHiddenFieldID);

    if (!combo || !checkbox || !hidden) {
        return;
    }

    if (!combo['__SelectedItems']) {
        combo['__SelectedItems'] = [];
    }
    if (!combo['__SelectedItemsMap']) {
        combo['__SelectedItemsMap'] = {};
    }

    var value = hidden.value.toString();

    if (checkbox.checked == true) {
        var item = combo['__SelectedItemsMap'][value];
        if (!item) {
            item = new Telerik.Web.UI.RadComboBoxItem();
            item.set_text(itemText);
            item.set_value(value);
            combo['__SelectedItemsMap'][value] = item;
            Array.add(combo['__SelectedItems'], item);
        }
        selectedHidden.value = 'True';
    } else {
        var item = combo['__SelectedItemsMap'][value];
        if (item) {
            var index = $telerik.$.inArray(item, combo['__SelectedItems']);
            if (index != -1) {
                combo['__SelectedItems'].splice(index, 1);
                combo['__SelectedItemsMap'][value] = null;
            }
        }
        selectedHidden.value = 'False';
    }

    var text = '';
    if (combo['__SelectedItems'].length > 0) {
        text = combo['__SelectedItems'][0].get_text();
        for (var i = 1; i < combo['__SelectedItems'].length; i++) {
            text = text + ', ' + combo['__SelectedItems'][i].get_text();
        }
    }
    combo.set_text(text);
}

[Simon]

Hi Ivaylo,

Indeed, it is unlikely that either the RadComboBox or the CheckBoxes postback the page since their AutoPostBack properties are set to false.

Can you please observe the POST parameters of this postback with FireBug and specifically the __EVENTARGUMENT and __EVENTTARGET ones? What are their values?

Best wishes,
Simon
the Telerik team