Returning the indexes of selected rows in a data table

JSF provides the ability to include a "selection column" of check boxes in a data table. With this column of check boxes, you can select one or more rows in the table to perform a particular action on. For example, you might select several rows for deletion.

You can set a specific arrangement of properties on an array of records to indicate that the array should be displayed on a web page with a selection column. Then the user can select one or more of the check boxes. EGL indicates which rows were selected by returning an array of integers that represent the indexes of the selected rows. For example, if the check boxes for the first, third, and fourth rows in the data table are selected, EGL sets the array of integers to [1,3,4]. EGL automatically converts 0-based JSF arrays to 1-based EGL arrays.

In this way, to be able to select multiple rows in a JSF data table, you need two arrays:
This task has the following prerequisites:
Follow these steps to set up a data table with a multiple selection column. This example displays a list of customers and their total purchases and enables you to select one or more rows to add together:
  1. In the JSF Handler for an EGL-controlled web page, create an array of records to represent the table of data you want shown on the page:
    purchaseList customerPurchase[3];
    This example uses the following sample Record part:
    record customerPurchase type BasicRecord
        custName        string;
        totalPurchases  decimal(10,2);
    end
  2. Retrieve data to populate this array with the data that you want the user to select on the page. The example later in this topic will assign literal values to the array, but you can retrieve the data from a database or populate the array in any other way. You might want to put this retrieval logic in the function specified in the onPreRenderFunction property of the JSF Handler.
  3. Create the array of integers that will hold the indexes of the selected records:
    allSelectedRows  int[0];
  4. For the record variable, set the selectedRowItem property to the name of the array that will hold the indexes of the selected records:
    purchaseList customerPurchase[3]
       {selectedRowItem = allSelectedRows};
  5. On the web page, drag the array of records from the Page Data view onto the page. The Insert List Control window opens.
  6. In the Insert List Control, select a radio button under Create controls for. If you want read-only output controls, select Displaying an existing record. If you want editable input controls, select Updating an existing record.
  7. Click Finish. The records are displayed on the page as a JSF data table.

    This table includes a small, unlabeled column that contains check box elements. If you click the check box control to select it and go to the Properties view, you can see that this check box is bound not to any fields in the record variable but to the integer array that you defined to hold the indexes of the selected rows.

Now the integer array will hold the row numbers of the rows that are selected on the web page. You can define a function to process the selected records when a user clicks a button on the page, for example:

For example, this JSF Handler uses a selection column in this way:

handler multiSelectPage type JSFHandler
   {onPreRenderFunction = onPreRender,
    view = "multiSelectPage.jsp"}

    //Array of customer records and their purchase amount
    purchaseList  customerPurchase[3]
       {selectedRowItem = allSelectedRows};

    //indexes of the selected rows
    allSelectedRows  int[0];

    //Sum of selected purchases
    purchaseSum   decimal(10,2);

    function onPreRender()
        //initialize the array of customers
        purchaseList[1].custName = "Company A";
        purchaseList[1].totalPurchases = "500.23";
        purchaseList[2].custName = "Company B";
        purchaseList[2].totalPurchases = "232.55";
        purchaseList[3].custName = "Company C";
        purchaseList[3].totalPurchases = "499.12";
    end

    function sumRows()
        purchaseSum = 0;
        counter int = 0;
        customerIndexToAdd int;
        for (counter from 1 to allSelectedRows.getSize() by 1)
            customerIndexToAdd = allSelectedRows[counter];
            purchaseSum += purchaseList[customerIndexToAdd].totalPurchases;
        end
    end

end

record customerPurchase type BasicRecord
    custName        string;
    totalPurchases  decimal(10,2);
end
This example assumes that you have dragged the purchaseList array onto the page to make a JSF data table and that you have bound the sumRows function and purchaseSum variable to a command button and output control on the web page, respectively.

Feedback