Wednesday, December 21

jQuery - DropDownList with paging

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

DropDownList With Paging></FONT></P>
<P><FONT size=2 face=Verdana></FONT> </P>
<P><FONT size=2 face=Verdana>Let's see how we can achieve this.</FONT></P>
<P><FONT size=2 face=Verdana></FONT> </P>
<P><FONT face=Verdana><FONT size=2><STRONG>Step 1:</STRONG> Add below files in the head section of aspx page.</FONT></FONT></P>
<P><FONT size=2 face=Verdana></FONT> </P>
<P><FONT face=Verdana><FONT size=2><FONT color=#0000ff><FONT color=#0000ff><</FONT></FONT><FONT color=#a31515><FONT color=#a31515>link</FONT></FONT> <FONT color=#ff0000><FONT color=#ff0000>type</FONT></FONT><FONT color=#0000ff><FONT color=#0000ff>= 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
Shibashish mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty