Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

April 2012 - Posts

  • How to Create an ASP.NET Wizard Interface in ASP.NET MVC & WebForms

    Check out this slick Code Central example on how to create a Wizard interface in ASP.NET using DevExpress ASP.NET controls. First, here's a glimpse of what it looks like:

    DevExpress ASP.NET Wizard

    Pretty cool, huh? And it works for both ASP.NET MVC and WebForms! Check out the Code Central solutions here:

    How's it work?

    This wizard interface is a great example because it uses several of the controls from the DXperience ASP.NET subscription:

    • ASPxPageControl, ASPxPopupControl, ASPxMenu (part of ASPxperience)
    • ASPxCheckBox, ASPxLabel, ASPxTextBox, ASPxDateEdit, ASPxComboBox, ASPxButton, ASPxValidationSummary (part of ASPxEditors)

    At the heart of the sample, the ASPxPageControl controls the views before the end-user can move forward to the next view. And the DevExpress ASP.NET editors will ensure validation before the end-user can move forward.

    AJAX Callbacks FTW!

    DevExpress ASP.NET controls have AJAX callbacks built-in so there is no whole-page refresh. And the client-side API makes it seamless to do things like show the popup control. For example, here's the code for the final "Finish" button that displays the popup with the information entered on the previous views/screens:

    function OnFinishClick(s, e) {
        if (ASPxClientEdit.ValidateGroup('groupTabContact')) {
            var str = '<b>Personal Info:</b><br />' + txtFirstName.GetValue() + '<br />' + txtLastName.GetValue() + '<hr />';
            str += '<b>Date Info:</b><br />' + getShortDate(deAnyDate.GetValue().toString()) + '<br />' + cbStates.GetValue() + '<hr />';
            str += '<b>Contact Info:</b><br />' + txtEmail.GetValue() + '<br />' + txtZipcode.GetValue() + '<hr />';
            popupControl.SetContentHtml(str);
            popupControl.ShowAtElement(pageControl.GetMainElement());
        }
    }

    Try out the wizard samples for ASP.NET MVC and WebForms today and then incorporate them into your ASP.NET websites. Thanks!

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

  • Endless Pagination - Load content using DevExpress ASP.NET while scrolling

    Check out this solution to provide an 'endless pagination' feature to your DevExpress ASP.NET enabled websites:

    DevExpressASPEndlessPagination

    A DevExpress ASP.NET Approach

    You can achieve the above sample using these DevExpress ASP.NET controls:

    • ASPxCallback
    • ASPxLoadingPanel
    • ASPxPanel
    • JavaScript methods from our ASPxClientUtils object

    Take a look at this code central sample here:

    ASPxCallback - How to load the content while scrolling - Auto page growth on scrolling down (online demo)

    I'll talk about the magic of the JavaScript code below but first, let's look at the general problem and why using an 'endless pagination' solution can help.

    Large Datasets

    Large datasets on the web are not uncommon anymore. So how do you deal with these large amounts of data without overwhelming the user with a ton of information at once? You paginate the data into smaller chunks:

    DevExpress Pagination

    Endless pagination or infinite scrolling

    Endless pagination (or infinite scrolling) is used by many companies like Facebook.com, Bing.com, twitter.com, etc.

    This behavior is useful when there is a lot of data to be presented on a page. But it is not necessary to load and display all the data at once since most of it may not be needed. However, load a small set of data and then if the user scrolls down the then then automatically load more data. (See the animated gif above for a sample).

    Why use endless pagination?

    I recommend this approach for 2 reasons:

    1. Performance - Your websites are faster when you don't have to display thousands of rows and hundreds of columns at once.
    2. Flow - The end-user is presented with information they can scan/read and then seamlessly load more information using AJAX to continue their experience.

    Jeff Atwood (aka CodingHorror.com) has a fantastic blog post titled "The End of Pagination". Here are some key quotes from the post:

    In a perfect world, every search would result in a page with a single item: exactly the thing you were looking for.

    Pagination is also friction.

    I'm not necessarily proposing that all traditional pagination be replaced with endless pagination. But we, as software developers, should avoid mindlessly generating a list of thousands upon thousands of possible items and paginating it as a lazy one-size-fits-all solution. This puts all the burden on the user to make sense of the items. Remember, we invented computers to make the user's life easier, not more difficult.

    The end-user does usually prefer to see all the data as this Google research confirms:

    User testing has taught us that searchers much prefer the view-all, single-page version of content over a component page containing only a portion of the same information with arbitrary page breaks.

    Interestingly, the cases when users didn’t prefer the view-all page were correlated with high latency (e.g., when the view-all page took a while to load, say, because it contained many images). This makes sense because we know users are less satisfied with slow results. So while a view-all page is commonly desired, as a webmaster it’s important to balance this preference with the page’s load time and overall user experience.

    And endless-scrolling does come with its own drawbacks like scrollbar issues, deep linking, back button position, and other issues mentioned in Jeff's excellent article:

    The End of Pagination

    Experiment, iterate, experiment…

    Iterating and testing various usability scenarios is key to good UI. I recommend that you try the endless-pagination using the DevExpress ASPxCallBack, ASPxLoadingPanel, etc. In fact, this feature is built into the ASPxGridView: Demo ASPxGridView Virtual scrolling/paging

    Above all else, you should strive to make pagination irrelevant because the user never has to look at more than a few items to find what they need. -Jeff Atwood

    Perhaps the best approach for you might be to simply provide your end-users with one search box that loads the results of a search keyword (yes, like Google.com or Bing.com). Take a look at the ASPxGridLookup's Incremental filtering in Server Mode feature.

    Sample code flow

    The code central sample has the following flow of actions:

    1. After rendering, the user scrolls down the page and we handle the 'scroll' event of the browser window.
    2. When scrolling reaches the page's bottom, we generate a callback (using ASPxCallback) to obtain a new data portion from the server.
    3. Then, we add the received items to the end of the dataContainerElement DIV element.

    Take a look at the JavaScript code in the default.aspx to learn more.

     

    Please leave me a comment below as I'd love to hear your thoughts on how you help your users with larges amounts of data presentation. Thanks!

     

    DXperience? What's That?

    DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

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, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

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