Last year on October, Matt Berseth wrote few posts about improving styles of GridView, these posts are the following:

• Improving the Presentation of an Extra-Wide GridView
• GridViewControlExtender - Row MouseOver and Click Styles
• GridViewControlExtender II - Header Cell MouseOver Styles and a Few More Live Examples

Last month, I posted a revised version of his work using Script#. And in this post I'm going to show that same features can be applied using jQuery. And I was really amazed by the simplicty and less of code that I had to write to get the same feature on hand.

I've implemented this using jQuery plugins. So I had to author a plugin and I can call it very simple one as the idea was already done and I had it on my head. I'm not going to explore how jQuery plugins can be authored, but you can return to the following links:

• Plugins/Authoring.
• jQuery Plugin Development Pattern, and this is the best tutorial you can follow to learn more.

You can view demos here [demo 1] & [demo 2]. I will start from the end, on how to use the plugin. Actually it is very simple, all you need to do is to add this JavaScript line to your code when the page, or as a startup script. I did that using onLoad event of the ASP.NET AJAX Application as I have ScriptManager installed on the page:

$(selector).gridviewex(options);

For example:

<script type="text/javascript">
function pageLoad(s,e)
{
    $('#gvProducts').gridviewex({hasPageRow:true,dataRowClass:'row',altDataRowClass:'altrow',
                                rowHoverClass:'rowhover', rowSelectClass:'rowselect',
                                cellHoverClass:'cellhover',cellSelectClass:'cellselect',
                                columnHoverClass:'columnhover'});
}
</script>

More...

One of the handy features that one might with to put on GridView is the Select All checkbox which is similar to the one on Hotmail and Yahoo. You click the checkbox on the header and all items (checkboxes underneath) get checked. [View Demo]

I've seen several implementation for this feature long time ago. Myself wrote one. And all solutions were using some good amount of JavaScript. Today I was thinking, why not revisit the idea again, but this time using all mighty JQuery.

And as expected, the amount of code used to implement this simple feature is really small. I'm going to explore the JQuery code expecting you already know ASP.NET and how to use GridView along with SqlDataSource.

My GirdView looks exactly like this one:

More...

Continuing exploring JQuery! I decided to implement a feature to display some kind of details related to a row displayed on GridView. For example when displaying employees details on GridView some information might not fit in the GridView because it will make it huge and wide. These infomration can be diplayed as Tooltip. Or when you want to display a picture and some kind of formated text to be diplayed as tooltip when mouse hover on the image.

My sample here will show how to implement such feature using JQuery. Again, I'm using same data and designed presented in my previous posts:

1. Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel.
2. Building a grouping Grid with GridView and JQuery.

I'll display customer orders as tooltip. of course so much data to be diplayed as tooltip, but this is just demonstration [View Demo].

More...

Nothing really new on this post, just another way to implement mater/detail representation with nested GridViews with assistance of JQuery. Previously I posted about building same feature using ASP.NET AJAX CollapsiblePanel Extender. that was another example of what Matt Berseth presented in his post about building a grouping grid using ASP.NET 3.5 ListView and Linq.

In this post I'll show how same feature can be implemented using JQuery. Very simple and straight forward.

Requirements:
It is required to download latest version of JQueryin order to be able to use this sample [View Demo].

More...

Couple of days ago, I've walked through how to build simple BlogEngine Extension. Today I'll explore an advanced feature of BlogEngine Extensions which is provided settings your own extensions.

What is Extension Settings:
Settings are parameters user can provide to an extension to manage its behaviour. For example in my PostViews Extension, I'll provide settings that will allow user to exclude rage of IP addresses from accumulating any post view count. This setting is provided by the extension, and defined/filled by user.

Extension Setting Types:
I was able to categorize extension settings into 2 types:

1. Scalar Extension Settings:
   Only single value per parameter will be added. This will be reflected on the settings web form as one text box per parameter which will only accept single value. To enable this feature you should set ExtensionSettings.IsScalar=true
2. Multi Valued Extension Settings:
   Will allow multi value per parameter to be added. Just as Tabular settings. This will be reflected on the settings web form as list of values displayed on GridView. You can add new settings, edit or delete existing ones. To enable this feature you should set ExtensionSettings.IsScalar=false which is currently the default value.

PostViews Extension we are exploring now, has Scalar Extension Settings. The final results of your settings will be displayed as web from with simple text box entry fields:

More...

In this post and following one, I'll explore how to build BlogEngine.Net Extension. In my previous post I showed a simple Extension. Here I'll start again with how to build simple Extension to view total view counts of a post.

Step 1 - Create your class and mark it with Extension Attribute:
Just in the App_Code/Extensions folder, create your extension class and mark it with Extension attribute just as the following:

   1: [Extension("Counts and display number of views for a post", "1.0", "<a href=\"http://www.mosesofegypt.net\">Moses</a>")]

   2: public class PostViewes

   3: {

   4: }

The Extension attribute is very simple, it accepts 3 parameters, Description of the Extension, Extension version and the name of the Author who developed this extension. All are strings of course.

More...