CheckBoxList AJAX async postback issue

Question

I have 2 CheckBoxList controls - chk1 and chk2. I need to use an async postback to clear the selections of a CheckBoxList if the other one is selected. The following will not clear chk1 if it had selections, and an item chk2 was checked:

<asp:ScriptManager ID="sm1" runat="server" ></asp:ScriptManager>
    <asp:UpdatePanel ID="upd" runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="chk1" />
            <asp:AsyncPostBackTrigger ControlID="chk2" />
        </Triggers>
        <ContentTemplate>
            <asp:Label ID="result" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <div style="overflow: auto; height: 150px;">
        <asp:CheckBoxList runat="server" ID="chk1" OnDataBound="assignClickBehaviours" AutoPostBack="true">
            <asp:ListItem Value="1" Text="One"></asp:ListItem>
            <asp:ListItem Value="2" Text="Two"></asp:ListItem>
            <asp:ListItem Value="3" Text="Three"></asp:ListItem>
            <asp:ListItem Value="100" Text="..."></asp:ListItem>
            <asp:ListItem Value="150" Text="One hundred and Fifty"></asp:ListItem>
        </asp:CheckBoxList>
    </div>

    <div style="overflow: auto;">
        <asp:CheckBoxList runat="server" ID="chk2" AutoPostBack="true">
            <asp:ListItem Value="1" Text="One"></asp:ListItem>
            <asp:ListItem Value="2" Text="Two"></asp:ListItem>
            <asp:ListItem Value="3" Text="Three"></asp:ListItem>
        </asp:CheckBoxList>
    </div>

code behind:

protected void Page_Load(object sender, EventArgs e)
    {
        processChecks();
    }

    private void processChecks()
    {
        if(chk2.SelectedIndex>-1)
            chk1.ClearSelection();    
    }

If the whole thing was put in the update panel, it would work... but because there can be 150 items in the checkbox, the scrolling on the overflow:auto would flick back to the top if an item at the bottom was selected. I need the scroll state to stay put (hence the need for async postback). Any ideas or alternatives?

sharmila sharmila · Accepted Answer · 2011-09-29T13:41:25

You can try this code ..

<body>
<form id="form1" runat="server">

  <asp:ScriptManager ID="sm1" runat="server" ></asp:ScriptManager>
<asp:UpdatePanel ID="upd" runat="server">
    <ContentTemplate>
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="chk1">
        </asp:AsyncPostBackTrigger>
        <asp:AsyncPostBackTrigger ControlID="chk1">
        </asp:AsyncPostBackTrigger>
    </Triggers>

</asp:UpdatePanel>

 <div style="overflow: auto; height: 150px;">
    <asp:CheckBoxList runat="server" ID="chk1"  AutoPostBack="true">
        <asp:ListItem Value="1" Text="One"></asp:ListItem>
        <asp:ListItem Value="2" Text="Two"></asp:ListItem>
        <asp:ListItem Value="3" Text="Three"></asp:ListItem>
        <asp:ListItem Value="100" Text="..."></asp:ListItem>
        <asp:ListItem Value="150" Text="One hundred and Fifty"></asp:ListItem>
    </asp:CheckBoxList>
</div>

<div style="overflow: auto;">
    <asp:CheckBoxList runat="server" ID="chk2" AutoPostBack="true">
        <asp:ListItem Value="1" Text="One"></asp:ListItem>
        <asp:ListItem Value="2" Text="Two"></asp:ListItem>
        <asp:ListItem Value="3" Text="Three"></asp:ListItem>
    </asp:CheckBoxList>
</div>

</form></body>

CheckBoxList AJAX async postback issue

2 Answers