WFGridView Example

The goal of this article is to show you the example of using WFGridView control, which is not included in the AgilePoint User Guide. For other details, please refer to the AgilePoint User Guide. WFGridView is a control to handle repeating data. The repeating data is stored in a tree of repeating nodes in the form of XML.

1. In Envision, define the repeating nodes structure in the XML schema of the process model. In this example, it is the Items hive. Each Item has childnodes for Name, Price and Quantity (Qty). See picture below for the repeating node structure. It is assumed that the process model is located under the Process Template folder of your ASP.NET project at this point. Save and close Envision.
   • 
2. The newly added repeating nodes structure is now reflected in the schema.xsd
   • 
3. In your ASPX page, drag and drop the WFGridView control to the location desired in the page.
4. Configure the BindingName property of the WFGridView control by selecting the root node the the repeating nodes hive. In this example, it is "pd:FoodOrder/pd:Items" (Not "pd:FoodOrder/pd:Items/pd:Item").
   • 
5. Also, add another button for inserting new rows to the WFGridView control. It is called btnAddRow with the display text as "Add Items" in this example.
6. Implement below codes in the button click event for btnAddRow.

   protected void btnAddRow_Click(object sender, EventArgs e)
   {
       DataTable dt = this.WFGridView1.RepeatingSectionDataSource;
       DataRow dr = dt.NewRow();
       dr[0] = "Updated";
       dr["pd:Name"] = "Enter Name Here";
       dr["pd:Qty"] = "";
       dr["pd:Price"] = "";
       dt.Rows.InsertAt(dr, 0);
       this.WFGridView1.RepeatingSectionDataSource = dt;
       this.WFGridView1.EditIndex = 0;
       this.WFGridView1.BindRepeatingSectionDataSoure();
   }

7. Here is the example of the HTML code for the WFGridView:

                <tr style="height:100%">
                    <td style="width: 366px">
                        <ap:WFGridView ID="WFGridView1" runat="server" AutoGenerateColumns="False" AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" BindingName="/pd:FoodOrder/pd:Items" InnerXmlTemplate="PHBkOkl0ZW0geG1sbnM6cGQ9Imh0dHA6Ly93d3cuYXNjZW50bi5jb20vYnBtL1hNTFNjaGVtYSI+PHBkOk5hbWU+U3RyaW5nPC9wZDpOYW1lPjxwZDpRdHk+RGVjaW1hbDwvcGQ6UXR5PjxwZDpQcmljZT5TdHJpbmc8L3BkOlByaWNlPjwvcGQ6SXRlbT4=" ShowFooter="True" >
                            <Columns>
                                <asp:BoundField DataField="pd:Name" HeaderText="Name" />
                                <asp:BoundField DataField="pd:Qty" HeaderText="Qty" />
                                <asp:BoundField DataField="pd:Price" HeaderText="Price" />
                            </Columns>
                        </ap:WFGridView>
                        <asp:Button ID="btnAddRow" runat="server" OnClick="btnAddRow_Click" Text="Add Item" /></td>

                </tr>

Download the sample source code here.