How to Use the WFGridView Control in an AgilePoint ASP.NET Application?

Summary

AgilePoint Developer contains the WFGridView control which functions exactly the same as the Microsoft ASP.NET GridView control. The GridView control is a frequently used control in the ASP.NET control toolkit for tabular data presentation.

For more information, see AgilePoint Web Controls

You can use the WFGridView control in an AgilePoint ASP.NET application, which integrates with an AgilePoint process model. Similar to the other AgilePoint developer controls, the WFGridView control has a BindingName property to map process model schema to the control.

To use the WFGridView control in an AgilePoint ASP.NET application, do the following.

Prerequisites

• A simple generic process with repeating schema:

  1. Design a generic process that includes two manual activities: Submit and Review.
  2. Create the schema. For example, create a schema node of Complex Type named People, and then create the following nodes under the People node.

     Node Name	Node Type
     Person	Complex Type
     PhoneNumber	Element

  3. Edit the Person schema node for the minOccurs and maxOccurs attributes to make the XML nodes repeating:

     <xs:element minOccurs="0" maxOccurs="unbounded" name="Person">

     In this example, maxOccurs="unbounded" indicates the infinite number of repeating rows.

  4. Create the Name, Address, and DOB schema nodes under the Person node.

     Node Name	Data Type
     Name	String
     Address	String
     DOB	DateTime

  5. Save and publish the process model to use the WFGridView control on the ASP.NET forms.

Navigation

1. In Microsoft Visual Studio, click New > Web Site.

Instructions

1. Create an AgilePoint ASP.NET website using the AgilePoint Web Application project template.

   Ensure that the template creates the Submit.aspx and Review.aspx pages.

2. To allow users to add rows to a grid, open the Submit.aspx page in design view, and then drag the WFGridView control from the toolbox onto the page:
   1. Select the WFGridView control, and then set the ID property to grdPeople.
3. Click the BindingName property to open the Select XPath from Attributes Window.
4. Under the Schema tab, select the People node from the schema tree to generate the following code:

   <ap:WFGridView ID="grdPeople" runat="server" AutoGenerateColumns="False" BindingName="/pd:myFields/pd:People" EnableModelValidation="True" 
                               InnerXmlTemplate="PHBkOlBlcnNvbiB4bWxuczpwZD0iaHR0cDovL3d3dy5hc2NlbnRuLmNvbS9icG0vWE1MU2NoZW1hIj48cGQ6TmFtZT5TdHJpbmc8L3BkOk5hbWU+PHBkOkFkZHJlc3M+U3RyaW5nPC9wZDpBZGRyZXNzPjxwZDpET0I+U3RyaW5nPC9wZDpET0I+PC9wZDpQZXJzb24+">
      <Columns>
              <asp:BoundField DataField="pd:Name" HeaderText="Name" />
              <asp:BoundField DataField="pd:Address" HeaderText="Address" />
              <asp:BoundField DataField="pd:DOB" HeaderText="DOB" />
      </Columns>
   </ap:WFGridView>

5. Set the AutoGenerateEditButton and AutoGenerateDeleteButton property to True to allow users to edit or delete the records.
6. Add a button below the WFGridView control, and then name it as Add to allow users to add a new person record in the grid view.
7. Open Submit.aspx.cs and add the following code using directives.

   using System.Collections.Generic;
   using System.Xml;
   using System.IO;

8. To allow users to enter a new person record at the time of web page display, add the following code in the Page_Load event method in the Submit.aspx.cs.

   This step is required only if the control is used on a web form, which starts the AgilePoint process.

   if (!IsPostBack)
      {
         string peopleXML = "<pd:People 
                  xmlns:pd=\"http://www.ascentn.com/bpm/XMLSchema\"></pd:People>";
         XmlTextReader xmlReader = new XmlTextReader(new StringReader(peopleXML));
         XmlDocument xmlDocument = new XmlDocument();
         XmlNode node = xmlDocument.ReadNode(xmlReader);
         grdPeople.SetBoundDataItem(node);
      } 

9. When a user clicks the Add button, it must create an empty row in the WFGridView control, so that the user can add a new person record. Double-click the Add button to generate the button click event method. Write the following code in the Add button click event method.

   DataTable dt = grdPeople.RepeatingSectionDataSource;
   
   if (dt != null)
   {
   DataRow child = dt.NewRow();
   
   child[0] = "updates";
   child["pd:Name"] = "";
   child["pd:Address"] = "";
   child["pd:DOB"] = "";
   
   dt.Rows.Add(child);
   
   grdPeople.RepeatingSectionDataSource = dt;
   grdPeople.BindRepeatingSectionDataSoure();
   } 

   Note: In this example, the WFGridView control is not using the DataSource property and the DataBind method to bind to the data source. Instead it is using the AgilePoint custom property RepeatingSectionDataSource and the custom method BindRepeatingSectionDataSource. Also, while creating a new row in the data table, it is loading existing data source, RepeatingSectionDataSource, to get the schema template for the new record.
10. On the Review step, the grid must be displayed as read only to allow users to review the records added at the Submit step. Open the Review.aspx page in design view, and then follow the steps 4-5.
11. Complete the other steps required to create the AgilePoint ASP.NET website.