How To- Search records or data in gridview using jQuery

In my previous post, I explained bind the gridview using jQuery. Here I am going to show you how to search record or data with in Gridview using jQuery.

In previous posts, I explained Page Scroll to Top with jQuery, Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to C#, ASP.Net,  jQuery, Java Script and SQL Server.

First take a look on our problem or requirement.

How To- Bind Data to Gridview using jQuery in ASP.Net

In this post, I am explaining how to bind data to Gridview using jQuery in ASP.Net through Ajax call.

In previous posts, I explained Page Scroll to Top with jQuery, Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to C#, ASP.Net,  jQuery, Java Script and SQL Server.

ASPX Page

---

Gridview Markup

<asp:GridView ID="grdDemo" runat="server" AutoGenerateColumns="False" Font-Names="Arial"
    Font-Size="10pt" HeaderStyle-BackColor="GrayText" HeaderStyle-ForeColor="White" Width="500px">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="FName" HeaderText="First Name"/>
        <asp:BoundField DataField="LName" HeaderText="Last Name"/>
        <asp:BoundField DataField="Email" HeaderText="E-mail"/>
    </Columns>
</asp:GridView>

How To- Get Query String Value using Java Script

In web application development, we all are well aware of Query String and Its uses. We can easily retrieve the Query String values from URL on server-side, but sometimes we need to find the Query String values from URL on client-side i.e using Java Script. But in Java Script, there is no standard way or function to get the Query String values from URL. So here I am explaining how can you get the Query String values from URL using Java Script.

In previous posts, I explained Page Scroll to Top with jQuery, Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to jQuery, Java Script etc.

The following Java Script code snippet facilitates you to retrieve the query string key value. You can also pass the default value if the key value is not find. Here is the function-

ASP.Net- Create Hindi TextBox Using Google Transliteration in ASP.Net

Here, I am explaining you how to create a hindi textbox in  ASP.Net using  Google Transliteration.Here I am mainly targeting english to hindi transliteration. You can use any language which is supported by Google.

In my previous posts, I explained Send mail in ASP.Net, Convert DataTable into List, Constructor Chainning in C#, Convert a Generic List to a Datatable, Get Property Names using Reflection in C#, Hard drive information using C#, Create Directory/Folder using C#, Check Internet Connection using C#, SQL Server Database BackUp using C# and some other articles related to C#, ASP.Net,  jQuery, Java Script and SQL Server.

To create a Hindi textbox in  ASP.Net using Google Transliteration, you have to add the following script source into your ASPX page.

How To- Validate Numeric Values only in TextBox using Java Script/jQuery

In this post, I will explain how to validate user to enter only numeric values in TextBox using jQuery / Java Script.

In previous posts, I explained Page Scroll to Top with jQuery, Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to jQuery, Java Script etc.

To validate numeric values in TextBox, we need to write the following jQuery or Java Script function.

jQuery- Page Scroll to Top with jQuery | How to add Page Scroll to Top in web page

In some websites, you can see that when you scroll the page there is a link at the bottom of the page with text "Scroll to Top" and when you click on this link page moves to the top of the page. If you web page has lots of content, It is a very good idea to provide visitors within a easy way to quickly go to the top of the page.

In this article, we will create a page scrolling effect for returning to the top of the page using jQuery.

In previous posts, I explained Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to jQuery, Java Script etc.

Automatically Refresh Page Using Java Script

In game sites, you will have to see that they updated the score in regular time intervals automatically. i.e refreshed the score card in regular time intervals. Are you want this functionality in your web page? If yes then this post will help you.
Here I am going to show you a simple example to refresh the page automatically in regular intervals using Java Script or Meta Tag.

In previous posts, I explained How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net and some other articles related to jQuery, Java Script etc.

How to Create a Textarea Character Counter / Limiter Using jQuery

Are you need to limit the number of characters that are allowed to be inserted into Textbox or Textarea? You have seen in various sites(mostly sms sites like way2sms, 160by2) where you can type only a fix number of characters into textbox. Here, I am going to show you a simple jQuery snippet that you can use to achieve this functionality.

In previous posts, I explained Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Netand some other articles related to jQuery, Java Script etc.

Animated Sliding Recent Post Widget For Blogger

One of my friend ask me sliding "Recent Post Widget For Blogger". I have searched for this in Google and I found some interesting codes for sliding recent post widget. Here I am sharing one of them, which I have also used in my blog.

In previous posts, I explained Calculate age using java script, jQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example an other article related to jQuery and Java Script.

Change Input to Upper Case using Java Script

In many web sites, you will have to see that when user types into text box then input text converts into Upper case automatically even if you type in lower case. Here I am going to show you a simple example how can we do this using java script.

In previous posts, I explained Calculate age using java script, jQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example an other article related to jQuery and Java Script.

Here, I will show you a simple example of  converting the input value in to uppercase using jQuery in ASP.Net.

Calculate Age from Date of Birth Using Java Script

In my previous posts, I explained jQuey .toggleClass() Example in ASp.Net, jQuery Draggable Div Example in ASP.Net, Disable cut, copy and paste in textbox using jquery, javascript, Watermark in textbox using JavaScript and many other articles related to jQuery and Java Script.

Here, I am going to explain how to calculate the age of person from data of birth using Java Script. In some cases we need to calculate the age of person . We can calculate the age using Java Script on client side very easily.

jQuey .toggleClass() Example in ASp.Net

In previous posts, I explained jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Here, I will show you a simple example of  .toggleClass() using jQuery in ASP.Net.

jQuery .toggleClass()

.toggleClass() uses for add or remove one or more classes from each element in the set of matched element.

jQuery Draggable Div Example in ASP.Net

In previous posts, I explained jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Now , I will show you a simple example of  resizable div using jQuery in ASP.Net.

We can create a resizable div just by simple call the draggable() property of jQuery UI library that would be like as shown below.

jQuery Resizable Div Example in ASP.Net

In previous posts, I explained Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Now , I will show you a simple example of  resizable div using jQuery in ASP.Net.

We can create a resizable div just by simple call the resizable() property of jQuery UI library that would be like as shown below.

Drag and drop html list item with in list using jQuery

Here, I will show you a simple example of rearranging the HTML list item through drag and drop functionality using jQuery. Here in this example, I have used the jQuery List DragSort plugin . You can download this plugin from here.

To implement this we need to write the code like as shown below

jQuery Magnifier Example | Showing the magnify view of image

Here, I will show you a simple example of jQuery magnifier for image. Here in this example, I have used the dio5 jQuery magnifier plugin . You can download this plugin from here.

To implement this we need to write the code like as shown below

Disable cut, copy and paste in textbox using jquery, javascript

Sometimes we need to restrict the user to cut or copy the content from TextBox and also restrict to paste the content into TextBox. It is very easy to do this using Java Script as well as using Jquery. Here I will show you both the methods i.e. using Java Script and using jQuery.

Nested Gridview with Expand/Collapse Functionality

Here in this example, I am going to show you how to create Nested Gridview with Expand and Collapse Functionality.

I have used java script to add the expandable and collapsible functionality in nested gridview by displaying plus and minus image. I have used Subjects and SubjectUnits tables to populate the nested gridviews. 

Difference between document.ready and window.onload or pageLoad

In Asp.Net Web applications, developers use the jquery’s $document.ready() and pageLoad() or window.onload events very frequently. In the first sight these events seems very similar in functioning. But $document.ready()  and pageLoad() methods are very differ in functioning.

In this post I am trying to expose the difference between $document.ready()  and pageLoad() .

Watermark in textbox using JavaScript

In the web application development, developers always try to make UI more user-friendly and interactively. Showing watermark on textbox is one of the tools to increase user-interactivity of website. Most of the sites use the watermark mainly for “Search” functionality. In this post I will show you a simple implementation of watermark in textbox using JavaScript.