Wednesday, December 17, 2014

checkboxlist/radiobuttonlist filter textbox using jQuery (with result count)

Hi Developers,

following is the complete single code to filter large list of checkboxes and radiobuttons. I created a hashtable and bind that to radiobuttonlist and checkboxlist. we can use any data source(collection, dataset, datatable etc) instead. same code will work with other data listing controls(repeater, datalist and gridview).

test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test1.aspx.cs" Inherits="test1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>nitindhiman.blogspot.com</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    function textChange(e, txtbox, cls) {
      if (!(/[^A-Za-z0-9 ]/.test(String.fromCharCode(e.keyCode))) || e.keyCode == 8) {
        var text = $(txtbox).val().toLowerCase();
        var node = '';
        var count = 0;
        $('#td_' + cls + ' table tr').each(function () {
          node = $(this).text().toLowerCase();
          if (node.match(text) == null)
            $(this).hide();
          else {
            $(this).show();
            count++;
          }
        });
        $('#sp_' + cls).html((count) + ' items');
      }
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <table>
        <tr>
          <td >
            <asp:TextBox ID="txtChkFilter" runat="server" onkeyup="javascript:textChange(event,this,'Chk');"></asp:TextBox>
            <span id="sp_Chk"><%=ChkCount%></span>
          </td>
          <td >
            <asp:TextBox ID="txtRadioFilter" runat="server" onkeyup="javascript:textChange(event,this,'Rdo');"></asp:TextBox>
            <span id="sp_Rdo"><%=RdoCount%></span>
          </td>
        </tr>
        <tr>
          <td>
            <div id="td_Chk">
              <asp:CheckBoxList ID="cblChkOption" DataValueField="Key" DataTextField="Value" runat="server">
              </asp:CheckBoxList>
            </div>
          </td>
          <td>
            <div id="td_Rdo">
              <asp:RadioButtonList ID="cblRdoOption" DataValueField="Key" DataTextField="Value" runat="server">
              </asp:RadioButtonList>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>
</html>

test.aspx.cs

using System;
using System.Collections;

public partial class test1 : System.Web.UI.Page
{
    protected string ChkCount = string.Empty;
    protected string RdoCount = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {
        binddate();
    }
    void binddate()
    {
        Hashtable ht = new Hashtable();
        ht.Add(1, "System");
        ht.Add(2, "Collections");
        ht.Add(3, "Generic");
        ht.Add(4, "Linq");
        ht.Add(5, "Web");
        ht.Add(6, "UI");
        ht.Add(7, "WebControls");
        ChkCount = ht.Count + " items";
        RdoCount = ht.Count + " items";
        cblChkOption.DataSource = ht;
        cblChkOption.DataBind();
        cblRdoOption.DataSource = ht;
        cblRdoOption.DataBind();
    }
}

No comments:

Post a Comment