Displaying task results in a table
In this post, Tom Brenneman of ESRI Professional Services presents a Web control he developed for displaying task results in a table.
The standard Web ADF controls render task results with a tree view. This is allows multiple results as well as a variety of result types to be displayed in a uniform way. However some applications require that task results be displayed in a table without having to navigate the tree structure of the standard task results. There is an existing sample that illustrates how this can be done by working with custom tasks or application logic that dynamically updates an ASP.NET GridView control.
The custom control I've provided in this post is a little different in that it works with both standard tasks and custom tasks. Using this GridResults control, you can display the results of a task in a grid by simply adding the GridResults as a Task Result Container of the task. The table generated by the GridResults control also includes rows with buttons and check boxes to enable Pan, Zoom, and Select for each feature. This is what the GridResults control looks like in a web application:
As you can see in the example there are also links at the top to you can Select, Unselect, and Zoom to all of the features in the table. By clicking on the column headers you can sort data in the table. What you can’t see in the example above is that this control also supports ASP.NET themes, so you have complete control over the colors, fonts, and text sizes used by the control. Implementing themes for the control is discussed in more detail at the end of this post.
If you are using the Web Mapping Application template, there are slightly different ways to configure the grid than if you are using it in a standard web page. Below are instructions for each approach.
Using the GridResults control in a Web Mapping Application template application
- Install the GridResults web control.
- Using Visual Studio, create a new website using the Web Mapping Application template.
- Right-click anywhere on the Toolbox and click Choose Items...
- Click Browse and Navigate to gridResults.dll (Default location is C:\Program Files\ESRI\ArcGIS GridResults Control).
- Click OK to dismiss the Choose Toolbox Items dialog.
- Open the Source view for Default.aspx.
- Find the Results floating panel at about line 98. Highlight this block and copy it, then paste it immediately below. We are doing this with the Source view so you can be sure that the location you paste the floating panel is still in the left panel div with the rest of the floating panels. You also may want to keep the Results panel and standard task results container "TaskResults1" for tools such as Identify.
- Change the Title property of the new floating panel to "Table Results".
- Delete the entire TaskResults tag (TaskResults2) from the new Table Results panel.
-
Drag gridResults from the Toolbox into the Table Results floating panel (Where the taskResults control used to exist). Your markup should look like the following.
<esri:FloatingPanel ID="FloatingPanel1" runat="server"
BackColor="White" BorderColor="White" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" Height="150px" Style="position:relative; margin
bottom:0px;" Draggable="False" Title="Table Results"
TitleBarColor="White" TitleBarHeight="20px"
TitleBarSeparatorLine="True" Transparency="0" Width="100%"
HeightResizable="True" Font-Bold="True" CloseButton="False"
TitleBarForeColor="DarkGray" Expanded="False"
WidthResizable="False" ShowDockButton="True"
ShowDockedContextMenu="True">
<esri_samples:gridResults ID="GridResults1" runat="server"
Height="200px" Style="position: absolute; overflow: auto;"
Visible="True" Width="400px" />
</esri:FloatingPanel>
-
To make the grid display with scroll bars in the floating panel, we need to adjust the style attribute of the control. Change the style attribute to the following.
Style="position:absolute; height:100%; width:100%; overflow:auto; left:0px; top:0px;"
- Switch to design view.
- Right-click on GridResults1 and click Properties.
- Set the Map property of the GridResults1 to the name of your map (Map1).
- Use the MapResourceManager to add a map resource to the application.
- Add tasks (such as QueryAttributesTask) to the task manager and configure their properties.
- Click the Smart Tag on your task(s) and click Choose Task Results container.
- Click Add and set the Name of the Buddy Control to GridResults1. If you use the standard TaskResults control with your tasks as well, make sure the standard TaskResults is the last one in the list.
- Click OK to the BuddyControl Collection Editor and run the application.
- When you execute the task, the floating panel will update with a table containing the results.
Using the GridResults control without a floating panel
Use the instructions below if you have created a web application without the Web Mapping Application template. In this case, you will set the style properties appropriately for your application.
- Open your web application in Visual Studio.
- Do steps 3-5 in the instructions from the previous section.
- Add the GridResults control to your page.
- Set the Map and other properties of the GridResults to display appropriately in your application. In the sample I use the following property settings.
<esri_samples:gridResults ID="GridResults1" runat="server" Height="290px" Visible="True" Width="780px" Map="Map1" Style="position:absolute; overflow:auto; z-index: 500; left: 20px; top: 450px; vertical-align:top;" MinWidthOfZoom="0.001" />
- Do steps 15-20 in the instructions from the previous section.
Common properties of the GridResults control to modify
There are two additional properties that you may want to change specifically for your application: MinWidthOfZoom and ZoomExtentExpansionPercentage.
- MinWidthOfZoom – this is the minimum width (or height actually) in map units of the extent rectangle that will be zoomed to. This is particularly useful if the result set is a single point or a very small feature. In this case you could set the minimum extent that the map will zoom to. If you are working with geographic data you may want to make this significantly smaller than the default of 10.
- ZoomExtentExpansionPercent – this is the expansion percentage around the extent of the result set for the map to zoom to. This is useful for defining a margin around the extent of features returned in a result set.
Controlling the appearance of the results control with skins
The GridResults control is actually a Panel control containing a Label control (the resulting table name), Hyperlink controls (The zoom to all button, pan to all button, etc.), and a GridView control. The appearance of these controls honors the styleSheetTheme of your application. Using ASP.NET themes and skins you can control the look and feel of this control in your application. The following are the set of steps to enable themes and configure a skin for the table in the GridResults control. This example modifies the Blue_Bridge theme used by the Web Mapping Application template. If you aren’t using the Web Mapping Application template, you will have to create an appropriate theme for your application before walking through these steps.
- Enable style sheet themes by adding the following tag to your Web.config file.
<pages styleSheetTheme="Blue_Bridge"/>
If you are using the Web Mapping Application template you will want to leave the theme attribute as well, so your tag should look like this. <pages theme="Blue_Bridge" styleSheetTheme="Blue_Bridge"/>
- Open App_themes > Blue_Bridge > Default.skin.
-
Add the appropriate tags to control the appearance of the Label, Hyperlink, and GridView controls contained within this control. Below is an example tag to make the symbology of the grid similar to the Blue_Bridge theme. You can copy and paste this into your skin file as an example.
<asp:GridView runat="server" BackColor="White" BorderColor="#999999"
BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Vertical">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<RowStyle BackColor="White" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#79A8D1" Font-Bold="True" ForeColor="Black"/>
<AlternatingRowStyle BackColor="#C0D4E4" />
</asp:GridView>
- Save and run the application. When you execute the task, you should now see the results displayed in the table with a light blue header and a blue background for the alternating item (See the graphic at the top of this post for an example).
Try it out
Note: This control and its source code are provided for example purposes only and do not constitute a supported ESRI product. Please direct questions about this control to the Comments section of this blog. You may also post questions about using the ArcGIS Server Web ADF to the ESRI User Forums.
Update (February 26, 2008): I fixed a problem with the GridResults control where sorting didn't work right when there are multiple results. This problem is most evident when you use the GridResults control with the Identify tool. This new control is available on ArcScripts here: http://arcscripts.esri.com/details.asp?dbid=15452 .