gridResult——Displaying task results in a table

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

1. Install the GridResults web control.
2. Using Visual Studio, create a new website using the Web Mapping Application template.
3. Right-click anywhere on the Toolbox and click Choose Items...
4. Click Browse and Navigate to gridResults.dll (Default location is C:/Program Files/ESRI/ArcGIS GridResults Control).
5. Click OK to dismiss the Choose Toolbox Items dialog.
6. Open the Source view for Default.aspx.
7. 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.
8. Change the Title property of the new floating panel to "Table Results".
9. Delete the entire TaskResults tag (TaskResults2) from the new Table Results panel.

10. 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>
    

11. 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;"

12. Switch to design view.
13. Right-click on GridResults1 and click Properties.
14. Set the Map property of the GridResults1 to the name of your map (Map1).
15. Use the MapResourceManager to add a map resource to the application.
16. Add tasks (such as QueryAttributesTask) to the task manager and configure their properties.
17. Click the Smart Tag on your task(s) and click Choose Task Results container.
18. 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.
19. Click OK to the BuddyControl Collection Editor and run the application.
20. 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.

1. Open your web application in Visual Studio.
2. Do steps 3-5 in the instructions from the previous section.
3. Add the GridResults control to your page.
4. 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" />

5. 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.

1. 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"/>

2. Open App_themes > Blue_Bridge > Default.skin.

3. 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>

4. 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

• For an example of the GridResults control in action, see this sample application.
• You can download the control and try it out. An installer has been included for convenience.
• You can also download the source code used to create this control and customize it any way you like.

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 .

Published Wednesday, October 24, 2007 1:58 PM by sterlingdq

Filed under: .NET, Code Snippet, Tasks

Comments

# re: Displaying task results in a table

Thanks Tom. This is great. I look forward to getting into the source code and also to combining this with some custom tasks I am working on.

Wednesday, October 24, 2007 3:46 PM by Randy

# re: Displaying task results in a table

nice work!

Wednesday, October 24, 2007 4:07 PM by jxn

# re: Displaying task results in a table

This looks great!  Thank you so much for your work on this.  Does it require SP3?  I received an error adding it to my toolbar and I suspect that may be why.  Also, I have a field marked as a hyperlink field in my map document.  Does this by chance support hyperlinked fields?

Thanks again!

Thursday, October 25, 2007 6:44 AM by cyndiee

# re: Displaying task results in a table

Yes, it does require SP3. I built it with those assemblies. You should be able to crack open the code and change all the references back to an earlier version and rebuild, but it is likely easier just to apply SP3.

Thursday, October 25, 2007 8:41 AM by Tom Brenneman

# re: Displaying task results in a table

This is very helpful.

I'm trying to build this on ArcGIS Server for Java.

I wanted to use Icefaces or Richfaces fot building a such complex Table.

Unfortanly, I can't get working the combination of Iceface/ArcGIS JSF resp. Richfaces/ArcGIS JSF library.

Has anybody a JAVA solution for this example?

Thanks,

Tom

Saturday, October 27, 2007 9:07 AM by TomLUX

# re: Displaying task results in a table

Where is GridResults_Display.js

I don't see it in the source?

Saturday, October 27, 2007 11:56 AM by vinnymac

# re: Displaying task results in a table

GridResults_Display.js was part of an earlier prototype that I was playing with for resizing the grid inside of a parent window. That approach was abandoned for the current approach which uses the style attribute of the control to enable the scaling and scrolling. I just forgot to take it out of the assembly attributes.

Saturday, October 27, 2007 9:08 PM by Tom Brenneman

# re: Displaying task results in a table

This is a nice tool. Can you tell me how we can link this up to the identify tool and use it for that as well?

Monday, October 29, 2007 10:01 AM by Chris

# re: Displaying task results in a table

Getting the GridResults to work with the Identify tool is a little trickier. The identify tool is a custom tool integrated into the Web Mapping Application template instead of a common task. So we need to modify its code a bit to work with the GridResults. First we need to modify its code file to use ITaskResultsContainer instead of TaskResults (the type for the standard tree-based task results).

In MapIdentify.vb or MapIdentify.cs

[VB]
Change:

Public Property ResultsDisplay() As TaskResults
        Get
            Return m_resultsDisplay
        End Get
        Set(ByVal value As TaskResults)
            m_resultsDisplay = value
        End Set
    End Property

To:

Public Property ResultsDisplay() As ITaskResultsContainer
        Get


            Return m_resultsDisplay
        End Get
        Set(ByVal value As ITaskResultsContainer)
            m_resultsDisplay = value
        End Set
    End Property

[C#]
Change:

public TaskResults ResultsDisplay
    {
        get { return m_resultsDisplay; }
        set { m_resultsDisplay = value; }
    }

To:

public ITaskResultsContainer ResultsDisplay
    {
        get { return m_resultsDisplay; }
        set { m_resultsDisplay = value; }
    }

Then at the the top of MapIdentify.vb or MapIdentify.cs:

[VB]
Change:

Private m_resultsDisplay As TaskResults = Nothing

To:

Private m_resultsDisplay As ITaskResultsContainer = Nothing

[C#]
Change:

private TaskResults m_resultsDisplay = null;

To:

private ITaskResultsContainer m_resultsDisplay = null;

We also need to point the identify class to the grid results on startup of the application. In the code-behind file for the default page, Default.aspx.vb or Default.aspx.cs, at about line 45:

[VB]
Change:

identify.ResultsDisplay = TaskResults1

To:

identify.ResultsDisplay = GridResults1

[C#]
Change:

identify.ResultsDisplay = TaskResults1;

To:

identify.ResultsDisplay = GridResults1;

Now, instead of putting the GridResults control into its own floating panel, replace TaskResults1 with GridResults1 in Default.aspx. Your markup should look like the following.

<esri:FloatingPanel ID="Results" 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="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; height:100%;width:100%; left:0px; top:0px;" Visible="True" Width="400px" Map="Map1" />
</esri:FloatingPanel>

Make sure you don’t change the name of the Results floating panel. The JavaScript for the Identify tool uses that name to open and close the panel. Next you need to modify that JavaScript to get the identify tool add the activity indicator to the correct control.
Change line 30 of display_mapidentify.js from

var fpBody = document.getElementById('Results_TaskResults1');

To

var fpBody = document.getElementById('Results_GridResults1');

Now your identify tool should use the GridResults control for its display. There are other dependencies in display_mapidentify.js on the name of the Results floating panel being named “Results”. So if you use a different name for your results floating panel, make sure to update those references as well.

Tuesday, October 30, 2007 3:02 PM by Tom Brenneman

# re: Displaying task results in a table

add in line 31 of display_mapidentify.js fpBody.innerHTML = ""; So the taskresult will refresh before a new identify. The identify is great. Thanks. But it works only for one resource... Can someone help me to make it working by more resources?

Wednesday, October 31, 2007 2:26 PM by Marco Wagemakers

# re: Displaying task results in a table

Scroll down in the floating panel you should see the other tables with the results from the other resources. The GridResults control adds the tables one after the other for each resource.

Thursday, November 01, 2007 5:44 AM by Tom Brenneman

# PrintTask

Any chance that anyone has modified Bryan Baker's PrintTask to work with this GridResults?

Friday, November 02, 2007 11:16 AM by Randy

# re: Displaying task results in a table

its a good tool. but, I could not see sourcecode writen by VB.

Thursday, November 08, 2007 5:57 PM by mika

# re: Displaying task results in a table

The "Hyperlinking in task results" blog from July shows an example (in C++ though I'm using VB) of how to override the ExecuteTask method to create a hyperlink in the results.  Can this be done with the GridResults Control also?

Friday, November 09, 2007 9:54 AM by cyndiee

# re: Displaying task results in a table

I receive this error message when trying to use the control "Unable to cast object of type 'esri_samples.gridResults' to type 'ESRI.ArcGIS.ADF.Web.UI.WebControls.TaskResults' ..............

Tuesday, November 13, 2007 8:14 AM by Gabriela Voicu

# re: Displaying task results in a table

mika, Sorry I only wrote the code in C#. The control will work with C# and VB.NET code but you can only modify the control using C#. Perhaps an online utility like the following would help. http://labs.developerfusion.co.uk/convert/csharp-to-vb.aspx

Tuesday, November 13, 2007 10:49 AM by Tom Brenneman

# re: Displaying task results in a table

cyndiee, Sorry but the control as it is now, will not display URL's as hyperlinks. The control would have to be modified to look for such string structures and add them to a hyperlink control. The existing framework of using template controls inside of the GridView is the framework that you would use to do this. Look at gridViewTemplates.cs for an example. The only difference is that when you construct the table in addResultsGridToPanel in gridResults.cs you would have to look at the actual column values instead of just the column names.

Tuesday, November 13, 2007 10:55 AM by Tom Brenneman

# re: Displaying task results in a table

Gabriela, You are getting this message because the GridResults control is not a type of TaskResults, it is an implementation of ITaskResultsContainer. TaskResults is a separate implementation of ITaskResultsContainer. The GridResults control does not extend the TaskResults like Rex and my post for the ZoomToResults control http://blogs.esri.com/Dev/blogs/arcgisserver/archive/2007/08/28/Automatically-zooming-to-task-results.aspx. All of the standard tasks interact with the results control via the ITaskResultsContainer interface so both controls should work fine for all out-of-the-box ADF tasks controls. The identify tool is a little different in that it looks for a TaskResults type which is what lead to my response above on October 30th. Custom tasks may also be looking for a TaskResults type but these should be easy to change to ITaskResultsContainer.

Tuesday, November 13, 2007 11:06 AM by Tom Brenneman

# Identify on more that one layer

Tom, I followed your suggestions for identify: when in the results I have more than one layer I can see the results but column order doesn't work any more.

Wednesday, November 14, 2007 8:37 AM by Michael

# re: Displaying task results in a table

Michael,

Yes it looks like my code doesn't do sorting well when there are multiple table results.  Currently the control just tracks column and sort order but it should store a collection of objects with info for how each table should be sorted.  I'm not sure if I will have time to fix this but if you want to tackle it yourself RefreshGrid in gridresults.cs is a good place to start.  If I get a chance to fix it, I'll repost.

Wednesday, November 14, 2007 10:46 AM by tbrenneman@esri.com

# re: Displaying task results in a table

Cyndiee, I was able to add a hyperlink to the gridview if I added the link to the result dataset in the Overrides Execute Task of a custom task by using code similar to this below:

For Each DataRow As System.Data.DataRow In ds.Tables(0).Rows
                strValue = DataRow("SampleColumn")
                strLink = "<a target='_blank' href='http://www.google.com/search?q=" & strValue & "'>"  & strValue & "</a>"
                DataRow("SampleColumn") = strLink
            Next

Thursday, November 15, 2007 8:07 PM by Randy

# re: Displaying task results in a table

I get an error "An unhandled exception has occurred: Object reference not set to an instance of an object" when I try to zoom or pan to any of the results in the table. Everything else works great. Any help would be great. Thanks

Monday, November 19, 2007 10:18 AM by Aaron Mielke

# re: Displaying task results in a table

This is a very nice tool. Now in my programming i've got a datatable, System.Data.DataTable datatable Can you tell me how we can link this up to the tool and use it for that as well?

Tuesday, November 20, 2007 2:06 AM by d y

# re: Displaying task results in a table

Is it possible to use this with the Common Select and Buffer Tool?

Tuesday, November 20, 2007 8:42 AM by Mike Bialousz

# re: Displaying task results in a table

I've got the same error as Aaron. Any ideas?

Tuesday, November 20, 2007 8:49 AM by Rocky

# DataTable to Gridresults

You need to add the table to a Dataset, then send the dataset to the DisplayResults function of ITaskResultsContainer. Here is the code:

     System.Data.DataTable datatable = qfunc.Query(null, lids[layer_index], queryfilter);
        DataSet ds = new DataSet();
        ITaskResultsContainer tskRC = GridResults1;

        if (datatable.Rows.Count > 0)
        {
            ds.Tables.Add(datatable);
            tskRC.DisplayResults(null, null, null, ds);
        }
        else
        {
            string heading = "No results found";
            string detail = "No results found";
            SimpleTaskResult str = new SimpleTaskResult(heading, detail);
            tskRC.DisplayResults(null, null, null, str);
        }

Tuesday, November 20, 2007 9:49 AM by Trent Tinker

# re: Displaying task results in a table

Is there a way to adjust what fields display in the gridresults?  I don't need them all.

Tuesday, November 20, 2007 12:20 PM by TToutant

# Limiting Fields

TToutant,

You can limit the number of fields a couple of ways. If you're not coding, use the mxd by going into the layer properties and choosing the fields that should be visible. Or, using .NET you can list the fields you'd like to return:

string list = "Field1,Field2,Field3";

       String[] flds = list.Split(',');

       ESRI.ArcGIS.ADF.StringCollection scoll = new ESRI.ArcGIS.ADF.StringCollection(flds);

       queryfilter.SubFields = scoll;

Tuesday, November 20, 2007 9:28 PM by Tink0519

# re: Displaying task results in a table

Is there a way to change the field names? I have a join in my mxd, so the field names are really long.

Tuesday, November 20, 2007 9:30 PM by Tink0519

# re: Displaying task results in a table

You need to add the table to a Dataset, then send the dataset to the DisplayResults function of ITaskResultsContainer. Here is the code:

    System.Data.DataTable datatable = qfunc.Query(null, lids[layer_index], queryfilter);

       DataSet ds = new DataSet();

       ITaskResultsContainer tskRC = GridResults1;

       if (datatable.Rows.Count > 0)

       {

           ds.Tables.Add(datatable);

           tskRC.DisplayResults(null, null, null, ds);

       }

       else

       {

           string heading = "No results found";

           string detail = "No results found";

           SimpleTaskResult str = new SimpleTaskResult(heading, detail);

           tskRC.DisplayResults(null, null, null, str);

       }

I'm trying to use this code to display the dataset to the gridviewResults but getting the following error.

No parameterless constructor defined for this object.

It works fine with the identify tool but doesn't work for the query.

Monday, November 26, 2007 11:19 AM by Nipa Parikh

# re: Displaying task results in a table

I like the menu. How did you get the drop