Tuesday, July 31, 2012

Asp.Net jQuery GridView Tutorial


jQuery provides a number of useful client side functionalities on the Asp.net GridView control like Style, Row count, Column count, Search, Filter etc

In the following example I have tried to cover all the possible scenarios which we come across while using a GridView control. 

Asp.Net jQuery GridView Filter Autocomplete Style

jQuery can be used to perform a dynamic (Autocomplete style) filter on the rows of an Asp.Net GridView control. The Client side Filter operation can be performed by looping through all the rows in the GridView and filtering the text in a specific column whenever the text is changed in the filter TextBox. 



In this example we shall see on how to implement a client side Autocomplete style filter on a GridView control using jQuery. 


Asp.Net jQuery GridView Search Client Side

jQuery can be used to perform a Client side Search operation on the Asp.Net GridView control. The search operation can be performed by looping through all the rows in the GridView and filtering the text in a specific column. 



In this example we shall see on how to implement a client side search on a GridView control using jQuery.


Asp.Net Free Rich Text Editor using NicEdit Editor - Loading Content

NicEdit is a Javascript Based, WYSIWYG Editor, here we shall see on how to load content into the Editor from a database.






Asp.Net Free Rich Text Editor using NicEdit Editor - Insert Text Into Database

NicEdit is a Javascript Based, WYSIWYG Editor, here we shall see on how to get the text entered in the Editor and insert it into the Database. 




Monday, July 30, 2012

Asp.Net Free Rich Text Editor using NicEdit Editor - Custom Interface

We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the NicEdit editor.




NicEdit is a FREE Javascript Based WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to integrate a Custom Rich Text Editor interface.


Asp.Net Free Rich Text Editor using NicEdit Editor - Advanced Interface

We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the NicEdit editor.





NicEdit is a FREE Javascript Based WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to integrate an advanced Rich Text Editor interface.


Asp.Net Free Rich Text Editor using NicEdit Editor - Simple Interface

We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the NicEdit editor.






NicEdit is a FREE Javascript Based WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to integrate a simple Rich Text Editor interface.


Asp.Net Free Rich Text Editor using Tiny MCE Editor - Loading Content


TinyMCE is a Javascript Based, WYSIWYG Editor, here we shall see on how to load content into the Editor from a database.

Asp.Net Free Rich Text Editor using Tiny MCE Editor - Insert Text Into Database

TinyMCE is a Javascript Based, WYSIWYG Editor, here we shall see on how to get the text entered in the Editor and insert it into the Database. 


To see on how to integrate the editor with an Asp.net textbox refer to the post Asp.Net Free Rich Text Editor using Tiny MCE Editor - Simple Interface

The editor gives the text in the textbox as HTML tags with all the formatting, we just need to fetch the text using the .text property and save the HTML Tags



Apply TinyMCE Editor to specific textarea

The TinyMCE WYSIWYG Editor, by default applies the Rich Text Theme to all the TextAreas in a page, however we would need the theme only to specific textareas in the page, in such cased the theme can be restricted to specific text areas by tagging them to a specific class name.

editor_selector: "mceEditor"

Asp.Net Free Rich Text Editor using Tiny MCE Editor - Custom Interface More Features


We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the TinyMCE editor.

TinyMCE is a Javascript Based, WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to add more Features to the Custom Interface of the Editor by adding custom settings.

Asp.Net Free Rich Text Editor using Tiny MCE Editor - Custom Interface


We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the TinyMCE editor.




TinyMCE is a Javascript Based, WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to integrate an Custom Rich Text Editor interface.


Asp.Net Free Rich Text Editor using Tiny MCE Editor - Advanced Interface


We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the TinyMCE editor.

TinyMCE is a Javascript Based, WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to integrate an Advanced Rich Text Editor interface.
 

Asp.Net Free Rich Text Editor using Tiny MCE Editor - Simple Interface


We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the TinyMCE editor.

TinyMCE is a FREE Javascript Based WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to integrate a simple Rich Text Editor interface.

Thursday, July 26, 2012

Asp.net jQuery Browser close confirmation


In many occasions we will want to prompt the user to save the data, before he closes his browser/tab. This can be done using jQuery by tracking the data modifications in the page.

Asp.net jQuery Page Resize Event Handler


The Page/Window Resize event can be handled using jQuery by adding a handler to the jQuery resize event as follows.

$(window).bind("resize", function(event) {
     // Add your code here.
});


Asp.net jQuery Page Blur Event Handler


The page Blur event can be handled using jQuery by adding a handler to the jQuery focusout event as follows.

$(document).bind("focusout", function(event) {
// Add your code here.
});

Asp.net jQuery Page Focus Event Handler


The page Focus event can be handled using jQuery by adding a handler to the jQuery focusin event as follows.

$(document).bind("focusin", function(event) {
// Add your code here.
});

Asp.net jQuery Page Load Event Handler


The page load event can be handled using jQuery by adding a handler to the jQuery load event as follows.

$(window).bind("load", function(event) {
// Add your code here.
});

Asp.net jQuery Page Unload Event Handler


The page unload event can be handled using jQuery by adding a handler to the jQuery beforeunload event as follows.

$(window).bind("beforeunload", function(event) {
// Add your code here.
});

Asp.net jQuery DropDown Change Event Handler


The Selected Item Changed event of the DropDown control can be handled using the .change() event handler of jQuery as follows.

$("#drpCountry").change(function(e) {
    ..           
});

Wednesday, July 25, 2012

Asp.Net jQuery GridView Selected Row Values


The click event on the row of a GridView can be tracked using the click event handler of jQuery and the cell values of the selected row can be obtained by referring to the nth cell in the row as follows.

$("#grdEmployee tr").click(function(event) {
   var ID = $(this).find("td:nth-child(1)").html();
   var Name = $(this).find("td:nth-child(2)").html();
   alert('ID: ' + ID + '\nName: ' + Name);
});

Asp.Net jQuery GridView Selected Row Index


The click event on the row of a GridView can be tracked using the click event handler of jQuery and the index of the selected row can be obtained using the rows index() value as follows.

$("#grdEmployee tr").click(function(event) {
   alert($(this).index());
});

Asp.Net jQuery GridView Row Click Event


The click event on the row of a GridView can be tracked using the click event handler of jQuery using the following script.


$("#grdEmployee tr").click(function(event) {
   alert("Row Clicked");
});

Asp.Net jQuery GridView Row Selected


We can highlight the selected row in a GridView using jQuery script as follows.

$("#grdEmployee tr").click(function(event) {
   $(this).addClass("GridRowSelected");     
});
             

Asp.Net jQuery GridView Column Value


The values in a specific column of a GridView can be obtained using the following jQuery script.

 $("#grdEmployee tr td:nth-child(n)").each(function() {
      alert($(this).text());
 });


Asp.Net jQuery GridView Row Value


The values in a specific row of a GridView can be obtained using the following jQuery script.

$("#grdEmployee tr:nth-child(n) td").each(function() {
  alert($(this).text());
});



Asp.Net jQuery GridView Column Count


The number of Columns in an Asp.Net GridView can be obtained using jQuery script as follows.

$("#grdEmployee").find('tr')[0].cells.length

Asp.Net jQuery GridView Row Count


The number of rows in an Asp.Net GridView can be obtained using jQuery script as follows.

$("#grdEmployee tr").length - 1 


Tuesday, July 24, 2012

Asp.Net jQuery GridView Hover Effect


Asp.Net GridView Hover styles like bgcolor, color, font etc can be set using jQuery by adding appropriate style classes to the row of the Grid as follows.

Asp.Net jQuery GridView Alternating Column Style


Asp.Net GridView Alternating Column styles like bgcolor, color, font, padding, spacing etc can be set using jQuery by adding appropriate style classes to the row of the Grid as follows.

Monday, July 23, 2012

Asp.Net jQuery GridView Alternating Row Style


Asp.Net GridView Alternating Row styles like bgcolor, color, font, padding, spacing etc can be set using jQuery by adding appropriate style classes to the row of the Grid as follows.

Asp.Net jQuery GridView Row Style


Asp.Net GridView Row styles like bgcolor, color, font, padding, spacing etc can be set using jQuery by adding appropriate style classes to the row of the Grid as follows.

Asp.Net jQuery GridView Header Style


Asp.Net GridView Header styles like bgcolor, color, fort, padding, spacing etc can be set using jQuery by adding appropriate style classes to the header row of the Grid as follows.

Asp.Net jQuery GridView Style

Asp.Net GridView styles like border, padding, spacing, font, color etc can be set using jQuery by adding appropriate style classes to the Grid as follows.

Asp.Net jQuery Textbox blur event Handler


The blur event of the TextBox can be handled by tracking the focusout event in jQuery as follows.

Syntax
$("#yourtextbox").focusout(function() {

});

Asp.Net jQuery Textbox focus event Handler


The focus event of the TextBox can be handled by tracking the focusin event in jQuery as follows.

Syntax
$("#yourtextbox").focusin(function() {

});

Asp.Net jQuery Textbox keydown event Handler


The keydown event of the TextBox can be handled by tracking the keydown event in jQuery as follows.

Syntax
$("#yourtextbox").keydown(function() {
… 
});

Asp.Net jQuery Textbox keyup event Handler


The keyup event of the TextBox can be handled by tracking the keyup event in jQuery as follows.

Syntax
$("#yourtextbox").keyup(function() {

});

Asp.Net jQuery Textbox keypress event Handler

The keypress event of a TextBox can be handled by tracking the keypress event in jQuery as follows.

Syntax
$("#yourtextbox").keypress(function() {
… 
});

Thursday, July 19, 2012

Asp.Net jQuery UI Tab Adding Images


In this post Asp.Net jQuery UI Tab Adding Images we shall on how to add images to the tab headers.

Images can be added to tab headers by adding appropriate tags to the
tags which are used to create the tab structure. Here is an example.



Asp.Net jQuery UI Tab Adding Icons



In this post Asp.Net jQuery UI Tab Adding Icons we shall on how to add icons to the tab headers.

Icons can be added to tab headers by adding appropriate icons classes to the

tags which are used to create the tab structure. Here is an example.


Asp.Net jQuery UI Tab Event Handler


In this post Asp.Net jQuery UI Tab Event Handler we shall on how to handle the tab events.

Tab events like create, select, etc can be handled by adding appropriate handlers to the tab control as follows.

$("#SimpleTab").tabs(
{
   select: function(event, ui)
   {
     …
   }
});

Asp.Net jQuery UI Tab Animation


In this post Asp.Net jQuery UI Tab Animation we shall on how to add animation effects while loading a tab.

Animation can be added to the tab loading by using the option
fx as follows.
$("").tabs("option", "fx", { opacity: '' });


Asp.Net jQuery UI Tab Mouse Over Tab Switching


In this post Asp.Net jQuery UI Tab Mouse Over Tab Switching we shall on how to switch between the tabs when the user hovers the mouse over the tab header.

The tab switching can be enabled on mouse over by setting the event property as follows.
$("").tabs("option", "event", "mouseover");

Asp.Net jQuery UI Tab Error Handing for Dynamic Tabs


In this post Asp.Net jQuery UI Tab Error Handing for Dynamic Tabs we shall on how to handle errors which occur while creating dynamic tabs and loading remote data.

All exceptions which are thrown while creating and loading dynamic tabs can be handled using AjaxOption handlers as follows.

Asp.Net jQuery UI Tab Remove Tabs Dynamically


In this post Asp.Net jQuery UI Tab Remove Tabs Dynamically we shall on how to remove specific tabs dynamically from the existing collection of tabs.

Tabs can be removed dynamically using the remove option as follows.
$('').tabs("remove", '');

Here the Tab with the index value mentioned in will get removed dynamically.

Asp.Net jQuery UI Tab Cache Remote Tab Content


In this post Asp.Net jQuery UI Tab Cache Remote Tab Content we shall see on enable/disable caching the content of dynamic tabs which are loaded at runtime.

Caching can be enabled/disabled by setting the cache property of the tab control as follows.
$("#SimpleTab").tabs("option", "cache", false);

Asp.Net jQuery UI Tab Add Tabs Dynamically


In this post Asp.Net jQuery UI Tab Add Tabs Dynamically we shall on how to add tabs dynamically to the existing collection of tabs.

Tabs can be added dynamically using the add option as follows.
$('').tabs("add", '', 'Tab Header');

Asp.Net jQuery UI Tab Collapse All Tabs


In this post Asp.Net jQuery UI Tab Collapse All Tabs we shall see on how to collapse all the tabs in a collection of tabs
 
All the tabs can be collapsed by setting the selected option to -1.
$("#SimpleTab").tabs("option""selected", -1);

Full Example
Add a DIV tag SimpleTab to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 

Wednesday, July 18, 2012

Asp.Net jQuery UI Tab Get Active Tab


In this post Asp.Net jQuery UI Tab Get Active Tab we shall see on how to get the index of the active tab in the Tabs collection.
 
Add a DIV tag SimpleTab to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 

Asp.Net jQuery UI Tab Set Active Tab


In this post Asp.Net jQuery UI Tab Set Active Tab we shall see on how to set one of the Tabs as the active tab in the Tabs collection.
 
Add a DIV tag SimpleTab to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 

Asp.Net jQuery UI Tab Example


 In this post Asp.Net jQuery UI Tab Example we shall see on how to create a simple Tab using jQuery and associate it with a set of DIV tags in an Asp.net page.

Add a DIV tag SimpleTab to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 

Asp.Net jQuery UI Tab Tutorial


The jQuery UI library provides a useful Tab control which can be plugged in into out forms, the jQuery UI Tab can be used with a group of div tags to display the information in multiple tabs.

In the following example I have tried to cover all the possible scenarios which we come across while using a
 jQuery UI Tab control.

Tuesday, July 17, 2012

Asp.Net jQuery UI Accordion Event handlers


In this post Asp.Net jQuery UI Accordion Event Handlers we shall see on how to handle the events raised by the accordion control/

Add a DIV tag eventAccordion to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 

Asp.Net jQuery UI Accordion Animate


In this post Asp.Net jQuery UI Accordion Animate we shall see on how to add animation effects which will plan when the panels of the accordion expands/contracts.

Add a DIV tag animateAccordion to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 

Asp.Net jQuery UI Accordion Icons


In this post Asp.Net jQuery UI Accordion Icons we shall see on how to change the icons displayed in the header of the Accordion panels.

Add a DIV tag iconAccordion to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path.