2 Replies Latest reply: Mar 9, 2009 11:07 AM by Pavithra Viswanathan RSS

TableView

SAP Partner
Currently Being Moderated

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

  • Re: TableView
    Prakash Singh
    Currently Being Moderated

    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

     

     

  • Re: TableView
    Pavithra Viswanathan
    Currently Being Moderated

    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

Actions