Question

I have a gridview with Template field. I add a checkbox in templatefield . Autopostback is true for checkbox .

I fill grid in Load-page and creted column dynamic .

 if (!IsPostBack)
        {
         FillGrid();
        }

I use update panel

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
<SharePoint:SPGridView ID="grid" AllowSorting="true" AllowFiltering="true"    CssClass="ms-listviewtable"  
runat="server" AutoGenerateColumns="false">
<RowStyle CssClass="ms-alternating" Height="10px" />
<Columns>
    <asp:TemplateField> 
        <ItemTemplate  >
            <asp:CheckBox ID="select" runat="server" 
                OnCheckedChanged="select_CheckedChanged" AutoPostBack="true"  />
            <input id="Display" type="hidden" runat="server" />
            <input id="itemID" type="hidden" runat="server" />
            <asp:Image ID="icon" runat="server" Height="10px" Visible="false"  />
        </ItemTemplate>
        <ItemStyle Width="35px" />
    </asp:TemplateField>
    <asp:TemplateField >
     </asp:TemplateField>
</Columns>
</SharePoint:SPGridView>
 </ContentTemplate>
  <Triggers>
<asp:AsyncPostBackTrigger ControlID="select" EventName="OnCheckedChanged" />
 </Triggers>
 </asp:UpdatePanel>

but show error :A control with ID ‘select’ could not be found for the trigger in UpdatePanel ‘UpdatePanel1’.

My problem is : When checkbox is change, page refresh

I don’t want to refresh page after checkedchange!

Answer 1

First of all you need changes templetecolumn as below

<asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkselect" runat="server" />
                <input id="Display" type="hidden" runat="server" />
                <input id="itemID" type="hidden" runat="server" />
                <asp:Image ID="imgicon" runat="server" Height="10px" Style="display: none;" ImageUrl="~/images/arrow_left.jpg" />
            </ItemTemplate>
            <ItemStyle Width="35px" />
        </asp:TemplateField>

Now handle itemdatabound event in server side code

Protected Sub SPGridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvBanner.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim chkselect As CheckBox = e.Row.FindControl("chkselect")
        Dim imgicon As Image = e.Row.FindControl("imgicon")
        If chkselect IsNot Nothing Then
            chkselect.Attributes.Add("onclick", "javascript:DoMyTask(this,'" + imgicon.ClientID + "')")
        End If
    End If
End Sub

Now specify JavaScript function in aspx page as below.

<script type="text/javascript" language="javascript">
    function DoMyTask(obj, imgid) {            
        var objCheck = obj.checked;
        var objimg = document.getElementById(imgid)
        if (objCheck == true) {
            objimg.style.display = "block";
            //set more attributes over here
        }
        else {
            objimg.style.display = "none";
            //set more attributes over here
        }
        var count = $(":checkbox:checked").length;
        alert('you have selected ' + count + ' Rows');
    }

</script>

Hope this will help you…happy coding ..