chech/uncheck all checkboxes in ListView with onItemDataBound

Question

I have a ListView with pdf thumbnail images created OnItemDataBound. Every thumbnail has a checkbox to select the pages I want to upload. Everything works fine - so far. Now I made another checkbox to select ALL pages an the problem is: If I check the checkbox all preview thumbnails in my ListView disappears

This is my ListView:

<asp:ListView ID="pdfPagesListView" runat="server" OnItemDataBound="pdfPagesListView_ItemDataBound">  
    <ItemTemplate>
        <div id="pdfFrameDiv" runat="server" class="pdfPage"><%# Container.DataItem %> 
            <div style="position:absolute;">
                <asp:Image ID="pdfPreviewImage" runat="server" /> 
            </div>                             
            <div style="position:relative;height:188px;background-color:rgb(240,240,240)">  
                <asp:Panel ID="thumbnails" runat="server" /> 
            </div>                                              
            <div style="position:relative; top:-14px; left:120px;">
                <asp:CheckBox ID="selectPdfPageCheckbox" runat="server" />
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

This is my CheckBox

<asp:checkbox ID="selectAllPages" runat="server" AutoPostBack="true" OnCheckedChanged="selectAllPdfPages" />

This is the OnItemDataBound code of the ListView:

protected void pdfPagesListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        if (byteArray.Length < 25000000)
        {
            ListViewDataItem dataItem = (ListViewDataItem)e.Item;
            int i = dataItem.DisplayIndex;

            if (Session["computedPages"] != null)
            {
                int[] computedPages = (int[])Session["computedPages"];
                if (computedPages[i] == 1)
                {
                    dataItem.Visible = false;
                }
            }                

            try
            {
                Panel thumbnailPanel = (Panel)e.Item.FindControl("thumbnails");
                Thumbnail thumbnail = new Thumbnail();
                thumbnail.SessionKey = unique;
                thumbnail.Index = i + 1;
                thumbnail.DPI = 17;
                thumbnail.Width = 200;
                thumbnailPanel.Controls.Add(thumbnail);

                Image pdfPreviewImage = (Image)e.Item.FindControl("pdfPreviewImage");
                pdfPreviewImage.Visible = false;
            }
            catch (Exception ex)
            {
                Image pdfPreviewImage = (Image)e.Item.FindControl("pdfPreviewImage");
                pdfPreviewImage.ImageUrl = "~/img/pdfPreview.jpg";
            }

        }

        else
        {
            Image pdfPreviewImage = (Image)e.Item.FindControl("pdfPreviewImage");
            pdfPreviewImage.ImageUrl = "~/img/pdfPreview.jpg";
        }
    }
}

This is the code of my check/uncheck the checkbox event:

protected void selectAllPdfPages(object sender, EventArgs e)
{
    if (selectAllPages.Checked == true)
    {
        foreach (ListViewDataItem item in pdfPagesListView.Items)
        {
            CheckBox cb = (CheckBox)(item.FindControl("selectPdfPageCheckbox"));
            cb.Checked = true;
        }
    }

    else
    {
        foreach (ListViewDataItem item in pdfPagesListView.Items)
        {
            CheckBox cb = (CheckBox)(item.FindControl("selectPdfPageCheckbox"));
            cb.Checked = false;
        }

    }

}

This is how my page looks like after the OnItemDataBound Event:

An this how it looks after checking the selectAllPages checkbox:

I want to check/uncheck all checkboxes without losing all the thumbnail previews. I hope anyone can help me out...

Thanks in advance

I think I know the reason why it happens, but not how to solve this. The reason is the fact that you add your tumbnail controls dynamically to the page. Dynamically added controls should be added to the control tree again on every post back. In your case this is not happening since you add them during data binding, which happens only once. To solve the problem either switch to client side solution, or declare Thumbnails in markup, or as a very last resort think of a way to add them on every post back (but please don't) — Andrei, Oct 20 '14 at 12:50

score 2 · Accepted Answer · answered Oct 20 '14 at 11:32

2

Why don't you want to make it on client side using jQuery? This will allow you to check/unchek your checkboxes without sending your webform to server on every click and this means that you will not loose any thumbnails, as you said.

answered Oct 20 '14 at 11:32

andrey.shedko

3,128
10
61
121

score 0 · Answer 2 · answered Oct 20 '14 at 11:19

I think you have not bind your data source at page_load

    protected void Page_Load(object sender, EventArgs e)
    { 
      pdfPagesListView.DataSource="";
      pdfPagesListView.DataBind();
    }

In that case you need to check whether your selectAllPages is Checked or not at DataBound Event of your Listview.

Thanks

chech/uncheck all checkboxes in ListView with onItemDataBound

2 Answers2