MSDN Magazine - April 2008 - (Page 38)

Frankly, the user interface you get from the code in Figure 4 is not very appealing. Because a hierarchical data view is being constructed, an expand/collapse panel would be a particularly apt solution for improving the user experience. The ASP.NET AJAX Control Toolkit provides a ready-made extender that, when applied to a Panel server control, can add a dropdown effect to the information associated with each customer and order. The DataPager is a Use the CollapsiblePanelgeneral-purpose paging Extender control to define control that can be used a panel in the page control tree that will be expanded by any data-bound control and collapsed via script. that implements the Needless to say, as a page IPageableItemContainer developer you will not have interface. to write any JavaScript. All of the script required for expanding and collapsing the panel is silently injected by the extender control. Let’s have a look at the properties you might want to set on the extender: Improve the User Experience with Extenders port the collapsible panel extender. In particular, you should edit the panel named panelCustomerInfo to add the button used to expand and collapse the child view. Here’s one way to rewrite the panel’s markup: Some slight changes to the code in Figure 4 are needed to sup- The button is rendered using a right-justified image on the same row as the customer name. The TargetControlID property on the extender references the panel in the page that will be collapsed and expanded. This is the panel that physically contains orders and order details. As you see in Figure 4, it is the panel named panelCustomerDetails. The ExpandControlID and CollapseControlID attributes indicate the ID of the elements that, when clicked, expand and collapse the target panel. If you plan to use different images to reflect the state of the panel, then you need to also specify the ID of an image control. This information belongs to the ImageControlID attribute. The ImageControlID is associated with two other properties, CollapsedImage and ExpandedImage—these hold the URL of the images. The ExpandedSize property sets the maximum height in pixels allowed for the expanded panel. By default, any content that exceeds the height is just clipped out. However, if you set the ScrollContents property to true, a vertical scrollbar is added to let users scroll the entire contents. Finally, the Collapsed Boolean property allows for you to set the initial state of the panel and SuppressPostback indicates whether the expansion of the panel should be a completely client-side operation. When SuppressPostback is true, no postback is used to expand or collapse the panel. This means that no updates are possible on the displayed data. For relatively static data that doesn’t change frequently, this is definitely the best possible choice as it reduces page flickering and network traffic. However, if you need to display data more dynamically in the control, you can still minimize flickering by using an UpdatePanel control. Figure 5 shows the resulting user interface of a tri-level data view. DataPager and ListView Figure 5 Data View with Three Levels The ListView control offers paging facilities through the new DataPager control. The DataPager is a general-purpose paging control that can be used by any data-bound control that implements the IPageableItemContainer interface. As of ASP.NET 3.5, the ListView is the only control that supports this interface. The DataPager control can display a built-in or template-based user interface. Whenever the user clicks to jump to a new page, the DataPager control invokes a method on the IPageableItemContainer interface. This method is expected to set internal variables in the paged control so that only a specific page of data is displayed during the next data-binding operation. 38 msdnmagazine Cutting Edge

Table of Contents Feed for the Digital Edition of MSDN Magazine - April 2008

MSDN Magazine - April 2008 Contents Toolbox CLR Inside Out Basic Instincts Cutting Edge Foundations Test Run Service Station Windows with C++ Going Places { End Bracket }

MSDN Magazine - April 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.