How can I filter the records in C# .net client side?

Question

Just wandering, will that be possible for me to filter the records in C# .net client side?

Example: I have the following page wrotein c# .net

with the following codes:

<table>
    <tr>
        <td colspan="2">
            <table>
                <tr>
                    <td><asp:CheckBox runat="server" ID="chkRework" />Rework Required</td>
                    <td style="padding-left:50px;"><asp:CheckBox runat="server" ID="chkPending" />Pending</td>
                    <td style="padding-left:50px;"><asp:CheckBox runat="server" ID="chkInvoiced" />Invoiced</td>
                    <td style="padding-left:50px;"><asp:CheckBox runat="server" ID="chkCancelled" />Cancelled</td>
                </tr>

            </table>
        </td>
    </tr>
  </table>

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="810px"
    DataSourceID="dsContractor" DataKeyNames="rep_id" 
    CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" PageSize="23" AllowSorting="True">
    <Columns>
      <asp:TemplateField HeaderText="Name" SortExpression="first_name" HeaderStyle-HorizontalAlign="Left">
        <ItemTemplate>
          <a id="A1" runat="server" href='<%# string.Format("Controls/pgContractorDetails.aspx?ixPerson={0}", Eval("person_id")) %>'>
            <%# Eval("first_name") + " " + Eval("last_name")%></a>
        </ItemTemplate>
      </asp:TemplateField>
      <asp:BoundField DataField="rep_id" HeaderText="Rep ID" SortExpression="rep_id"  HeaderStyle-HorizontalAlign="Left"/>
      <asp:TemplateField HeaderText="Team Name" SortExpression="team_name" HeaderStyle-HorizontalAlign="Left">
        <ItemTemplate>
          <a id="A1" runat="server" href='<%# string.Format("Controls/pgTeamDetails.aspx?ixTeam={0}", Eval("team_id")) %>'>
            <%# Eval("team_name")%></a>
        </ItemTemplate>
      </asp:TemplateField>

      <asp:BoundField DataField="campaign_name" HeaderText="Campaign" HeaderStyle-HorizontalAlign="Left" SortExpression="campaign_name" />
      <asp:BoundField DataField="state" HeaderText="State" HeaderStyle-HorizontalAlign="Left" SortExpression="state" />
      <asp:BoundField DataField="status_desc" HeaderText="Status" HeaderStyle-HorizontalAlign="Left" SortExpression="status_desc" />
    </Columns>
    <PagerStyle BackColor="#003399" ForeColor="White" HorizontalAlign="Center" />
    <HeaderStyle CssClass="ui-widget-header" ForeColor="black" HorizontalAlign="Right" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <EmptyDataTemplate>
      Nothing found.
    </EmptyDataTemplate>
  </asp:GridView>
  <asp:SqlDataSource ID="dsContractor" runat="server" ConnectionString="<%$ ConnectionStrings:DbConnectionString %>"
    SelectCommand="app_contractor_list_search" SelectCommandType="StoredProcedure" CancelSelectOnNullParameter="true">
    <SelectParameters>
      <asp:ControlParameter Name="searchterm" Type="String" ControlID="sQuery" PropertyName="Text" DefaultValue="*" />
    </SelectParameters>
  </asp:SqlDataSource>

Any way that when I clicked on the Pending checkbox, and it will filter out all records that status not Pending?

Answer 1

You can hide the rows using javascript. Here is a code taken from a simple example.

<script type="text/javascript">
function Search_Gridview(strKey, strGV) {
    var strData = strKey.value.toLowerCase().split(" ");
    var tblData = document.getElementById(strGV);
    var rowData;
    for (var i = 1; i < tblData.rows.length; i++) {
        rowData = tblData.rows[i].innerHTML;
        var styleDisplay = 'none';
        for (var j = 0; j < strData.length; j++) {
            if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
                styleDisplay = '';
            else {
                styleDisplay = 'none';
                break;
            }
        }
        tblData.rows[i].style.display = styleDisplay;
    }
}    

Code is from this page. http://www.codescratcher.com/javascript/search-gridview-using-javascript/