jQuery - DropDownList with paging

In this article we will explore how to create paging in dropdownlist.

href="themes/base/jquery.ui.all.css" rel="stylesheet" /><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/jquery.effects.core.js"></script><script type="text/javascript" src="js/jquery.effects.blind.js"></script><link type="text/css" href="demos.css" rel="stylesheet" />

Step 2: Add below style sheet in the header section of the page.

<style type="text/css">
      #effect
      {
            width: 189px;
            position: relative;
            overflow: auto;
            border: 1px Solid Gray;
      }

      .textbox
      {
            width: 185px;
            height: 14px;
      }

      body
      {
            font-size: 62.5%;
      }

      .myGrid
      {
            width: 100%;
            margin: 0px 0 0px 0;
            border-collapse: collapse;
      }

      .myGrid th
      {
            display: none;
      }

      .myGrid .pager
      {
            background: url(images/grid_pager.png) repeat-x top;
      }

 
      .myGrid .pager table
      {
            margin: 5px 0;
      }

      .myGrid .pager td
      {
            border-width: 0;
            font-weight: bold;
            line-height: 12px;
      }

      .myGrid .pager a
      {
            color: #fff;
            text-decoration: none;
      }

      .myGrid .pager a:hover
      {
            color: Yellow;
            text-decoration: none;
      }

      .myGrid .mouseover
      {
            background-color: Gray;
            cursor: pointer;
      }

      .myGrid .mouseout
      {
            background-color: White;
      }
</style>

Step 3: Add a script manager, text box, image and  a gridview inside update panel.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager><div>
      <span id="ddlSpan" style="display:none">
            <asp:TextBox ID="txtChkValue" runat="server" CssClass="textbox"></asp:TextBox>
            <img id="ddlArrow" onclick="runEffect()" src="images/down_arrow.jpg" style="margin-left: -23px; margin-bottom: -4px" />
      </span></div>
<asp:UpdatePanel runat="server" ID="updGrdView">
      <ContentTemplate>
            <div id="effect">
                  <asp:GridView ID="gvDDL" runat="server" AutoGenerateColumns="False" DataKeyNames="RecipieId" AllowPaging="true" PageSize="6" OnPageIndexChanging="gvDDL_PageIndexChanging" GridLines="None" CssClass="myGrid" PagerStyle-CssClass="pager" OnRowDataBound="gvDDL_RowDataBound">
                        <Columns>
                              <asp:BoundField DataField="By">
                                    <ItemStyle HorizontalAlign="Left" Width="180px" Font-Size="Small" />                              </asp:BoundField>
                        </Columns>
                  </asp:GridView>
            </div>
      </ContentTemplate></asp:UpdatePanel>

Step 4: Add below javascript in the aspx page.

<script language="javascript" type="text/javascript">

      var flagPager = false;

      $(document).ready(function() {
            $("#effect").hide();
            $("#ddlSpan").show();
      });

      //Keep the effect div visible on click of paging numbers
      $('.pager').live('click', function(e) {
            document.getElementById("effect").style.display = "block";
            flagPager = true;
      });

      //Hide the effect div if it is clicked on anywhere else apart from pager and drop down list image
      $(document).click(function(e) {
            var invokedBy;
            if (!e) {
                  var e = window.event;
            }
            if (e.target) {
                  invokedBy = e.target;
            }
            else if (e.srcElement) {
                  invokedBy = e.srcElement;
            }
            if (invokedBy.nodeType == 3) // Safari bug
            {
                  invokedBy = invokedBy.parentNode;
            }
            if (invokedBy.id !== 'ddlArrow' && !flagPager) {
                  document.getElementById("effect").style.display = "none";
            }
            flagPager = false;
      });

      function runEffect() {
            if (!($('#effect').is(":visible"))) {
                  $("#effect").show('blind', 200);
            }
            else {
                  $("#effect").hide('blind', 200);
            }
      }

      //Show the selected id in alert and text in the text box
      function SelectDDL(selectedText, selectedId) {
            alert("Selected Id is " + selectedId);
            $("#txtChkValue").val(selectedText);
            runEffect();
      }
</script>

Step 5: Add below code in the code behind to retrieve the data and bind it to gridview.

protected void Page_Load(object sender, EventArgs e)
{
      if (!IsPostBack)
      {
            string strQuery = "SELECT * FROM Recipie";
            gvDLL.DataSource = GetData(strQuery);
            gvDLL.DataBind();
      }
}

private SqlConnection GetConnection(string m_conString)
{
      SqlConnection con = new SqlConnection(m_conString);
      return con;
}

private DataTable GetData(string strQuery)
{
      string m_conString = CryptographyHelper.Decrypt(ConfigurationSettings.AppSettings["DBConnectionString"]);
      DataTable dtDept = null;
      SqlConnection con = GetConnection(m_conString);
      using (con)
      {
            con.Open();
            using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
            {
                  dtDept = new DataTable();
                  sqlAdapter.Fill(dtDept);
            }
      }
      return dtDept;
}
Step 6: Place below row data bound and page index changing in the code behind.

protected void gvDLL_RowDataBound(object sender, GridViewRowEventArgs e)
{
      DataKey dk;
      if (e.Row.RowType == DataControlRowType.DataRow)
      {
            e.Row.Attributes.Add("onmouseover", "this.className='mouseover'");
            e.Row.Attributes.Add("onmouseout", "this.className='mouseout'");
            for (int i = 0; i < gvDLL.Columns.Count; i++)
            {
                  dk = gvDLL.DataKeys[e.Row.DataItemIndex - (gvDLL.PageIndex * gvDLL.PageSize)];
                  e.Row.Cells[i].Attributes.Add("onclick", "SelectDDL('" + e.Row.Cells[i].Text + "','" + dk.Values["RecipieId"].ToString() + "')");
            }
      }
}

protected void gvDLL_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
      gvDLL.PageIndex = e.NewPageIndex;
      string strQuery = "SELECT * FROM Recipie";
      gvDLL.DataSource = GetData(strQuery);
      gvDLL.DataBind();
}

Live Demo

I think this article is very useful to you.
Thanks