Last year, Matt posted a cool post about How To: Use the HoverMenuExtender for GridView RowCommands. Last month I got an e-mail from Justin Riggs, he was trying to combine to things. The usage of HoverMenuExtender as described in Matt's post, and the Master\Detail GridView with CollapsiblePanelExtender I posted about few months ago.

He already made the sample which ease the job for me in this post, but he had and issue that the functionality wasn't work properly. So I fixed that and thought to share it here in case anyone would love to apply same feature. You can view demo here.

It is a must that you return to How To: Use the HoverMenuExtender for GridView RowCommands by Matt, and Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel by me before you go a head in this post.

More...

Well, I'm done with this article that show in details how to build on demand loaded details from master data using GridView and CollapsiblePanelExtender control. Read the article.

Earlier this year Matt Berseth posted about Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls. Then I followed his post with 2 other posts discussing same idea but with different implementation:

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

Later I got few comments about how to implement that using AJAX, in order to display the details data on demand. At that time Dave was demonstrating the usage of jQuery AJAX on his post Using jQuery to consume ASP.NET JSON Web Services. So I came up with another demo to apply on demand loading of details data in my post GridView Grouping Master/Detail Drill Down using AJAX and jQuery.

Again I got few other comments on how to apply same approach, but using ASP.NET AJAX Control Toolkit CollapsiblePanelExtender control. So here I'm going to provide how to do that using CollapsiblePanelExtender and ASP.NET AJAX PageMethods call to apply on demand loading of details from the master data. You can read my article and view Demo here.

Comments can be left on this post as currently pages feature of BlogEngine.Net doesn't support comments.

Yesterday, I was reading Efficient Paging in SQL Server 2005 post by Justin Etheredge, then in the comments I found Kevin Hazzard pointing to his Efficient LINQ to SQL custom paging approach. I liked his way, which reflects Justin's method which I already seen before but never apply it. I think it is more efficient than my method I provided in an earlier post. And if you googled about custom paging with LINQ to SQL you'll find few more implementation.

Today, I'm updating my method and provide the same sample I made last month with Kevin's method. I made an extension method to IQueryable Interface and called it KavinPage. You can view a demo here

Here is the code for the Extension Method:

   1: public static IQueryable<T> KevinPage<T, TResult>(this IQueryable<T> obj, int page, int pageSize, System.Linq.Expressions.Expression<Func<T, TResult>> keySelector, bool asc, out int rowsCount)

   2: {

   3:     rowsCount = obj.Count();

   4:     if (asc)

   5:     {

   6:         return obj.OrderBy(keySelector).Skip(page * pageSize).Take(pageSize);

   7:     }

   8:     else

   9:     {

  10:         return obj.OrderByDescending(keySelector).Skip(page * pageSize).Take(pageSize);

  11:     }        

  12: }

It is all about Extension Methods and how to use them to build SQL Queries. You can return for Kevin's post for detailed explanation. Also you can return to my previous post about this subject for more details about how to put it all together to build Paging ASP.NET ListView using LINQ to SQL and ObjectDataSource.

Download the updated sample.

Last week I posted about building custom paging with LINQ to SQL. And I wrapped the functionality with Extension Method to IQueryable<T> Interface.

Today I'm going to put the custom paging in a practical sample using ASP.NET ListView, DataPager and ObjectDataSource Control. Click here to download the sample. View demo here.

The sample is using Northwind Database. So first I created a Northwind LINQ to SQL class ".dbml"

More...

Introduction:
Last month Matt Berseth posted very good post about how to build Master-Detail with the GridView, DetailsView and ModalPopup Controls. Today I'm going to clone his post and build the same feature using jQuery with jQuery Plugins; one for popup windows jqModal& and the other is for Color Animation. You can view a demo of this sample here [View Demo].

Prerequisites:
Because I'm using some design tips and styles posted in Matt's posts, I recommend to return to his original posts regarding styling and UI enhancement. I used the styles and design shown on his post Building a VS2008 Styled Grid with the GridView Control.

In my sample I'm using UpdatePanel, and used a client side technique to update the UpdatePanel. To read and review more about this technique please read Dave's post Easily refresh an UpdatePanel, using JavaScript.

It is important also to review documentation of jqModalas I'm not going to explain its APIs.

Implementation:
To make a long story short, I just modified Matt's sample and replaced ModalPopup control of AJAX Control Toolkit with jqModal. Also Matt used to indicate the updated row by setting a style sheet class to the updated row for certain period of time then remove it to make it look as before. I did the same, but I used some kind of animation provided by Color Animationplugin for jQuery.

More...

Introduction:
Last month I posted about Building a grouping Grid with GridView and JQuery. And I got feedbacks about how to do the same thing using AJAX (on demand retrieving of detail data). In fact I was thinking of that too, and I had couple of ideas in mind. One of them it to use nested update panels, or use AJAX Data Controls with page method/web service method calls along with ASP.NET AJAX. You can view the [demo here].

I didn't like the nested update panel idea, although it is the easiest I think. And was started to think about the second idea but I was about to check another way other than ASP.NET AJAX as long as I'm using jQuery. So I was thinking of using jQuery AJAX. That was just after reading Dave Ward's post Using jQuery to consume ASP.NET JSON Web Services.

More...

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...