Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

Web Design Tip: How-To Add jQuery Yellow Fade Effect to ASP.NET GridView

Learn how to add the jQuery 'yellow fade technique' (YFT) to highlight changes in your ASPxGridView without getting in your end-user's way.

jQuery Yellow Fade Effect with DevExpress ASP.NET GridView

Yellow Fade Technique

The YFT was first pioneered by 37 Signals back around 2004. Why does it matter?

When you edit or move something on a web page it usually forces a reload of that page. The problem is once the page reloads it’s often difficult to spot and confirm the change (especially if the change occurred somewhere in the middle of the page). The YFT uses JavaScript to create a yellow highlight that briefly spotlights the change when the page reloads. Then, in a second or two, the highlight fades and the page reverts to its normal state. The YFT makes it super easy to spot edits/changes yet its unobtrusive nature lets people quickly get back to work once a modification is confirmed. -Matthew Linderman

Note: While our ASPxGridView doesn't force you to reload the page because it has excellent Ajax callbacks built-in, the YFT is still a great way to let you users know what was just changed. In fact, many sites like StackOverflow.com have adopted it because of it's simplicity and elegance.

jQuery Effect

jQuery makes adding the YFT simple because it provides a 'jQuery effect' called Highlight and you only need to make a single method call in your JavaScript code.

There's A Webinar For That

If you'd like to see a video version of the how-to add the YFT to ASPxGridView then please watch this webinar video. Julian Bucknall, our CTO and resident JavaScript guru, and myself cover this technique and other things to be aware of when using DevExpress ASP.NET with jQuery:

Julian's webinar wrap-up post.

Step-by-Step Instructions

Here's the steps to add the YFT when your end-user click's 'Update' in the EditForm of the ASPxGridView:

1. Add jQuery references. For the Highlight effect, you'll need the Effects Core library. Download it or reference it via CDN as I do in the code below.

<head runat="server">
    <title></title>
    <!-- Here I'm using links for jQuery stuff from Google CDN, it's can be easily changed on local-->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>

2. Add these 2 methods:

<body>
<script type="text/javascript">
    var editedRowSelector = null;

    function OnGridCallback() {
        if (editedRowSelector) {
            $(editedRowSelector).effect("highlight", {}, 3000);
            editedRowSelector = null;
        }
        AddHandlerToUpdateButton();
    }

    function AddHandlerToUpdateButton() {
        $("table[class^='dxgvEditFormTable']")
        .find("a:contains('Update')")
        .click(function () {
            editedRowSelector = '#' + $("tr[class^='dxgvEditFormDisplayRow']").attr('id');
        });
    }
</script>

The OnGridCallback() method is used to call the jQuery highlight effect and is triggered by the ASPxGridView when a callback is finished. The AddHandlerToUpdateButton() method is used to add a click event to the ASPxGridView's 'Update' button.

3. Add a client-side EndCallback event to your ASPxGridView:

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" 
            DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID">
    <ClientSideEvents EndCallback="function(s, e) {
    OnGridCallback();
}" />
    <Columns>
...

Here's what's happening in the code above:

  1. When your end-user clicks the 'Edit' button or anytime the ASPxGridView does a callback, then at the end of the callback, it will call the OnGridCallback method.
  2. If the editedRowSelector variable is not null then we'll call the jQuery highlight and set it to Null.
  3. However, if the editedRowSelector is null then we'll simply called the 'AddHandlerToUpdate' method which will assign the editedRowSelector variable IF the grid's EditForm has displayed.
  4. Then then 'AddHandlerToUpdate' method will look for the 'Update' button within a CSS class called 'dxgvEditFormTable'. If it finds it, then it'll set the 'editedRowSelector' variable.
  5. Finally, when your end-user clicks 'Update', it'll go through the 1-4 steps again but this time, since the 'editedRowSelector' variable is set, it'll call the jQuery highlight effect.

If that explanation is confusing then I apologize and recommend that you watch the webinar video. Smile

Sample Project

Here's the sample website I created in the webinar: zip-Small YFT_ASPxGridView.zip

Use the DevExpress project converter tool if you have a different version than the one I used, DXperience v2011.1.

 

TL;DR

To recap, the yellow fade jQuery effect is an effective way to add a clean notification for end-users. Download my sample app and watch the webinar video to learn how.

 

Try the above sample, then drop me a line below with your thoughts, thanks.

Accept No Limitations - Voted Best Grid by readers of DevProConnections Magazine for 4 straight years

The ASPxGridView Suite is a feature-complete grid and editors library for ASP.NET. With blazing fast data loading, extensive data shaping options, and lightweight memory footprint, the ASPxGridView allows you to deliver a highly compelling and effective end-user experience with ease.

Go with the winner - the most decorated ASP.NET Grid Control in the market.

Check out all the great features now: ASP.NET Data Grid and Data Editors

Follow MehulHarry on Twitter

Published Jun 30 2011, 03:20 PM by
Bookmark and Share

Comments

Defacto Software

Hi Mehul,

I think the YFT example is very useful, any chance there will be a XAF based example?

regards,

Martin

July 1, 2011 6:50 AM

Diego Presno

Great post Mehul!

Any chance this would be a new option for the AspxGridView in the future? A setting for YFT be amazing.

If that is possibly to happen, perhaps I'll wait for this :)

July 1, 2011 9:46 AM

Mehul Harry (DevExpress)

M.Brekhof,

Not sure but I'll ask the XAF experts to comment how to do this for XAF web. :)

Thanks.

July 1, 2011 2:43 PM

Mehul Harry (DevExpress)

Diego,

Thanks, yes the YFT is a pretty cool. If you think it should be part of the ASPxGridView, then please create a suggestion. If the suggestion gets popular then we'll consider adding it for the future.

In the meantime, implementing it using jQuery is very easy. :)

Thanks.

July 1, 2011 2:44 PM

Dennis (DevExpress Support)

Martin, I was able to get it working in an XAF ASP.NET application, but I need some time to polish this solution. I will get back to you as soon as I can.

July 5, 2011 8:36 PM

f g

I am using version 10.2.6.0. It seems not working. Jquery can't find any table[class^='dxgvEditFormTable'] or tr[class^='dxgvEditFormDisplayRow'].

BTW, if I use Inline Edit Form, does the code still work?

Thanks

July 13, 2011 6:10 PM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners