Download - ASP.NET GridView & jQuery.pdf
ASP.NET GridView and jQuery [Tips & tricks for ASP.NET Gridview and jQuery ] [In this eBook, find solution for all possible requirements with ASP.NET GridView control with jQuery.]
http://jquerybyexample.blogspot.com
My Blog Page 2
Copyright © 2013 jQueryByExample
ALL RIGHTS RESERVED
INTRODUCTION
I am an ASP.NET developer and fan of jQuery. And I am using jQuery extensively with ASP.NET
in my work. This eBook has tips and tricks from my blog and these tips and tricks from my real-
life experience with ASP.NET GridView control and jQuery.
WHAT’S IN THIS EBOOK
This eBook takes you through 16 different, useful, tips and tricks and offers solution for all
possible requirements with ASP.NET GridView control. This is a point to point eBook with
detailed explanation of code. Along with this EBook, sample code samples are also attached
which also come with zip package.
WHO IS THIS EBOOK FOR?
This eBook is for developers who are using ASP.NET and JavaScript in their web application. If
you are still using JavaScript for ASP.NET GridView control for client side operation, then you
will find how to write platform independent and lesser code using jQuery. I assume that you
know jQuery basics.
THE BOOK’S WEBSITE
Located at http://jquerybyexample.blogspot.com. On this website, you can find solution for
many jQuery problems, details about plug-ins, interview questions and much more useful
information. You can also follow us on Facebook and Twitter.
My Blog Page 3
Index
Formatting ASP.NET GridView rows ............................................................................................................. 4
Highlight row on mouseover in ASP.NET GridView ...................................................................................... 4
Set Alternate color for ASP.NET GridView columns...................................................................................... 5
Highlight ASP.NET GridView Rows when Checkbox is checked .................................................................... 6
Change cursor to hand on mouseover in ASP.NET GridView ....................................................................... 8
How to remove ASP.NET GridView rows ...................................................................................................... 9
How to remove ASP.NET GridView columns ................................................................................................ 9
Drag and Drop ASP.NET GridView rows ...................................................................................................... 11
How to loop through all ASP.NET GridView rows ....................................................................................... 11
How to access particular cell in ASP.NET Gridview ..................................................................................... 12
How to filter ASP.NET GridView records .................................................................................................... 12
How to search through GridView records .................................................................................................. 15
Get ASP.NET GridView Cell Value on Click .................................................................................................. 18
Check/uncheck checkboxes in Asp.NET GridView ...................................................................................... 20
Highlight empty table element ................................................................................................................... 22
Hide table rows with empty td element ..................................................................................................... 23
My Blog Page 4
Formatting ASP.NET GridView rows
In this trick, find how to assign alternate background color of ASP.NET Grid Views rows using
jQuery. In this example, we will assign grey color to all the odd rows of GridView. When I say
Odd that means Rows which are having odd numbers like Row1, Row3, Row5 etc...
Let’s take an ASP.NET Grid View Control and placed it on ASP.NET Page with ID "gdRows". See
below.
<asp:GridView ID="gdRows" runat="server"></asp:GridView>
jQuery provides a selector ":odd" which selects only odd elements. So we need to filter out all
the odd rows and assign the color. To filter the rows, we will use filter() method of jQuery,
which takes selector as argument and returns the elements which matches the selector. See
below jQuery Code.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr").
filter(":odd").css("background-color", "grey");
});
You can also use ":even" selector to assign other than default color to grid view rows.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr").
filter(":even").css("background-color", "blue");
});
http://jquerybyexample.blogspot.com/2011/06/formatting-aspnet-gridview-using-jquery.html
Highlight row on mouseover in ASP.NET GridView
In this trick, find how to highlight a gridview row on mouseover. See below image. (The image is
not showing the mouse cursor, but the cursor is on 3rd row.)
My Blog Page 5
All we need to do is that on mouseover on gridview rows assign any CSS and on mouseout,
remove that CSS. Rather than using mouseover and mouseout method separately, jQuery
provides another method named "hover()" which serves purpose of both the methods. Please
read more here about hover().
Below jQuery code, will find all the rows of gridview and using hover method it will assign
"LightGrey" color on mouseover and then assign "White" color on mouseout.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr").hover(function() {
$(this).css("background-color", "Lightgrey");
}, function() {
$(this).css("background-color", "#ffffff");
});
});
If your default background color for row is other than white then put that color code instead of
white.
But there is a problem with this code. Which is, that it will assign the mouseover and mouseout
effect on header row as well. Try it yourself with above code. So, how to resolve it? Well, we
need to change above code little bit so that it finds only those rows which are having "td", not
"th". To do this, we can use "has" selector of jQuery to find out all the rows which have td. See
below jQuery code.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr:has(td)").hover(function() {
$(this).css("background-color", "Lightgrey");
}, function() {
$(this).css("background-color", "#ffffff");
});
});
http://jquerybyexample.blogspot.com/2011/06/highlight-row-on-mouseover-in-gridview.html
Set Alternate color for ASP.NET GridView columns
In this trick, we will see how easily we can assign background color to ASP.NET Grid Views columns using jQuery. In this example, we will assign "Tan" color to all the even columns of GridView and "PaleGoldenrod" to even columns. When I say Odd, which means columns like column1, column3 etc…
My Blog Page 6
$(document).ready(function() {
$("#<%=gdRows.ClientID%> td").filter(":even").
css("background-color", "Tan");
$("#<%=gdRows.ClientID%> td").filter(":odd").
css("background-color", "PaleGoldenrod");
});
http://jquerybyexample.blogspot.com/2012/04/set-alternate-color-for-gridview.html
Highlight ASP.NET GridView Rows when Checkbox is checked
In this trick, find jQuery code to highlight ASP.NET Gridview row when checkbox is checked and
restore it to original state when unchecked.
My Blog Page 7
How to do it?
Bind the click event to all the checkbox of ASP.NET GridView.
$('#<%=gdRows.ClientID%>')
.find('input:checkbox[id$="chkDelete"]')
.click( function() {
});
In the click event, first check whether the checkbox is checked or unchecked. And store
the status in a variable.
var isChecked = $(this).prop("checked");
After that find the respective row where checkbox is present. As we need to highlight
that particular row only.
var $selectedRow = $(this).parent("td").parent("tr");
If you have different color for alternate rows (see above image) then next few lines of
code is required, otherwise you can skip it. For example, if all rows of same color then
skip this code. But if there is alternate color of GridView rows then it is required.
As once we highlight the row, we can't find what the previous color was. So the idea is
to find the row index. Based on index value (even or odd) set color value in variable.
var selectedIndex = $selectedRow[0].rowIndex;
var sColor = '';
if(selectedIndex%2 == 0)
sColor = 'PaleGoldenrod';
else
sColor = 'LightGoldenrodYellow
Now based on checkbox status, highlight the row (if checked). Otherwise restore it to
previous color which is stored in sColor variable.
if(isChecked)
{
$selectedRow.css({
"background-color" : "DarkSlateBlue",
"color" : "GhostWhite"
});
}
else
{
$selectedRow.css({
"background-color" : sColor,
"color" : "black"
});
}
My Blog Page 8
So putting it together the complete jQuery code is,
$(document).ready(function()
{
$('#<%=gdRows.ClientID%>')
.find('input:checkbox[id$="chkDelete"]').click(function()
{
var isChecked = $(this).prop("checked");
var $selectedRow = $(this).parent("td").parent("tr");
var selectedIndex = $selectedRow[0].rowIndex;
var sColor = '';
if(selectedIndex%2 == 0)
sColor = 'PaleGoldenrod';
else
sColor = 'LightGoldenrodYellow';
if(isChecked)
$selectedRow.css({
"background-color" : "DarkSlateBlue",
"color" : "GhostWhite"
});
else
$selectedRow.css({
"background-color" : sColor,
"color" : "black"
});
});
});
Click here to see live demo.
http://jquerybyexample.blogspot.com/2012/12/jquery-highlight-aspnet-gridview-rows-on-checkbox-
checked.html
Change cursor to hand on mouseover in ASP.NET GridView
In this trick, find how to change the cursor to Hand style cursor when user takes mouse on the
rows of ASP.NET GridView so that the user will come to know that it is clickable. By default, the
default cursor appears.
Below jQuery code will change the mouse cursor to pointer on hover event.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr:has(td)").hover(function() {
$(this).css("cursor", "pointer");
});
});
http://jquerybyexample.blogspot.com/2011/09/change-cursor-to-hand-on-mouseover-in.html
My Blog Page 9
How to remove ASP.NET GridView rows
In this trick, find how to remove any row in grid view using jQuery. The task is pretty simple.
One need to bind the click event with every tr which has only td not th and on click of event
removes the clicked row. See below jQuery code.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr:has(td)").click(function() {
$(this).remove();
});
});
Aha...How simple it is...Isn't it? But it would be nice if we show the remove row effect using
some animation for better user experience. Well, not to worry when there is jQuery. See below
jQuery code.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr:has(td)").click(function() {
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
});
[Note: This jQuery code handles only Client Side Updates, not server side. You still
need to server side code to delete the row permanently.]
http://jquerybyexample.blogspot.com/2011/09/how-to-remove-rows-from-gridview-
using.html
How to remove ASP.NET GridView columns
In this trick, I will show you how to remove columns in grid view on clicking the column header
using jQuery. To achieve this, one need to bind the click event on the header columns of the
GridView. For your information, GridView is rendered as table > th > tr > td format. So need to
bind the click event on "th" to remove the respective column. So first take a look at complete
jQuery code to remove columns from GridView.
My Blog Page 10
See below jQuery code.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> th").click(function() {
var iIndex = $(this).closest("th").prevAll("th").length;
$(this).parents("#<%=gdRows.ClientID%>").find("tr").each(function() {
$(this).find("td:eq(" + iIndex + ")").remove();
$(this).find("th:eq(" + iIndex + ")").remove();
});
});
});
Okay, let’s understand this code line by line. This below line will bind the click event to all "th"
of GridView named "gdRows".
$("#<%=gdRows.ClientID%> th").click(function() {
Now, before removing the column, we need to find out the index of the th or index of the
header column which is clicked. The below line of jQuery code, will find the index of the click of
the clicked th. The code is using two jQuery selectors "closest()" and "prevAll" to find the out
index.
The jQuery selector .closest() begins with the current element and travels up the DOM tree
until it finds a matching element. And the jQuery selector .prevAll() searches all the
predecessors of the current element in the DOM tree.
var iIndex = $(this).closest("th").prevAll("th").length;
Now we need to define a callback function on each row of the GridView to remove td from the
each row.
$(this).parents("#<%=gdRows.ClientID%>").find("tr").each(function() {
The below code is placed within the callback function of tr and it will remove the GridView Cells
based on the value of iIndex. And it will also remove the th.
$(this).find("td:eq(" + iIndex + ")").remove();
$(this).find("th:eq(" + iIndex + ")").remove();
Instead of removing it, you can also hide the td and th by setting the CSS "display: none".
http://jquerybyexample.blogspot.com/2012/03/how-to-remove-gridview-columns-using.html
My Blog Page 11
Drag and Drop ASP.NET GridView rows
In this trick, find how to rearrange the grid view rows via dragging and dropping rows using
jQuery. For your information, GridView is rendered as table format. So to support drag and
drop functionality to table rows, we will use plug-in named "TableDnD". This plug-in allows the
user to reorder rows within a table. You can download this plug-in from here.
All you need to do is to call the function, "tableDnD()" on the grid view and you are done. See
below jQuery code.
$(document).ready(function() {
$("#<%=gdRows.ClientID%>").tableDnD();
});
You can also add style to let user know that which rows is selected and dropped. To do this, you
need to assign a css class to "onDragClass" option of this plug-in.
$(document).ready(function() {
$("#<%=gdRows.ClientID%>").tableDnD({
onDragClass: "myDragClass"
});
});
http://jquerybyexample.blogspot.com/2012/03/drag-and-drop-gridview-rows-using.html
How to loop through all ASP.NET GridView rows
In this trick, Find that how can you loop through individual rows of ASP.NET GridView using
jQuery. You might be knowing that GridView is rendered as table > th > tr > td format. The
columns names are placed in th tag and data goes into various td tags. So when you want to
loop through all the rows then, just find the rows which have td and are part of ID of
your GridView.
See below jQuery Code. In this code, the ID of GridView is "gdRows".
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr:has(td)").each(function() {
alert($(this).html());
});
});
My Blog Page 12
If you want to loop through all the rows including th as well, then use below code.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr").each(function() {
alert($(this).html());
});
});
And lastly, if you want to access only th row then
$(document).ready(function() {
$("#<%=gdRows.ClientID%> th").each(function() {
alert($(this).html());
});
});
http://jquerybyexample.blogspot.com/2012/03/how-to-loop-through-all-grid-view-rows.html
How to access particular cell in ASP.NET Gridview As you know that GridView is rendered as table > th > tr > td format. Below jQuery code allows
to select first cell or td of every row (tr) in GridView. I have used ":eq()" selector to select
particular cell.
$(document).ready(function() {
$("#<%=gdRows.ClientID%> tr:has(td)").each(function() {
var cell = $(this).find("td:eq(0)");
alert(cell.html());
});
});
With ":eq()" selector pass the index of element to select. The ":eq()" selector selects an element
with a specific index number. The index numbers start at 0, so the first element will have the
index number 0 (not 1). So to select 2nd column then use :eq(1) as the selector.
http://jquerybyexample.blogspot.com/2012/04/how-to-access-particular-cell-in.html
How to filter ASP.NET GridView records
In this trick, find how to filter the rows/records of the ASP.NET GridView on client side. When I
say filter, that means depending on some condition just show only those records which satisfies
the condition
My Blog Page 13
First take a look at below image.
As you can see from image, that there is a GridView control populated with data and above that
there are link buttons for each alphabet along with "All" button. So the problem was, based on
the clicked button filter the data from GridView on "ProductName" column. For example, if "H"
is clicked, only those products should be visible whose name starts with "H".
And if there are no records that satisfy the condition, then display no records message.
Note: Following controls are placed on the page.
A GridView
A Label control which has "No records to display" message.
And separate link button for each alphabet and one link button for "All".
My Blog Page 14
To implement this feature the solution is,
When DOM is ready then hide the Label control.
Attach click event for Link buttons. I have assigned a class "links" to all link buttons. So using class selector, we can attach the click event.
Get the text of the clicked button.
Now loop through all the gridview rows and find td with Product Name.
Check if the text of td starts with clicked button's text.
If yes, then don't hide the row. Otherwise, hide the row.
But we also need to handle the "All" button code and when there are no records then show the label control. The code is very much self explanatory.
So putting it together the complete jQuery code is,
$(document).ready(function() {
$('#<%=lblNoRecords.ClientID%>').css('display','none');
$('.links').click(function(e)
{
$('#<%=lblNoRecords.ClientID%>').css('display','none');
var lnkText = $(this).text().toLowerCase();
var iCounter = 0;
$("#<%=gdRows.ClientID%> tr:has(td)").each(function() {
var cell = $(this).find("td:eq(1)").text().toLowerCase();
if(lnkText != 'all')
{
if(cell.indexOf(lnkText) != 0)
{
$(this).css('display','none');
}
else
{
$(this).css('display','');
iCounter++;
}
}
else
{
$(this).css('display','');
iCounter++;
}
});
if(iCounter == 0)
$('#<%=lblNoRecords.ClientID%>').css('display','');
e.preventDefault();
});
});
http://jquerybyexample.blogspot.com/2012/04/how-to-filter-gridview-records-using.html
My Blog Page 15
How to search through GridView records
In this trick, find how to search through all columns of ASP.NET GridView Data and show only
those data which satisfies the search text.
Take a look at below image.
As you can see from image, that there is a GridView control populated with data and above that
there is a textbox and a button. So the problem was, based on the search text entered in search
text box, filter the data from GridView on any of the column . For example, "10" is entered then
only those rows should be visible which have 10 in any of the column. It can be in ID,
ProductName, and Price or quantity column.
My Blog Page 16
Another example, if "L" is entered then below should be the output.
Note: Following controls are placed on the page.
A GridView
A Label control which has "No records to display" message.
And separate link button for each alphabet and one link button for "All".
My Blog Page 17
How to do it?
First, hide the "No records to display" label and also hide all the rows of GridView.
$('#<%=lblNoRecords.ClientID%>').css('display','none');
$("#<%=gdRows.ClientID%> tr:has(td)").hide();
Now declare a counter variable, which will be used to display "No records to display"
label. And also get the search textbox value.
var iCounter = 0;
var sSearchTerm = $('#<%=txtSearch.ClientID%>').val();
If nothing is entered in search textbox, then display all gridview rows and return from
here. You can also do validation to show alert message to user to enter something. But I
have used Search button as Reset button as well so when nothing is entered, display all
the GridView rows.
if(sSearchTerm.length == 0)
{
$("#<%=gdRows.ClientID%> tr:has(td)").show();
return false;
}
Now run a loop through all td elements and within the loop get the td value and compare if the td value matches with the search term. If yes, then show its parent (that is tr) and increment the counter variable.
$("#<%=gdRows.ClientID%> tr:has(td)").children().each(function()
{
var cellText = $(this).text().toLowerCase();
if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0)
{
$(this).parent().show();
iCounter++;
return true;
}
});
Finally, check if counter variable value is equal to 0. If Yes, then display "No records to display" label.
if(iCounter == 0)
$('#<%=lblNoRecords.ClientID%>').css('display','');
My Blog Page 18
So putting it together the complete jQuery code is,
$(document).ready(function() {
$('#<%=lblNoRecords.ClientID%>').css('display','none');
$('#<%=btnSubmit.ClientID%>').click(function(e)
{
// Hide No records to display label.
$('#<%=lblNoRecords.ClientID%>').css('display','none');
//Hide all the rows.
$("#<%=gdRows.ClientID%> tr:has(td)").hide();
var iCounter = 0;
//Get the search box value
var sSearchTerm = $('#<%=txtSearch.ClientID%>').val();
//if nothing is entered then shows all the rows.
if(sSearchTerm.length == 0)
{
$("#<%=gdRows.ClientID%> tr:has(td)").show();
return false;
}
//Iterate through all the td.
$("#<%=gdRows.ClientID%> tr:has(td)").children().each(function()
{
var cellText = $(this).text().toLowerCase();
//Check if data matches
if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0)
{
$(this).parent().show();
iCounter++;
return true;
}
});
if(iCounter == 0)
{
$('#<%=lblNoRecords.ClientID%>').css('display','');
}
e.preventDefault();
});
});
http://jquerybyexample.blogspot.com/2012/04/how-to-search-through-gridview-records.html
Get ASP.NET GridView Cell Value on Click
In this trick, find how to get ASP.NET GridView Cell Value when it is clicked. You might know
that ASP.NET GridView is rendered as table -> th -> tr -> td format. All the rows are converted
into tr element and values placed in different td elements.
My Blog Page 19
So, when the GridView Cell is clicked, for better user experience it is good to highlight the cell.
You can also see the same in image. So Below given CSS class, I have used to highlight the
selected cell.
.selected
{
background-color: Yellow;
color : Green;
}
Before attaching click event to the GridView cells, it is important to let user know that cell is
clickable. So change the mouse cursor style to "Pointer" so user will come to know that cell is
clickable. Below code exactly does the same thing.
$("#<%=gdRows.ClientID%> tr:has(td)").hover(function(e) {
$(this).css("cursor", "pointer");
});
To get the Cell Data, it is important to find out that will cell is clicked. So
using "closest()" method, we can find out. The "closest()" method gets the first element that
matches the selector, beginning at the current element and progressing up through the DOM
tree.
$("#<%=gdRows.ClientID%> tr:has(td)").click(function(e) {
var selTD = $(e.target).closest("td");
$("#<%=gdRows.ClientID%> td").removeClass("selected");
selTD.addClass("selected");
$("#<%=lblSelected.ClientID%>").html(
'Selected Cell Value is: <b> ' + selTD.text() + '</b>');
});
My Blog Page 20
The previous jQuery code does following things.
First assign a click event to all the tds of GridView.
After that it gets the clicked cell into a object using "closest()" method.
After it removes selected class from all the tds. This is important as if any cell was previously selected then removes the selected class.
Assign selected class to currently clicked cell.
And in the end, gets the selected cell's text and assign it to label.
http://jquerybyexample.blogspot.com/2012/05/get-aspnet-gridview-cell-value-on-click.html
Check/uncheck checkboxes in Asp.NET GridView
Find jQuery code to check/uncheck or select/deselect all the checkboxes in ASP.NET Gridview.
Assume, all the checkboxes are checked when header checkbox is checked but then you
uncheck one of the child checkbox then what happens to your header checkbox? It should also
get unchecked.
In this trick, find jQuery code to
- Check/uncheck all child checkbox based on parent checkbox status.
- Update parent checkbox status based on child checkbox status.
My Blog Page 21
How to do it?
Bind the click event to parent checkbox of ASP.NET GridView.
In the click event, based on the parent checkbox status set the child checkbox status.
Now, based on the child checkbox status also needs to update the parent checkbox. For
example, if out of all the child checkboxes, one is unchecked then parent checkbox
should also be checked.
So for this, attach a click event handler to all the child checkboxes of ASP.NET GridView.
In this event, first define a flag with true value. And then loop through all the child
checkbox and if one of the child checkbox is unchecked then set the flag value to false.
And then update parent checkbox status value based on the flag variable value.
So putting it together the complete jQuery code is,
$(document).ready(function() {
$('#gdRows').find('input:checkbox[id$="chkParent"]').click(function()
{
var isChecked = $(this).prop("checked");
$("#gdRows [id*=chkSelect]:checkbox").prop('checked', isChecked);
});
$('#gdRows').find('input:checkbox[id$="chkSelect"]').click(function()
{
var flag = true;
$("#gdRows [id*=chkSelect]:checkbox").each(function() {
if ($(this).prop("checked") == false)
flag = false;
});
$("#gdRows [id*=chkParent]:checkbox").prop('checked', flag);
});
});
Click here to see live demo. http://jquerybyexample.blogspot.com/2013/01/check-and-uncheck-checkboxes-in-asp-net-gridview-
using-jquery.html
My Blog Page 22
Highlight empty table element Find jQuery code to highlight those <td> elements within a table/ Grid/ GridView/ DataGrid
which have no value associated with it or which are empty. All is required is to loop through all
<td> element and check its value. If it is empty, then assign background color to it so that it
looks highlighted.
$(document).ready(function() {
$("#gdRows td").each(function() {
var cellText = $(this).text();
if ($.trim(cellText) == '')
{
$(this).css('background-color', 'LightGreen');
}
});
});
If you want then you can also assign some default data to these empty <td> elements. Using
text() method set the default text.
$(document).ready(function() {
$("#gdRows td").each(function() {
var cellText = $(this).text();
if ($.trim(cellText) == '')
{
$(this).text('N/A');
}
});
});
Click here to see live demo.
http://jquerybyexample.blogspot.com/2012/11/jquery-to-highlight-empty-td-element-table.html
My Blog Page 23
Hide table rows with empty td element
Find jQuery code to hide those table rows (<tr>) which have at least one or more <td> element
as empty or with no value. To hide table rows, iterate through all td elements and check its
text. If it is empty then hide its parent (which is tr) using .hide().
$(document).ready(function() {
$("#gdRows tr td").each(function() {
var cellText = $.trim($(this).text());
if (cellText.length == 0) {
$(this).parent().hide();
}
});
});
Click here to see live demo.
http://jquerybyexample.blogspot.com/2012/11/jquery-code-to-hide-table-rows-based-on-td-value.html
My Blog Page 24
THANKS
So, I guess you have completed this eBook and reached here. I want to thank you for reading
this book and everyone who has made this possible. And I feel that you have found this eBook
very useful and informative.
Please do share your feedback at mailto:[email protected]
You can also share your feedback on my Blog, Facebook and Twitter.
If you like this eBook then subscribe to our RSS Feed. You can also subscribe via email to get
latest updates about jQuery.
OTHER USEFUL POST
What is jQuery?
jQuery Frequently Asked Questions (FAQ)
Mostly asked jQuery interview questions list
Detailed guide of how to setup jQuery UI - Part 1
Detailed guide of how to setup jQuery UI - Part 2
All you need to know about jQuery UI Datepicker