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:

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:

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!

ASP.NET HTML Editor – Keyboard Shortcuts

Keyboard shortcuts are great. Especially when you’re writing in an online HTML editor, because they don’t require you to take your hands off the keyboard!

The DevExpress ASPxHtmlEditor editor provides many popular keyboard shortcuts as defaults.

And in the latest release of DXperience v2011.2, we added the ability for you to customize these keyboard shortcuts for your end-users (S38048).

Default Shortcuts

Here’s the list of the default ASPxHtmlEditor keyboard shortcuts.

Notice that the ASPxHtmlEditor provides a way for you to create hyperlinks using the common ‘Control + K’ keyboard shortcut found in many popular office products. Personally, I love that shortcut!

Try it now online: http://demos.devexpress.com/ASPxHTMLEditorDemos/Features/General.aspx

Shortcut	ActionName	Description
Ctrl+A	selectall	Selects the entire content
Ctrl+B	bold	Applies bold formatting to the selected text
Ctrl+C	kbcopy	Copies the selection
Ctrl+E	justifycenter	Justifies text center
Ctrl+G	insertimagedialog	Invokes the Insert Image Dialog
Ctrl+I	italic	Applies italic formatting to the selected text
Ctrl+J	justifyfull	Justifies text
Ctrl+K	insertlinkdialog	Invokes the Insert Link Dialog for the selection
Ctrl+L	justifyleft	Justifies text left
Ctrl+P	print	Prints the editor’s content
Ctrl+R	justifyright	Justifies text right
Ctrl+U	underline	Underlines the selected text
Ctrl+V	kbpaste	Pastes content from the clipboard
Ctrl+X	kbcut	Cuts the selection
Ctrl+Y	redo	Redoes the last undone action
Ctrl+Z	undo	Undoes the last action
Ctrl+Ins	kbcopy	Copies the selection
Ctrl+Shift+K	unlink	Unlinks the selection
F11	fullscreen	Activates/deactivates the full-screen mode
Shift+Del	kbcut	Cuts the selection
Shift+Ins	kbpaste	Pastes content from the clipboard

 

Customization

There are two ways to customize the keyboard shortcuts, at design-time and runtime.

Design-time

In fact, you can redefine default shortcuts and create custom shortcuts at design time in two ways: using a shortcut editor or directly in a markup. To display the shortcut editor, click the Shortcuts property’s ellipsis button in the Properties window while designing.

The code sample below demonstrates how you can specify shortcuts in markup. The first shortcut invokes a MyDialog custom dialog. The second shortcut redefines a default Ctrl+B shortcut. The third shortcut assigns the default command bold to custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

<dx:ASPxHtmlEditor ID="MyHtmlEditor" runat="server">
     <CustomDialogs>
          <dx:HtmlEditorCustomDialog Caption="My Custom Dialog" 
          FormPath="~/CustomDialogs/MyCustomDialog1.ascx" Name="MyDialog" />
     </CustomDialogs>
     <Shortcuts>
          <dx:HtmlEditorShortcut ActionName="MyDialog" ActionType="ShowCustomDialog" Shortcut="Ctrl+D" />
          <dx:HtmlEditorShortcut ActionName="backcolor" Shortcut="Ctrl+B" />
          <dx:HtmlEditorShortcut ActionName="bold" Shortcut="Alt+B" />
     </Shortcuts>
</dx:ASPxHtmlEditor>

 

Runtime

The ASPxHtmlEditor allows you to modify any shortcuts at run time. Simply use the methods provided in the HtmlEditorShortcutCollection collection.

The code sample below demonstrates how you can modify a shortcut collection at run time:

• The first shortcut invokes a MyDialog custom dialog.
• The second shortcut redefines a default Ctrl+B shortcut.
• The third shortcut assigns the default command bold to a custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

using DevExpress.Web.ASPxHtmlEditor;

...

protected void Page_Load(object sender, EventArgs e) {
     if (!IsPostBack) {
          MyHtmlEditor.Shortcuts.Add("Ctrl+D", "MyDialog", ActionType.ShowCustomDialog);
          MyHtmlEditor.Shortcuts.Add("Ctrl+B", "backcolor");
          MyHtmlEditor.Shortcuts.Add("Alt+B", "bold");
     }
}

 

ASP.NET MVC Supported too!

These shortcuts can also customized for the DevExpress ASP.NET MVC HTML Editor extension too!

 

What custom shortcuts have you added to the ASPxHtmlEditor? Drop me a line below with your thoughts, thanks!

Save time and money…

Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Home/Try.xml

How to present PowerPoint slides with a WinForms Tiles App

Check out this slick little application I built using the new DevExpress WinForms Tile controls for my touch webinar:

Quick & fun

This app took me about 15 minutes to create. And I wrote it for 2 main reasons:

1. It’s a fun way to learn the new DevExpress WinForms Tile suite
2. And it’s a great way to show touch features

Creating a slick and useful app quickly like my TileControlPowerPoint is what DevExpress productivity is all about.

How it’s made…

This visually stunning application is simple and it follows most of the steps outlined in the following videos:

• WinForms Tile Control – Getting Started
• Watch this video – Take a tour of DXv2: Touch

Here’s the general steps:

1. I started by creating a new (blank) WinForms app.
2. Added the DevExpress XtraTile control, then 1 group and 1 tile. Watch this video to learn how.
3. Added a green metro-style background image and customized the tile to make it larger.
4. Added the code below to look for a ‘Slides’ folder and then dynamically create tiles based on the slides. This saves the trouble of manually creating each tile.
5. Finally, I set the base form is also set to maximum and without a title bar.

Note: I use the background image property of the tiles to show the slides. These images were originally developed in PowerPoint and it’s very easy to save your slides as images.

Download

Download the full source code of the TileControlPowerPoint WinForms touch application here:

TileControlPowerPoint.zip

DemoWare

Warning: This was a small fun app I wrote in 15 minutes. As such, I don’t recommend hard coding strings (the way I did). In fact, feel free to Refactor the small amount of code below. It dynamically creates tiles and uses the images for background so you don’ t need to do it at design-time:

string path = AppDomain.CurrentDomain.BaseDirectory + @"slides";
private void LoadItems()
{
    if (Directory.Exists(path))
    {
        tileControl1.BeginUpdate();
        int filesCount = Directory.GetFiles(path).Length;
        for (int i = 1; i < filesCount; i++)
        {
            string fileName = path + "\\Slide" + i + ".png";
            TileItem item = new TileItem() { IsLarge = true, BackgroundImage = Image.FromFile(fileName) };
            tileGroup2.Items.Add(item);
        }
        tileControl1.EndUpdate();
    }
    else
    {
        MessageBox.Show("Slides not found");
        if (System.Windows.Forms.Application.MessageLoop)
        {
            Application.Exit();
        }
        else
        {
            System.Environment.Exit(1);
        }
    }
}

Check out the recent touch webinar and download the app I used to present the slides. Then drop me a line below with your thoughts. 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/

How to disable command buttons in ASPxGridView

Update: Please check this code central example for a better approach: How to use ASPxCheckBox in DataItemTemplate to emulate a selection

Check out this quick tip on how to disable the Insert, Edit and Delete command buttons in the ASPxGridView.

We’ve also created a new ASPxGridView event to simply the approach described above. But more on that later.

Scenario

You’ve enabled edit/insert/delete functionality for your grid, however, you need to disable it for certain rows.

Solution

First, we should dynamically check which rows need to be disabled. Then we’ll use the HtmlCommandCellPrepared event because it allows you to change the settings of individual command column cells. For example, this code below will hide the ‘New’ button and disable the selection check box for every other row:

protected void ASPxGridView1_HtmlCommandCellPrepared(object sender, ASPxGridViewTableCommandCellEventArgs e)
{
    if (e.CommandCellType == DevExpress.Web.ASPxGridView.GridViewTableCommandCellType.Data)
    {
        // odd row
        if (e.VisibleIndex % 2 == 0)
        { 
            e.Cell.Controls[1].Visible = false;  // hide the New button
            ((WebControl)e.Cell.Controls[3]).Attributes["disabled"] = "true"; // disable the selection checkbox
        }
    }
}

You can download and see a live demo of this code at Code Central: How to customize command buttons in individual rows

New Event For Easier Approach

While the approach described above is good, the R&D team wanted to improve access to the command buttons at runtime. So a new event was implemented for the upcoming DXperience 2009 Volume 1 release. The new CommandButtonInitialize event allows you to change command button controls visibility and also enable/disable them easily. For example, the code below shows how to hide every third “Select” button and disable every second ‘Select” button:

protected void ASPxGridView1_CommandButtonInitialize(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewCommandButtonEventArgs e)
{
    if (e.Button.ButtonType != DevExpress.Web.ASPxGridView.ColumnCommandButtonType.Select) return;
    e.Visible = e.VisibleIndex % 3 != 1;
    e.Enabled = e.VisibleIndex % 2 != 1;
}

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/

DevExpress ASP.NET Themes – Easy 3 Step Customization for Your Projects

Check out the difference between a naked ASP.NET project and the same project using a Developer Express theme:

Nice upgrade, isn’t it? Here are the 3 simple steps to add Developer themes to your project: 

1. Add a Combo Box for Selecting the Theme

First you’ll need to decide on which page you want to put the theme selection combo box. You can put it on a master page so that it’s available on all derived pages. Or you can put it on a user customization page, like an options/settings page. Putting the the combo box at the top of the page will make it easier for the user to find and select the theme. You can see a sample of this in the ASP.NET demos. I recommend binding this combo box to an XML file that contain a list of the available themes.

2. Use DevExpress ASP.NET Theme Deployment Tool

There are several great pre-built themes that ship with our ASP.NET controls like the Office 2003 themes. Check out the ASPxThemeDeployer video to learn how to copy the DevExpress ASP.NET themes to your local web projects. Click the image to watch the video:

3. Add Code To Load/Save the Themes

In this last step, we’ll add some code to bind as well as handle the load/save of the themes to cookies. Add this code to your CodeBehind file which contains the combo box. This will load and save the selected theme into a cookie so the users don’t have to re-select their favorite theme every time. And to make it easier handle these cookies, include one of JavaScript utility files in a new folder called ‘scripts’:

• C:\Program Files\Developer Express .NET v8.1\Demos\ASPxGridView\CS\ASPxGridViewDemos\Scripts\Utilities.js

Please note that with the DXperience v2010 vol 1 release, we’ve moved the local demos location to the User Documents area. For example, on my Windows7 install, the file is located here now:

• C:\Users\Public\Documents\DevExpress 2010.1 Demos\Components\ASPxGridView\CS\ASPxGridViewDemos\Scripts\Utilities.js

This file contains some methods which we’ll call from the client-side to save the theme whenever the user selects a new theme:

<dxe:ASPxComboBox AutoPostBack="True" DataSourceID="xdsThemes" Width="150px" 
ID="cbSkins" runat="server" EnableViewState="False" 
ClientInstanceName="cbSkins" OnDataBound="cbSkins_DataBound">
<ClientSideEvents SelectedIndexChanged="
function(s, e) {   
	DXSaveCurrentThemeToCookies(s.GetSelectedItem().value);
}" />

Here’s a complete sample project that shows the combo box for themes in action [Sample project: (C#) ChooseSkinDemo.zip | (VB) ChooseSkinDemoVB.zip].

Soft Orange	Red Wine
Youthful	Black Glass

Improve your UI by adding these Developer Express themes. Then leave a comment below about how much your users love this feature.

What’s New in 2008 Volume 2 for ASP.NET?

The 2nd major DXperience release of 2008 is just around the corner. This three (major) releases per year cycle is very useful. Each major release means new features, controls, functionality, etc. And in the 2008 Volume 2 (aka v8.2) release there are some great features from the ASP.NET team. Read below for the full list. This post also ties in with the other announcements about the v8.2 release:

• The One with XtraPivotGrid and editing – (What’s new in v8.2)
• A Tree, a List, a TreeList…the ASPxTreeList v2008 vol 2
• The XtraCharts Suite v2008 vol 2
• The One with XtraReports and Calculated Fields – (What’s new in v8.2)
• The One with iCal – (What’s new in v8.2)

---

Common Changes Across All ASP.NET Controls

 

Useful Class for Client-side Scripting

A new ASPxClientUtils class allows you to easily perform some typical client-side actions such as:

• Determine web browser type
• Work with arrays
• Access an object’s parent or child object
• Obtain event parameters

Enable/Disable Controls and Control Elements on the Client Side

Previously, enabling/disabling a control or a control element required a round trip to the server. In 2008 vol 2, the controls from the ASPxEditors and ASPxperience Libraries allow you to change their enabled state or the state of their elements (tabs, menu items) on the client side. This reduces the number of round trips to the server and increases web site responsiveness.

Distinguish Between Callbacks and Postbacks

A new server-side IsCallback property has been added to our web controls. This property allows you to find out whether a control takes part in callback processing.

Native Rendering for Data Editors

Some controls from the ASPxEditors Library (ASPxTextBox, ASPxMemo, ASPxListBox, ASPxComboBox and ASPxButton) can now be rendered as HTML INPUT elements of the appropriate types. This allows you to enable native rendering for these elements thus providing Windows® style UI in your web site. Native rendering results in less HTML code which improves an application’s overall performance.

---

ASPxHtmlEditor

Integrated Spelling Checker

The ASPxSpellChecker is now integrated into the ASPxHTMLEditor which enables spelling validation in the editor’s Design View. To check spelling, end-users can now simply press a built-in toolbar button.

Predefined Styles for Text Formatting

Previously, every toolbar button performed a very basic formatting operation – for instance, applying bold or italic formatting, changing background color, etc. Now you can create buttons that change multiple style attributes at once. This is extremely useful if end-users need to highlight multiple text fragments using the same style settings.

To enable this functionality, all you need is to create a custom CSS style and expose it via a toolbar’s specially designed dropdown editor.

Responding to Focus Changes via Client-side Events

Newly implemented client-side events allow you to respond to the focus event being received or lost by the editor’s Design View. For instance, this enables you to implement client-side user input validation when an end-user tries to leave the editor.

Complete XHTML compliance

HTML code entered into the editor’s HTML View can be automatically validated and transformed into XHTML 1.0 Transitional compliant markup. As the result, the editor’s content is always kept safe, since the editor removes all potentially harmful code – unknown tags and attributes, script elements, client-side event handlers and URLs with script content. Automatic validation also helps to keep HTML code validity by correcting invalid tag hierarchies and changing invalid attribute values.

The ASPxHtmlEditor exposes several options to control which automatic transformations are required. You can also update HTML code manually by overriding an event.

---

ASPxperience Suite

 

Obtaining Settings from Data Fields

Some controls like the ASPxNavBar, ASPxMenu and ASPxTabControl, now expose properties which allow you to specify data fields from whose items settings are to be obtained. Examples of settings that can be fetched from a data table are item tooltips, navigation URLs, image URLs, etc.

Data binding, an entirely new feature in this release, is now supported for the ASPxTabControl. Prior to v2008 vol 2, it could only work in unbound mode.

Easily Transmit Any Data onto the Client

All AJAX-enabled controls in the ASPxperience Suite now allow the same easy data exchange with the web server as in the ASPxGridView Suite. The Controls expose the CustomJSProperties event, which enables you to declare custom properties for the client control. You can specify these properties’ values on the server side and then access them on the client, as you would do with built-in properties.

New Media Formats for Object Container

The list of allowed video and audio types has been extended with QuickTime Video and QuickTime VR (virtual reality) types.

ASPxCallbackPanel Improvement

The panel’s content can now remain visible during callback processing. This behavior is optional – a loading panel is displayed by default.

ASP.NET Video Tutorial: How to Perform Custom Edit/Updates with ASPx GridView

Custom Updates allow you to tweak and define your own values for an edit column before they’re saved to the data source. Let’s say you want to define the value used to update a column in your data table. Then you can use the http://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_RowUpdatingtopic event to customize updates. Check out this short 5 minute video on how to perform custom updates with the ASPxGridView. You can also view the video in full-screen mode using the right most button on the flash player below:

Visual Studio 2008 SP1 Beta and Performance

<UPDATE: May 16, 2008> Scott Guthrie and his team picked up on this post. They have since verified and logged the issue mentioned below.</UPDATE>

Last Friday, Microsoft released a beta of the upcoming Visual Studio Service Pack 1. Check out Scott Guthrie’s post for a list of improvements and features included in the service pack. You can also find links to download the service pack in his post. Here is a short overview of what’s included in the VS2008 SP1 beta:

"Visual Studio 2008 SP1 delivers various improvements to Visual Studio 2008 such as support SQL Server 2008 and new ADO.NET features such as the Entity Framework, numerous improvements to the WPF designers, WCF Templates for Silverlight projects, debugger support for the .NET Framework public symbols and source release, control improvements and additions (such as the DataRepeater for Windows Forms and Office 2007 Ribbons for C++), and a number of general debugging and Intellisense updates. This Service Pack also includes fixes to improve the stability, performance and security of many areas of the product."

The last sentence, which I highlighted in bold, is probably what’s most interesting about the SP1 beta. Many of you have been waiting for such a release to address the issues in Visual Studio 2008. And while it does offer improvements, you should be aware that this is a beta release. For example, after installing the beta, you may need to run the ToolBoxCreator.exe to re-register our controls within VS2008. You can run this utility from the Start Menu under the Developer Express/Tools folder.

For a small test I recreated the ASPxGridView’s Detail Tabs demo page. The SP1 beta performed very well on my Sony Vaio laptop. The initial load times still may not be as impressive as running VS2008 on a quad-core cpu desktop machine with fast hard drives but there are noticeable improvements. However, there were some glitches. When switching the ASPX page to the designer view, VS2008 generates several extra entity spaces (nbsp) within the templates section. The extra items then make the project fail to compile. This can fixed by going back to the source view and removing the extra html.

This service pack has some improvements, but it’s definitely a beta release. Don’t use it to compile any mission critical code. If are looking to increase performance for Visual Studio then consider a faster hard drive. Scott Guthrie outlines why hard drive speed matters for visual studio performance. He also lists some other performance recommendations which could improve your experience within Visual Studio 2008.

If you do try the VS2008 SP1 beta then I’d love to hear about it. Leave a comment and let me know how it works for you if you try it. I love to hear about life on the cutting edge!

How to optimize the ASPxMenu control

The support team just released a great knowledge base article which shows how to optimize the ASPxMenu control. In this article, you’ll learn how to reduce the render size of the ASPxMenu and improve your website’s speed. There are several tips and suggestions on topics like ViewState, gutters, animations, submenus, shadows and more.

Here are some sample stats that show how page size can be reduced by using these tips:

Check out the entire article for some great tips on how to reduce page size when using the ASPxMenu control:

KB18089: How to optimize the ASPxMenu control

Then drop me a line here and let me know your experience with the suggestions.

Screencast: Enable Server Mode using LINQ (ASPxGridView & XtraGrid)

In a previous post, I showed you how to use the powerful Server mode feature in ASPxGridView and XtraGrid against large datasets. The response to Server mode was so good that we’ve extended the ways that you can enable it.

You can now use a LINQ provider to work with our .NET grids in Server mode. The latest release, 2008 Volume 1, introduces two new datasources to support LINQ.   LinqServerModeDataSource supports the ASPxGridView and the LinqServerModeSource supports the XtraGrid. To use these datasources against either the ASPxGridView or XtraGrid, try the steps demonstrated in the short screencasts below.

ASPxGridView Screencast

XtraGrid Screencast

The LINQ support in Server mode is bleeding-edge technology which gives you the performance gains for your projects. Check out this cool feature then let me know how you’re using LINQ and how you plan to use these new LINQ datasources.