Skip to Content
author's profile photo Former Member
Former Member

How to add a drop down list box to a table view ????

Hi,

I am working with table view and would like to add a Drop Down list box to my table view could and I am trying to use the .USER option but I dont know where to put the data for the Table view, also if you guys could tell me how capture data from the Table View when the page is being sent to the server it would be great.

It would also be nice if someonne can tell me how to update a table view fom the Client Side, I really need some help i am working on it for a long time and i cant figure it out.

Thanks,

Emmanuel.

Add a comment
10|10000 characters needed characters exceeded

Related questions

1 Answer

  • author's profile photo Former Member
    Former Member
    Posted on Jan 18, 2005 at 09:46 AM

    Hi Emmanuel,

    first I would like to tell you that there is a good HTMLB documentation here on SDN. Unfortunetly I could find it right now, but I think Detlef Beutner or Oliver Stiefbold know where to find it.

    second: In order to add a ddlb (dropdown list box) to a table view (I guess you would like to at it to a cell) you have to implement a TableCellRenderer for this cell. But that's not a big effort.

    Imagine that you build the table like that:

    DefaultTableViewModel defaultTableViewModel = new DefaultTableViewModel(this.data,this.header);

    TableView tableView = new TableView(this.id,defaultTableViewModel);

    tableView.setCellRenderer(new TableViewCellRenderer());

    //...go on with tableview creation

    public class TableCellRenderer implements ICellRenderer

    {

    public TableCellRenderer()

    {

    super();

    }

    //

    // own cell renderer

    //

    public void renderCell( int pRow,

    int pColumn,

    TableView pTableView,

    IPageContext pRendererContext )

    {

    if( pColumn==<your column number where the ddlb should be>)

    {

    // that's the value you put in the data vector or object[][] of the

    // DefaultTableViewModel contructor (e.g. your list for the ddlb)

    // without 'toString()' you'll get a AbstractDataType

    String value = pTableView.getValueAt(pRow,pColumn).toString();

    // create your ddlb like you wish

    DropdownListBox listBox = new DropdownListBox(id);

    listBox.setJsObjectNeeded(true); // in order to have access on client side

    listBox.setEnabled(true);

    listBox.setTooltip(tooltip);

    //TODO: loop over your list for the ddlb and fill it

    // e.g. like this

    Enumeration enum = this.listEntries.keys();

    while( enum.hasMoreElements() )

    {

    String nextKey = (String)enum.nextElement();

    String nextValue = (String) this.listEntries.get(nextKey);

    listBox.addItem(nextKey,nextValue);

    }

    listBox.render(pRendererContext);

    }

    // all other columns are delegated to the default cell renderer

    else

    {

    DefaultCellRenderer defaultRenderer = new DefaultCellRenderer();

    defaultRenderer.renderCell(pRow,pColumn,pTableView,pRendererContext);

    }

    }

    }

    Now in order to 'capture data from the Table View when the page is being sent to the server ' you can do it like the following:

    get the control: TableView table = (TableView) pageCtx.getComponentForId(tableId);

    get necessary information, like selected rows of first row (after navigation):

    this.firstRow = table.getVisibleFirstRow();

    if(table.getSelectionMode.equals(TableSelectionMode.SINGLESELECT)

    {

    this.selectedRow = getSelectedRow( table );

    // only if you defined a key column for your TableView control

    this.selectedRowKeys = new String[1];

    this.selectedRowKeys[0] = table.getRowKey(this.selectedRow);

    }

    else

    {

    this.selectedRowKeys = getSelectedRowKeys( table );

    }

    //

    // use this method to find out which row is selected

    // for tables with SINGLE_SELECT_MODE

    //

    // return the index of the selected row

    //

    private int getSelectedRow( TableView pTable )

    {

    int rows = pTable.getRowCount();

    for( int i=1; i<=rows; i++ )

    {

    if( pTable.isRowSelected(i) )

    {

    return( i );

    }

    }

    return( 0 );

    }

    //

    // use this method to find out which rows are selected

    // for tables with MULTI_SELECT_MODE

    //

    // method returns a String[] with the selected object Ids

    //

    private String[] getSelectedRowKeys( TableView pTable )

    {

    int rows = pTable.getRowCount();

    String[] selectedRowsObjIds = new String[rows];

    int cnt = 0;

    for( int i=1; i<=rows; i++ )

    {

    if( pTable.isRowSelected(i) )

    {

    selectedRowsObjIds[cnt] = pTable.getRowKey(i);

    cnt++;

    }

    }

    //

    // the selectedRows array contains a lot of null values,

    // because initial size was set to table size

    // return only the selected rows counts

    //

    String[] selectedObjIds = new String[cnt];

    int cnt2 = 0;

    for( int j=selectedRowsObjIds.length-1; j >= 0; j-- )

    {

    if( selectedRowsObjIds[j] != null && selectedRowsObjIds[j].length() > 0 )

    {

    selectedObjIds[cnt2] = selectedRowsObjIds[j];

    cnt2++;

    }

    }

    return selectedObjIds;

    }

    You cannot retrieve the data for each cell, but that's not the philosophy in HTMLB. Each time the page is sent back to the server you have to create the page again and retrieve the data for the cell again and fill it up.

    The only thing you have to add is to modify the table according to the 'state' it has been on the client, e.g. sorted on column1, navigated to page 3, and selected row 14.

    Now to the client side. The only thing you can do on client-side is to retrieve the selected rows and get the values from the key column.

    It's not possible to manipulate data. Of course you can render InputFields into table cells and let the user manipulate them, but then you have to retrieve each value for each InputField again on server side (pageContext.getComponentForId(tableCellInputFieldId);).

    Here's the javaScript for the client-side table view API:

    function getSelectedRowKeys()

    {

    var selectedRowKeys = new Array();

    var table = getHtmlbElement( getTableIdForPage() );

    if( table != null )

    {

    selectedRowKeys = table.getSelectedRowKeys(); // tableView client-side API method

    }

    return selectedRowKeys;

    }

    function getHtmlbElement( pElementId )

    {

    var loDocForms = document.forms;

    for( var i=0; i<loDocForms.length; i++ )

    {

    try

    {

    var funcName = loDocForms<i>.id + "_getHtmlbElementId";

    func = window[funcName];

    var element = eval( func(pElementId) );

    if( element != null )

    {

    return element;

    }

    }

    catch( ex )

    {

    }

    }

    }

    Hope this helps. If you have further question, pls. reply. If my answer could help you, please don't forget to give some reward points.

    Thank you and regards,

    Stefan

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.