ComboBox postback on blur

2 posts, 0 answers
  1. Ivaylo
    Ivaylo avatar
    12 posts
    Member since:
    Sep 2010

    Posted 13 Jan 2011 Link to this post

    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);
    }
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 18 Jan 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top