TableView

[Former Member]

Hi,

I have a TableView with 20 rows in JSP, Portal Application. Since at a time only 5 rows can be displayed, I have 4 pages (visibleRowCount="5").

I have 4 Editable Columns in these rows. These Editable fields at any given time may have values which I edit.

Since I use MultiSelect I click on the checkbox for the rows I have edited.

My issues are the following:

- Is there any way to select row 2 on Page1, row 7 on Page2, Row 13 on Page3 and Row 18 on Page4. When I click submit button would I be able to find all the rows I have selected.

- The aim here is to find the fields/rows edited.

If any one has faced a similar issue I would greatly appreciate if one could put me in the right direction.

<hbj:tableView

id="Plant_TableView"

model="myBean.PlantModel"

design="ALTERNATING"

headerVisible="true"

footerVisible="true"

fillUpEmptyRows="true"

navigationMode="BYPAGE"

selectionMode="MULTISELECT"

headerText=""

onNavigate = "onNavigation"

visibleFirstRow="<%= myBean.getvisibleFirstRow() %>"

visibleRowCount="5"

rowCount="5"

width="500" >

Thank you.

NAC

[Former Member]

Hi Prakash,

When I set the column type as button as you have said, the value is not coming in a button rather it is a simple Text. Is there anything that has to be done. The table is getting displayed with 4th column as simple text for which I am trying to insert a button.

In your eg,

In the Bean class

Object[] colTitle = {"Model", "Mileage", "Info", "Button"};
    Object[][] data = {
      {"Mercedes", "2250", "", "OK"},
      {"Chrysler", "12500", "", "OK"},
      {"Ford", "11500", "", "OK"},
      {"BMW", "41000", "", "OK"},
      {"Porsche", "11000", "", "OK"},
      {"Cadillac", "25000", "", "OK"},
      {"Chevrolet", "35000", "", "OK"}
    };

// new model with the data
    model = new DefaultTableViewModel(data, colTitle);
 
// get the columns of the table

    TableColumn columnD = model.getColumnAt(4);


 
    columnD.setType(TableColumnType.BUTTON);
    columnD.setOnItemClick("submit");

Thanks,

Pavithra

[Former Member]

Hi NAC,

I would recommend you to look at some of the examples in PDK about tableview. I am pasting an example that has everything that you need.

JSP Page

<%--- TableView2.jsp --%>
<%@ page import="example.TableView2CellRenderer"%>
<%@ taglib uri="tagLib" prefix="hbj" %>

<jsp:useBean id="myTableViewBean" scope="application" class="bean.TableView2Bean"></jsp:useBean>

<hbj:content id="myContext" >

  <hbj:page title="tableView Example - Part 2" >

        <hbj:textView encode="false" design="HEADER1" text="tableView example - Part 2<br><br><p> </p>" />

        <hbj:form>
  <%--- <b>Setting up the tableView. The visibleFirstRow attribute is set from the bean. The value </b> --%>
  <%--- <b>for visibleFirstRow is set by the onNavigate event which sets the first visible row after each navigation click</b> --%>
          <hbj:tableView  id="myTableView"
                          model= "myTableViewBean.model"
                          design = "ALTERNATING"
                          headerVisible = "true"
                          footerVisible = "true"
                          fillUpEmptyRows = "true"
                          selectionMode = "MULTISELECT"
                          navigationMode = "BYLINE"
                          headerText = "<h3>tableView</h3>"
                          visibleFirstRow = "<%= myTableViewBean.getVisibleRow() %>"
                          visibleRowCount = "4"
                          onNavigate="onNavigate" >
                          <%---                      useRowSelection sets the checked rows of the table view stored in the bean --%>
                          <%---                      in this table view. So the checked rows are not lost                       --%>
                          <%--- <b>Important call!!! With the call setUserTypeCellRenderer we set the renderer class which      --%>
                          <%---                      renders the cells of type USER</b>                                         --%>
                          <%
                             myTableView.setOnHeaderClick("onHeaderClick");
                             myTableView.setOnRowSelection("onRowSelection");
                             myTableView.useRowSelection(myTableViewBean.getOldTableView());
                             myTableView.setUserTypeCellRenderer(new TableView2CellRenderer()); %>

          </hbj:tableView>
          <hbj:textView encode="false" text="<br><br>" />
  <%--- <b>Text output to show the result of the event</b> --%>
          <hbj:textView encode="false" text="<%= myTableViewBean.getText() %>" />
          <hbj:textView encode="false" text="<%= myTableViewBean.getSelectedRowString() %>" />
    </hbj:form>

  </hbj:page>

</hbj:content>

JspDynpage Code

package example;

import bean.TableView2Bean;
import com.sapportals.htmlb.event.Event;
import com.sapportals.htmlb.event.TableNavigationEvent;
import com.sapportals.htmlb.page.DynPage;
import com.sapportals.htmlb.page.PageException;
import com.sapportals.htmlb.rendering.IPageContext;
import com.sapportals.htmlb.table.TableView;
import com.sapportals.htmlb.type.AbstractDataType;
import com.sapportals.portal.htmlb.page.JSPDynPage;
import com.sapportals.portal.htmlb.page.PageProcessorComponent;
import com.sapportals.portal.prt.component.IPortalComponentContext;
import com.sapportals.portal.prt.component.IPortalComponentRequest;

/**
 * Title:        TableView Example 2
 * Description:  In this second example for TableView we want to show you how
 * to use other components inside a table.
 * Copyright:    Copyright (c) 2003
 *
 * @author Siegfried Gmachl
 * @version 1.0
 */

public class TableView2 extends PageProcessorComponent {

  public DynPage getPage() {
    return new MyDynPage();
  }

  public class MyDynPage extends JSPDynPage {

    public TableView2Bean beantv2;
    public TableView table;
    public IPageContext context;
    private int visibleRow = 1;
    private int RowCount;
    private int loopcount;
    private String sel;
    private IPortalComponentRequest request;
    private IPortalComponentContext compcontext;


    public void doInitialization() {
      IPortalComponentRequest request = (IPortalComponentRequest) this.getRequest();
      IPortalComponentContext compcontext = request.getComponentContext();
      beantv2 = new TableView2Bean();
      compcontext.putValue("myTableViewBean", beantv2);
    }

    public void doProcessAfterInput() throws PageException {
// Get the bean Object
      request = (IPortalComponentRequest) this.getRequest();
      compcontext = request.getComponentContext();
      beantv2 = (TableView2Bean) compcontext.getValue("myTableViewBean");
      context = this.getPageContext();

// get the selected row / rows
/// We get the tableView by getComponentByName
      table = (TableView) this.getComponentByName("myTableView");

// Get the first visible row
      int firstVisibleRow = table.getVisibleFirstRow();

// Get the last visible row
      int lastVisibleRow = table.getVisibleLastRow();

// which of the visible rows was selected
      StringBuffer strBuff = new StringBuffer();
      strBuff.append("Selected row(s): ");
      for (int i = firstVisibleRow; i <= lastVisibleRow; i++) {
        if (table.isRowSelected(i)) {

// The visible rows are displayed as textView under the tableView in the JSP
          strBuff.append(i + "  ");
        }
      }

// Set text string that shows selected rows in bean
      beantv2.setSelectedRowString(strBuff.toString());

// Save table to restore the checked rows using the useRowSelection method in the JSP
      beantv2.setOldTableView(table);
    }


// Called everytime. Calls the JSP
    public void doProcessBeforeOutput() throws PageException {
      this.setJspName("tableview2.jsp");
    }

// Called when the user clicks in a cell of the tableView. Part 1 shows how to
/// find out the cell position in which the user clicked
    public void onCellClick(Event event) {
      System.out.println("cellclick");
    }

// Called when the user clicks on the header of the tableView. Part 1 shows how to
/// find out the column in which the user clicked
    public void onHeaderClick(Event event) {
      System.out.println("headerclick");
    }

    public void onNavigate(Event event) {
// get the event
      TableNavigationEvent tne = (TableNavigationEvent) event;

// With the event we can use method getFirstVisibleRowAfter(); which gives
/// us the actual position (after the event)
      this.visibleRow = tne.getFirstVisibleRowAfter();

// In the JSP we use the visibleRow from the bean to set the visibleFirstRow attribute

// we need the page context to access the tableView. beantv2 has already been set by the doProcessAfterInput method

      if (beantv2 != null) { // just for the first time, when there is no bean
/// set the new visibleRow
        beantv2.setVisibleRow(new Integer(this.visibleRow).toString());
      }
// get the tableView and update the tableView
      updateTableContent(table.getVisibleFirstRow(), table.getVisibleLastRow());
    }

    public void onRowSelection(Event event) {
      System.out.println("rowselection");
    }

// the event is fired when the OK buttons or Submit button is clicked
    public void onSubmit(Event event) {

      System.out.println("EVENT: " + event.toString());
      System.out.println("Visible rows + columns: " + table.getVisibleFirstRow() + " : " + table.getVisibleLastRow());
// the table delivers the 1st visible row and the number of rows.
/// the for loop collects the values in the table fields and stores it in the model
      updateTableContent(table.getVisibleFirstRow(), table.getVisibleLastRow());
    }


// This method scans thru the rows and collects the data and stores it in the model
    public void updateTableContent(int firstrow, int lastrow) {

      sel = "Field contents: <br>";

      int lastrow_model = lastrow;
// The last number of the last visible row can be higher than the rows in the model.
/// To avoid an exeception we check the number and in case it is higher we set it to
/// the maximum number in the model (getRowCount).
      if (lastrow_model > beantv2.getModel().getRowCount()) {
        lastrow_model = beantv2.getModel().getRowCount();
      }

      loopcount = 0;
      for (int i = firstrow; i <= lastrow_model; i++) {

// Note: The rows we retrieve are always the "visible" rows. So the index of the visible rows is in our example
///       between 1 and 4 (tableView has 4 visible rows). We use loopcount to address the visible rows
        loopcount = loopcount + 1;

// to use getDataForComponentId you need the name of column - it is the title of the column
        AbstractDataType data_box = context.getDataForComponentId("myTableView", "myBox1", loopcount);

// We check if data_box has a value to avoid null pointer exception
        if (data_box != null)
// set value with row and column parameters, row is the loop index, 1=column 1
        {
          beantv2.getModel().setValueAt(data_box, i, 1);
          sel = sel + " Model: " + data_box.toString();
        }

        AbstractDataType data_mil = context.getDataForComponentId("myTableView", "Mileage", loopcount);
        if (data_mil != null)
// set value with row and column parameters, row is the loop index, 2=column 2
        {
          beantv2.getModel().setValueAt(data_mil, i, 2);
          sel = sel + " Mileage: " + data_mil.toString();
        }

// this is a user rendered cell. Here you have to use as columnname the one you used in the cellrenderer
/// see (tableview2cellrenderer) and NOT the title
        AbstractDataType data_inf = context.getDataForComponentId("myTableView", "myInfoField", loopcount);
        if (data_inf != null)
// set value with row and column parameters, row is the loop index, 3=column 3
        {
          beantv2.getModel().setValueAt(data_inf, i, 3);
          sel = sel + " info: " + data_inf.toString();
        }

// Attention: If the cell is type USER it is rendered by the user cell renderer. The cell renderer would reset
/// the cell to the initial state. Therefore you have to supply the cell at the cell renderer.
/// See TableView2CellRenderer were we supply the cell again.


// This is to create a textView output.
        sel = sel + "<br>";
      }
      beantv2.setText(sel);
    }
  }


}

The bean (Model)

package bean;

import com.sapportals.htmlb.enum.TableColumnType;
import com.sapportals.htmlb.table.DefaultTableViewModel;
import com.sapportals.htmlb.table.TableColumn;
import com.sapportals.htmlb.table.TableView;
import com.sapportals.htmlb.table.TableViewModel;


public class TableView2Bean {

// Properties
  private DefaultTableViewModel model;
  private TableView oldTableView;
  private String text;
  private int selectedRows[];
  private String selectedRowString;
  private String visibleRow = "1";

// get/set tableview - this is to restore the checked rows
  public TableView getOldTableView() {
    return this.oldTableView;
  }

  public void setOldTableView(TableView table) {
    this.oldTableView = table;
  }

// get/setModel
  public TableViewModel getModel() {
    return this.model;
  }

  public void setModel(DefaultTableViewModel model) {
    this.model = model;
  }

// get/setText
  public String getText() {
    return this.text;
  }

  public void setText(String text) {
    this.text = text;
  }

// get/setVisibleRow
  public String getVisibleRow() {
    return this.visibleRow;
  }

  public void setVisibleRow(String visibleRow) {
    this.visibleRow = visibleRow;
  }

// get/setSelectedRows as string to use in the JSP for message
  public String getSelectedRowString() {
    return this.selectedRowString;
  }

  public void setSelectedRowString(String selectedRows) {
    this.selectedRowString = selectedRows;
  }

  /**
   * Default constructor
   * This constructor is responsible generating the data model for the table.
   * In this example there are other htmlb elements inside the table cells.
   * Therefore we need to render them specifically.
   * When the type is set to USER you can create your own cell renderer.
   * You find the cell renderer in TableView2CellRenderer.java
   */
  public TableView2Bean() {

// data for title and cells as arrays
/// By default the title also defines the column name - we use both methods to create a
/// proper title and a column name that is better to work with. You should omit
/// blanks or other special characters in the column name.
/// The column name is important later (Part 2) to retrieve data from the tableView
/// "Model" and "Mileage" is our title and column name. The title for "Info" we alter later on
    Object[] colTitle = {"Model", "Mileage", "Info", "Button"};
    Object[][] data = {
      {"Mercedes", "2250", "", "OK"},
      {"Chrysler", "12500", "", "OK"},
      {"Ford", "11500", "", "OK"},
      {"BMW", "41000", "", "OK"},
      {"Porsche", "11000", "", "OK"},
      {"Cadillac", "25000", "", "OK"},
      {"Chevrolet", "35000", "", "OK"}
    };

// new model with the data
    model = new DefaultTableViewModel(data, colTitle);

// get the columns of the table
    TableColumn columnA = model.getColumnAt(1);
    TableColumn columnB = model.getColumnAt(2);
    TableColumn columnC = model.getColumnAt(3);
    TableColumn columnD = model.getColumnAt(4);

    /** Specify the type of each column.
     *  Here are the information what to render. By default it is TEXT. You do
     *  not have to do anything if you want to use this kind of type. If you
     *  choose the type user, you have to render it by yourself.
     */
    columnA.setType(TableColumnType.USER);

    columnB.setType(TableColumnType.INPUT);
    columnB.setWidth("50 px");

    columnC.setType(TableColumnType.USER);
// Define title for the "Info" column
    columnC.setTitle("Next workshop appointment/Info");

    columnD.setType(TableColumnType.BUTTON);
    columnD.setOnItemClick("submit");
  }

}

Message was edited by: Prakash Singh