Click here to Skip to main content
Click here to Skip to main content

Tagged as

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

, 25 Jul 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Web Design Tip: How-To Add jQuery Yellow Fade effect to ASP.NET GridView.

Introduction

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

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.
  2. <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>
  3. Add these two methods:
  4. <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.

  5. Add a client-side EndCallback event to your ASPxGridView:
  6. <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 the 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.

Sample Project

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

Use the DevExpress project converter tool to update the sample code to the version of DevExpress you have installed.

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mehul Harry
Web Developer
United States United States
.Net, C#, SQL, Delphi

Comments and Discussions

 
SuggestionIs this a serious post? Pinmembersobo12319-Jul-14 17:50 
QuestionCan this be applied on ASP Gridview as well or?? Pinprofessional VICK3-Mar-14 19:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150123.1 | Last Updated 25 Jul 2013
Article Copyright 2013 by Mehul Harry
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid