Scrollbar in a datatable

Hi can anyone please tell me what im doing wrong. Iv been trying to put a scroll bar in my datatable but havent managed it.
Heres my datatable
          <h:panelGrid styleClass="inset_table" rowClasses="verticalAlign" >
                    <h:dataTable
                         cellspacing="2"
                         columnClasses="content_verythin, content_thin, content_normal, content_verywide, content_verythin"
                         styleClass="fillwidth"
                         headerClass="center_heading5"
                         rowClasses="scroll"
                         rows="0"
                         value="#{DeviceEditorBean.interfaces}"
                         binding="#{DeviceEditorBean.interfaceTable}"
                         var="interface">
                         <h:column>
                              <f:facet name="header">
                                   <h:selectBooleanCheckbox
                                        value="#{DeviceEditorBean.allSelected}"
                                        valueChangeListener="#{DeviceEditorBean.selectAll}"
                                        onclick="document.forms['edit_device_form'].submit()"/>
                              </f:facet>
                              <h:selectBooleanCheckbox
                                   value="#{DeviceEditorBean.selected}"
                                   valueChangeListener="#{DeviceEditorBean.selectInterface}"
                                   onclick="document.forms['edit_device_form'].submit()"/>
                         </h:column>
                         
                         <h:column>
                              <h:graphicImage url="#{interface.ifOperStatusImg}"/>
                         </h:column>
                         
                         <h:column>
                              <f:facet name="header">
                                   <h:outputText value="#{devicesBundle.IFINDEX} "/>
                              </f:facet>
                              <h:outputText value="#{interface.ifIndex}"/>
                         </h:column>
                         
                         <h:column>
                              <f:facet name="header">
                                   <h:outputText value="#{devicesBundle.INTERFACE_NAME}"/>
                              </f:facet>
                              <h:outputText value="#{interface.ifDescr}"/>
                         </h:column>
                         
                         <h:column>
                              <f:facet name="header">
                                   <h:outputText value="#{devicesBundle.INTERFACE_RESET}"
                                        title="#{devicesBundle.INTERFACE_RESET_MSG}"/>
                              </f:facet>
                              <h:graphicImage styleClass="icon"
                                   url="/images/controls/true.gif"
                                   rendered="#{interface.resetEnabled}"
                                   title="#{devicesBundle.ENABLED}"/>
                              <h:graphicImage styleClass="icon"
                                   url="/images/controls/false.gif"
                                   rendered="#{interface.resetEnabled==false}"
                                   title="#{devicesBundle.DISABLED}"/>
                         </h:column>
                    </h:dataTable>
</h:panelGrid>And here are the css styles:
.inset_table{
     border-style: inset;
     border-width: 1px;
     width: 100%;
     max-height: 450;
     overflow: auto;
.verticalAlign, .inset_table{
     vertical-align: top;
.fillwidth{
     width: 100%
.center_heading5{
     text-align: center;
     font-weight: normal;
     background-color: #CC9966;
     color: #FFFFFF;
     padding: 0 4pt 0 4pt;
     white-space: nowrap;
     width: 0%;
.scroll {
     overflow: auto;
     width: 100%;
     vertical-align: top;
     margin-top: 0% ;
.content_verythin{
     width: 3%;
     background-color: #FFFFFF;
     padding: 0 4pt 0 4pt;
     vertical-align: top;
     text-align: center;
}there are a few more style in the column classes of the datatable but basically the only difference between them and content_verythin is there widths are increased. Can anyone help me. This list normally gets populated with a lot of items and goes way below the bottom of the screen so i need to get a scrollbar in it.
Cheers
joe.

To my knowledge the RI data table doesn't provide a scroll bar per se . . . it will paginate the results to where you can click on the page number or arrow to move back and forth between pages. To my knowledge you need <div> and <layer> and a bunch of DHTML tricks to actually make a table scroll (while keeping the header in place). It's not easy and must be customized for each page.
The JCreator Studio people demonstrated some fancier dataTable widgets at JavaOne . . . that might be worth a look. MyFaces may also have a more feature-rich dataTable implementation, and I'm sure there are others as well.

Similar Messages

Scrollbar for the datatable

Hello Friends,
I need the scrollbar for datatable.
I would like to explain my pbm with code.
<h:form>
<div style="overflow:auto;width:55%;height:45px;top:235px;left:219px;position:absolute;">
<h:datatable>...</h:datatable>
</div>
</h:form>
The above works fine but if the same is put in a panelgrid I get scrollbar anad table in a different locations and scrollbar doesnt scroll..ie
<h:form>
<h:panelGrid>
<div style="overflow:auto;width:55%;height:45px;top:235px;left:219px;position:absolute;">
<h:datatable>...</h:datatable>
</div></h:panelGrid>
</h:form>
I wanted the datatable with scrollbar to be placed inside a panelgrid...
can anyone help me out to get datatable with scrollbar.
Thanks and Regards,
Sonara.

With all your help I got a scrollbar to work around the datatable just fine. But I got another problem now. Since I have the DIV tag's style's height and width fixed, when the number of rows in my table is less than I expected, I get a blank area below the table in the scroll area. This happens because you hardcode the DIV tag's width and height. Is there any way of avoiding this area that appears. Is a JSF scroll bar custom component my only option?

Need Help with scrollbars

hu..
i have this JFrane that has a table which has scrollbars...
i have included in my code setResizable(false) so the user will not be able to maximize the page..
i have a function AdScroll()[that adds scrollbars] that will be called every time i add ,delete ,update a user ..
my problem is when i click on the delete and update buttons the user will not be deleted or updated from the table, but when i remove AddScroll() the user will be deleted and updated from the table but the scroll bars will not be added..
so can some one help me with this problem.
thankx
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.table.*;
import java.sql.*;
import java.io.*;
import javax.swing.JPanel;
import java.applet.*;
import sun.audio.*;
import java.net.*;
import java.text.*;
class UtilityMethods extends JFrame implements ActionListener
private boolean tabsVisible=false;
private File fileName;
private RandomAccessFile output;
AudioStream voice;
UtilityMethods utilities;
Connection conn;
Statement stat;
String dsnName, userStatus;
String appTable = "CUSTOMER";
Container c = getContentPane();
   JTabbedPane tabs;
    //JScrollPane scrollpane;
JTable dataTable, addataTable;
static String[][] tableData, adtableData;
JScrollPane scrollpane, adscrollpane,vscrollpane;
JTextField id, name, address, phone, sex, dob, photo,audio,template;
JTextArea comments;
JButton search, update, clear, add, delete, close,audio1,faceBrowse,voiceBrowse,voice1;
JPanel customerPanel, adminPanel;
JPanel backPanel, inputPanel, middlePanel, buttonPanel1, buttonPanel2, photoHolder;
JTextField adname, adusername, adpassword;
JPanel adbackPanel, adinputPanel, admiddlePanel, adbuttonPanel1, adbuttonPanel2, radioPanel;
JButton adsearch, adupdate, adclear, adadd, addelete, adclose;
JRadioButton userStat, adminStat, cleared;
ButtonGroup statusGroup;
//===================================================================================================
/*public UtilityMethods()
    makeGUI();
//Create the GUI:
void makeGUI()
    c.setLayout(new BorderLayout());
    tabs = new JTabbedPane();
    customerPanel = new JPanel(new BorderLayout());
    adminPanel = new JPanel(new BorderLayout());
//    voicePanel= new JPanel(new BorderLayout());
    //1. Construct customers tab:
      //The data input section:
    inputPanel      = new JPanel(new GridLayout(4, 4));
     id = new JTextField(20);
             name = new JTextField(20);
             address = new JTextField(20);
             phone = new JTextField(20);
             sex = new JTextField(20);
             dob = new JTextField(20);
             photo = new JTextField(20);
             audio = new JTextField(20);
             template = new JTextField(20);
             faceBrowse = new JButton("...");
             faceBrowse.setBounds(210, 150, 25, 25);
    inputPanel.add(new JLabel("CPR", JLabel.CENTER));
    inputPanel.add(id);
    inputPanel.add(new JLabel("Name", JLabel.CENTER));
    inputPanel.add(name);
    inputPanel.add(new JLabel("Address", JLabel.CENTER));
    inputPanel.add(address);
    inputPanel.add(new JLabel("Phone", JLabel.CENTER));
    inputPanel.add(phone);
    inputPanel.add(new JLabel("Sex", JLabel.CENTER));
    inputPanel.add(sex);
    inputPanel.add(new JLabel("Date Of Birth", JLabel.CENTER));
    inputPanel.add(dob);
    inputPanel.add(new JLabel("Customer Photo ", JLabel.CENTER));
    inputPanel.add(photo);
    inputPanel.add(new JLabel("Voice ", JLabel.CENTER));
    inputPanel.add(audio);
customerPanel.add(inputPanel, BorderLayout.NORTH);
      //The buttons section:
    backPanel = new JPanel();
    middlePanel = new JPanel(new BorderLayout());
    buttonPanel1 = new JPanel();
    buttonPanel2 = new JPanel();
    search   = new JButton("SEARCH");
    update   = new JButton("UPDATE");
    clear    = new JButton("CLEAR");
    add      = new JButton("ADD");
    delete   = new JButton("DELETE");
    close    = new JButton("EXIT");
    audio1    =new JButton("Voice");
    //faceBrowse    = new JButton("...");
    //voiceBrowse    =new JButton("...");
    search.setPreferredSize(new Dimension(102, 26));
    update.setPreferredSize(new Dimension(102, 26));
    clear.setPreferredSize(new Dimension(102, 26));
    add.setPreferredSize(new Dimension(102, 26));
    delete.setPreferredSize(new Dimension(102, 26));
    close.setPreferredSize(new Dimension(102, 26));
    audio1.setPreferredSize(new Dimension(102, 26));
    faceBrowse.setPreferredSize(new Dimension(26, 26));
    //voiceBrowse.setPreferredSize(new Dimension(26, 26));
    search.addActionListener(this);
    update.addActionListener(this);
    clear.addActionListener(this);
    add.addActionListener(this);
    delete.addActionListener(this);
    close.addActionListener(this);
    audio1.addActionListener(this);
    //faceBrowse.addActionListener(this);
    //voiceBrowse.addActionListener(this);
    buttonPanel1.add(search);
    //buttonPanel1.add(faceBrowse);
    buttonPanel1.add(update);
    buttonPanel1.add(clear);
    buttonPanel2.add(add);
    buttonPanel2.add(delete);
    buttonPanel2.add(close);
    buttonPanel2.add(audio1);
    //buttonPanel1.add(voiceBrowse);
    middlePanel.add(buttonPanel1, BorderLayout.NORTH);
    middlePanel.add(buttonPanel2, BorderLayout.CENTER);
    photoHolder = new JPanel();
    Icon curPhoto = new ImageIcon("");
    Icon[] custPhotos = {curPhoto};
    JList photosList = new JList(custPhotos);
    photosList.setFixedCellHeight(100);
    photosList.setFixedCellWidth(80);
    photoHolder.add(photosList);
    makeComments();
    backPanel.add(middlePanel);
    backPanel.add(photoHolder);
    backPanel.add(comments);
    customerPanel.add(backPanel, BorderLayout.CENTER);
pack();
    setVisible(true);
    setSize(500,700);
} //makeGUI
void updateTable()
      ResultSet results = null;
      ResultSet results1 = null;
      try
        //Get the number of rows in the table so we know how big to make the data array..
        int rowNumbers = 0;
        int columnCount = 6;
        results = stat.executeQuery("SELECT COUNT(*) FROM CUSTOMER ");
        if(results.next())
          rowNumbers = results.getInt(1);
        } //if
        if(rowNumbers == 0)
        rowNumbers = 1;
        tableData = new String[rowNumbers][columnCount];
        //Initialize the data array with "" so we avoid possibly having nulls in it later..
        for(int i =0;i<tableData.length;i++)
          for(int j=0;j<tableData[0].length;j++)
          tableData[i][j] = "";
        //Populate the data array with results of the query on the database..
        int currentRow = 0;
        results1 = stat.executeQuery("SELECT * FROM CUSTOMER ORDER BY ID");
        while (results1.next())
          for(int i = 0; i < columnCount; i++)
          tableData[currentRow] = results1.getString(i + 1);
currentRow++;
} //while
//Create the table model:
final String[] colName = { "CPR", "Name", "Address", "Phone", "Sex", "Date OF Birth" };
TableModel pageModel = new AbstractTableModel()
public int getColumnCount()
return tableData[0].length;
} //getColumnCount
public int getRowCount()
return tableData.length;
} //getRowCount
public Object getValueAt(int row, int col)
return tableData[row][col];
} //getValueAt
public String getColumnName(int column)
return colName[column];
} //getcolName
public Class getColumnClass(int col)
return getValueAt(0, col).getClass();
} //getColumnClass
public boolean isCellEditable(int row, int col)
return false;
} //isCellEditable
public void setValueAt(String aValue, int row, int column)
tableData[row][column] = aValue;
} //setValueAt
//dataTable.setValue( new JScrollBar(JScrollBar.HORIZONTAL), 2,1 );
}; //pageModel
//Create the JTable from the table model:
JTable dataTable = new JTable(pageModel);
// dataTable.setModel();
/*if (scrollpane != null)
scrollpane.setVisible(false);
scrollpane = null;
} //if*/
//scrollpane = new JScrollPane(dataTable);
//scrollpane.setVisible(true);
if (inputPanel == null)
makeGUI();
JScrollPane scrollpane =new JScrollPane(dataTable, JScrollPane.VERTICAL_SCROLLBAR_ALWAYS, JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);
dataTable.setAutoResizeMode(JTable.AUTO_RESIZE_OFF);
// Create vertical box for second tab
Box box = Box.createVerticalBox();
// Create component for top
box.add(customerPanel);
// Place glue between components
box.add(Box.createVerticalGlue());
// Create component for middle
box.add(middlePanel);
// Place glue between components
box.add(Box.createVerticalGlue());
// Create component for middle
box.add(backPanel);
// Place glue between components
box.add(Box.createVerticalGlue());
// Create component for bottom
box.add(scrollpane);
// Add box to JTabbedPane
tabs.add(box, "Customer");
          setResizable(false);
id.grabFocus();
pack();
repaint();
adupdateTable();
} //try
catch (Exception e)
System.out.println("Caught updateTable exception: " + e);
e.printStackTrace();
} //catch
} //updatetable
//===================================================================================================
//===================================================================================================
//Update the customer table from the database:
void updateTable(String userStatus)
this.userStatus = userStatus;
     updateTable();
     if(userStatus.equals("user"))
     delete.setEnabled(false);
     tabs.setEnabledAt(1, false);
public void actionPerformed(ActionEvent e)
FileInputStream fis = null;
if (e.getSource() == add) //The ADD button.
//User has not populated all the input fields.
if(name.getText().equals("")|| address.getText().equals("")|| phone.getText().equals("")|| sex.getText().equals("")|| dob.getText().equals("")|| photo.getText().equals(""))
JOptionPane.showMessageDialog(null, "Please fill in all the fields","Missing Fields",JOptionPane.INFORMATION_MESSAGE);
else
// save the new customer:
try
//1. take the customer's data and photo:
int userId          = Integer.parseInt(id.getText());
String userName      = name.getText();
String userAddress      = address.getText();
String userPhone      = phone.getText();
String userSex      = sex.getText();
String userDateBirth      = dob.getText();
String photoName      = photo.getText();
String audioName= audio.getText();
File file           = new File(photoName);
int fileLength      = (int)file.length();
//2. Set the user's photo into the photoHolder:
photoHolder.setVisible(false);
photoHolder = null;
comments.setVisible(false);
comments = null;
Icon[] custPhotos = {new ImageIcon(photoName)};
JList photosList = new JList(custPhotos);
photosList.setFixedCellHeight(100);
photosList.setFixedCellWidth(80);
photoHolder = new JPanel();
photoHolder.add(photosList);
makeComments();
//3. Insert the data and photo into the database:
if(fileLength > 0)
fis = new FileInputStream(file);
String query = " INSERT INTO CUSTOMER VALUES('"+userId+"', '"+ userName+ "', '"+ userAddress+ "', " +" '"+ userPhone+ "', '"+ userSex+ "', '"+ userDateBirth+ "', ?,?,? ) ";
PreparedStatement pstmt = conn.prepareStatement(query);
pstmt.setBinaryStream(1, fis, fileLength);
          pstmt.setString(2,photoName);
          pstmt.setString(3,audioName);
pstmt.executeUpdate();
comments.setText(userName+", added.");
else
String query = " INSERT INTO CUSTOMER (id, name, address, phone, sex, dob) VALUES('"+userId+"', '"+userName+"', '"+userAddress+"', '"+userPhone+"', '"+userSex+"', '"+userDateBirth+"') ";
stat.executeUpdate(query);
comments.setText("Customer saved without a photo.");
backPanel.add(photoHolder);
backPanel.add(comments);
//updateTable();
AddScroll();
} //try
catch (Exception ee)
//The danger of putting creating the JOptionPane in here is that it will show the same message regardless of the error.
          JOptionPane.showMessageDialog(null, "Customers CPR already exits!!Please enter another CPR","Invalid",JOptionPane.INFORMATION_MESSAGE);
System.out.println("Caught exception in add action: " + ee);
} //catch
} //if
}//add button
void AddScroll()
     JScrollPane scrollpane =new JScrollPane(dataTable, JScrollPane.VERTICAL_SCROLLBAR_ALWAYS, JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);
scrollpane.getViewport().add(dataTable);

hi i tryed the JTable.revalidate() but i still did't work...
i did this :
public void actionPerformed(ActionEvent e)
    FileInputStream fis = null;
    if (e.getSource() == add) //The ADD button.
      //User has not populated all the input fields.
      if(name.getText().equals("")|| address.getText().equals("")|| phone.getText().equals("")|| sex.getText().equals("")|| dob.getText().equals("")|| photo.getText().equals(""))
        JOptionPane.showMessageDialog(null, "Please fill in all the fields","Missing Fields",JOptionPane.INFORMATION_MESSAGE);
      else
        // save the new customer:
        try
          //1. take the customer's data and photo:
          int    userId          = Integer.parseInt(id.getText());
          String userName      = name.getText();
          String userAddress      = address.getText();
          String userPhone      = phone.getText();
          String userSex      = sex.getText();
          String userDateBirth      = dob.getText();
          String photoName      = photo.getText();
          String audioName=   audio.getText();
          File   file           = new File(photoName);
          int    fileLength      = (int)file.length();
          //2. Set the user's photo into the photoHolder:
          photoHolder.setVisible(false);
          photoHolder = null;
          comments.setVisible(false);
          comments = null;
          Icon[] custPhotos = {new ImageIcon(photoName)};
          JList photosList = new JList(custPhotos);
          photosList.setFixedCellHeight(100);
          photosList.setFixedCellWidth(80);
          photoHolder = new JPanel();
          photoHolder.add(photosList);
          makeComments();
          //3. Insert the data and photo into the database:
          if(fileLength > 0)
            fis = new FileInputStream(file);
            String query = " INSERT INTO CUSTOMER VALUES('"+userId+"', '"+ userName+ "', '"+ userAddress+ "', " +" '"+ userPhone+ "', '"+ userSex+ "', '"+ userDateBirth+ "', ?,?,? ) ";
            PreparedStatement pstmt = conn.prepareStatement(query);
            pstmt.setBinaryStream(1, fis, fileLength);
              pstmt.setString(2,photoName);
              pstmt.setString(3,audioName);
            pstmt.executeUpdate();
            comments.setText(userName+", added.");
          else
            String query = " INSERT INTO CUSTOMER (id, name, address, phone, sex, dob) VALUES('"+userId+"', '"+userName+"', '"+userAddress+"', '"+userPhone+"', '"+userSex+"', '"+userDateBirth+"') ";
            stat.executeUpdate(query);
            comments.setText("Customer saved without a photo.");
          backPanel.add(photoHolder);
          backPanel.add(comments);
          //updateTable();
          dataTable.revalidate();
           AddScroll();
        } //try
        catch (Exception ee)
           //The danger of putting creating the JOptionPane in here is that it will show the same message regardless of the error.
            JOptionPane.showMessageDialog(null, "Customers CPR already exits!!Please enter another CPR","Invalid",JOptionPane.INFORMATION_MESSAGE);
          System.out.println("Caught exception in add action: " + ee);
            ee.printStackTrace();
        } //catch
      } //if
    }//add buttonand i included this function AddScroll() that i will add the scroll bars :
void AddScroll()
      JScrollPane scrollpane =new JScrollPane(dataTable, JScrollPane.VERTICAL_SCROLLBAR_ALWAYS, JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);
scrollpane.getViewport().add(dataTable);
// AbstractTableModel pageModel = (AbstractTableModel)dataTable.getModel();
//            pageModel .fireTableDataChanged();
//dataTable.updateUI();
}thankx

h:dataTable re-rendering problem...

hi friends,
In my project i am using JSF and a4j .I am getting re-rendering problem with <h:dataTable> in mozilla it is working fine but in IE6 the dataTable is not re-rendering ..
code is:
<a4j:commandButton value="#{rb.New}" onmouseup="javascript:openModalWindow('/NGL/faces/jsp/circulation /ILLPlaceILLRequest.jsp','','dialogWidth:500px;dialogHeight:500px;status:no;scrollbars:yes;top:200;left:200')" >
<a4j:support event="onmousedown" action="#{requestApprove.newActionPerformed}"/>
<a4j:support event="oncomplete" reRender="illDetails"/>
</a4j:commandButton>
my task is:
when i press the New button another jsp page will open in modal dialog after closing the dialog the table should re-render...
Edited by: Venkat_quill on Oct 30, 2008 3:29 AM
Edited by: Venkat_quill on Oct 30, 2008 3:50 AM

thanks for your reply...
I have already tried this case but, the datatable is not re-rendering ...
I got below solutions..
   <a4j:commandButton value="#{rb.New}" onmouseup="javascript:openModalWindow('/NGL/faces/jsp/circulation /ILLPlaceILLRequest.jsp','','dialogWidth:500px;dialogHeight:500px;status:no;scrollbars:yes;top:200;left:200')" >
                                <a4j:support event="onmousedown" action="#{requestApprove.newActionPerformed}"/>
                                <a4j:support event="oncomplete" action="#{requestApprove.clearData}" reRender="illDetails"/>
</a4j:commandButton>Why i followed this case this i have Add,Edit ,Delete and Refresh action on datatable.In Edit case i need to set some values in the dialog this also working fine with following code..
<a4j:commandButton value="#{rb.Edit}" onmouseup="editRequest()">
     <a4j:support event="onmousedown" action="#{requestApprove.editActionPerformed}" reRender="msg,msgmode"/>
    <a4j:support event="oncomplete" action="#{requestApprove.clearData}" reRender="illDetails,msg,msgmode"/>
</a4j:commandButton>But this problem is oncomplete event is not working in the Internet Explorer....

Scrollbar in a floater

Hi everybody,
I want to insert an area with a scrollbar in a floater panel,
like dw's binding one.
I tried frame, iframe, layer tags, div with overflow but
nothing worked.
Any ideas of how doing that ?
Thx
T0m_

To my knowledge the RI data table doesn't provide a scroll bar per se . . . it will paginate the results to where you can click on the page number or arrow to move back and forth between pages. To my knowledge you need <div> and <layer> and a bunch of DHTML tricks to actually make a table scroll (while keeping the header in place). It's not easy and must be customized for each page.
The JCreator Studio people demonstrated some fancier dataTable widgets at JavaOne . . . that might be worth a look. MyFaces may also have a more feature-rich dataTable implementation, and I'm sure there are others as well.

Datatable Header Freeze

I am using JSF 2.0 .I need provide the vertical scrollbar and horizontal for the datatable.
I achieved using stylesheet.
But the header of the datatable is also scrolling
Is there any build in method to freeze the header of datatable.
or can u plz provide me the solution to freeze the header of the datatable

With pure JSF: no way.
However richfaces has a scrollableDataTable that does what you need.
http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf
The trouble is that for JSF 2.0 you'll want Richfaces 4.0, which is still in development. I have read that Richfaces 3.3.3 can work with JSF 2.0, but I never tried that.

Jsf dataTable cell rendering

I have a dataTable which shows data from a backing bean, The problem that i am facing is that if the data is big some of the cells become multi line and it looks completely out of place, Even if i can somehow make it single line it wouldn't look good as the cells with small data will have lot's of white space
Ideal solution would be to have something like a fixed size text box where i can scroll through the text, but i should not be able to edit the text
I've tried using inputText with readonly="true" but it doesn't allow me to scroll through the text
Can anyone suggest a way to achieve this

Try CSS.
.scrollable {
    width: 100px;
    height: 100px;
    overflow: scroll;
}Important is to set the width fixed. Otherwise, the table cell would just be stretched. Height is optional. To disable the vertical scrollbar, add overflow-y: none; to the CSS (FF only, IE don't understand this).
JSP:
<h:panelGrid>
    <h:panelGroup styleClass="scrollable">
    </h:panelGroup>
</h:panelGrid>PanelGroup should render a <span> element with this class. Or, if you want to use DIV's, try this:
JSP
<h:panelGrid>
    <div class="scrollable">
    </div>
</h:panelGrid>

DataTable question

Hi,
I have three datables and my requirement is I want to show all the dataTables on a single pane and pane should have a scrollbar.For example in the dataTable one I have three records and in the second dataTable I have 2 records and in the third dataTable I have 50 records.I could able to scorll the pane to see the records in the third datatable.
Please can any one help me how to do this.
Thanks and regards
Ruther

That's easy :) Then do:
JSF<h:panelGroup styleClass="scrollTable">
    <h:dataTable ... >
    </h:dataTable>
</h:panelGroup>CSS.scrollTable {
    display: block;
    overflow: auto;
    width: 300px;
    height: 300px;
}Change the fixed width and height as you like it.
If you're using JSF 1.2, then you can replace <h:panelGroup> by <div> and remove the display: block; from the CSS.

How can i use one datatable inside the other?

Hi all,
i need help ... i have this page that shows information from a relational table... for example a mapped table "Countries" that has a java.util.Set inside named "Cities" and i would like 2 know how can i do this using jsf...
The display would be like this:
Brasil
Rio de Janeiro
Sao Paulo
USA
New York
Washington
New Orleans
And Goes on... So i guess it would be a dataTable inside the other, right? but i dunno how to do it...
Thanks for any info. cya

this is somehow a messy example. But just focus on the var attribute of outer datatable and how value attribute of inner datatable is referencing it.
<h:dataTable id="table1" value="#{pc_City_state.listofstates.states}" var="varstates" styleClass="dataTable">
               <h:column id="column1">
                    <f:facet name="header">
                         <h:outputText styleClass="outputText" value="StateName" id="text2"></h:outputText>
                    </f:facet>
                    <h:outputText id="text3" value="#{varstates.stateName}" styleClass="outputText">
                    </h:outputText>
               </h:column>
               <h:column id="column3">
<f:facet name="header">
</f:facet>
          <h:dataTable id="table2" value="#{varstates.cities}" var="varcities" styleClass="dataTable">
                                   <f:facet name="footer">
                                   </f:facet>
                                   <h:column id="column4">
          <f:facet name="header">
          <h:outputText styleClass="outputText" value="CityName" id="text6"></h:outputText>
          </f:facet>
          <h:outputText id="text7" value="#{varcities.cityName}" styleClass="outputText">
          </h:outputText></h:column>
          </h:dataTable>
</h:column>
</h:dataTable>

View images in a datatable from byte[]

I am trying to view images in a datatable where the image is
a byte[]. This is what I tried... doesn't work.
<h:dataTable rows="5" value="#{AirportList.airportList}" var="airport" binding="#{AirportList.airportData}">
          <h:column>
            <f:facet name="header">
              <h:outputText value="airportCode"/>
            </f:facet>
            <h:outputText value="#{airport.airportCode}"/>
          </h:column>
          <h:column>
            <f:facet name="header">
              <h:outputText value="airportMap"/>
            </f:facet>
              <h:inputHidden id="ole" value="#{airport.airportMap}"/>
              <h:outputText value="#{AirportList.myMap}"/>
             <div>
             
              </div>
          </h:column>
          <h:column>
            <f:facet name="header">
              <h:outputText value="airportSugBook"/>
            </f:facet>
            <h:outputText value="#{airport.airportSugBook}"/>
          </h:column>
        </h:dataTable>

my backing code
public class Airport
Collection AirportList;
private UIData AirportData;
byte[] MyMap;
public Airport()
public Collection getAirportList()
    try{
      InitialContext context = new InitialContext();
      AirportLOBLocalHome home = (AirportLOBLocalHome)context.lookup("java:comp/env/ejb/local/AirportLOBLocal");
      AirportLOBLocal local = home.create();
      AirportList = local.showAirports();
      Iterator it = AirportList.iterator();
      while(it.hasNext())
        ((OtnAirportLobDetailsLocalDTO)it.next()).getAirportMap();
      return AirportList;
    catch(Throwable e)
      e.printStackTrace();
    return null;
public void setAirportList(Collection AirportList)
    this.AirportList = AirportList;
public UIData getAirportData()
    return AirportData;
public void setAirportData(UIData AirportData)
    this.AirportData = AirportData;
public byte[] getMyMap()
    OtnAirportLobDetailsLocalDTO ap = (OtnAirportLobDetailsLocalDTO)AirportData.getRowData();
    return ap.getAirportMap();
   // return null;
public void setMyMap(byte[] MyMap)
    this.MyMap = MyMap;
}

I can't view dataTable in JSF

Hi, anyone who can help me with java server faces, i want to put data from a resultset to dataTable, i made everithing but my table is not visible.
My code is:
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<title>Consultas</title>
</head>
<body><h:form binding="#{backing_Consultas.form1}" id="form1">
<h:commandButton value="commandButton1"
binding="#{backing_Consultas.commandButton1}"
id="commandButton1"
action="#{backing_Consultas.commandButton1_action}"/>
</p>
<p>
<h:dataTable border="1" var="#{backing_Consultas.dataTable1}"
id="dataTable1">
<h:column binding="#{backing_Consultas.column1}"/>
<h:column binding="#{backing_Consultas.column2}"/>
<h:column binding="#{backing_Consultas.column3}"/>
<h:column binding="#{backing_Consultas.column4}"/>
</h:dataTable>
</h:form></body>
</html>
</f:view>

</jsp:root>
This es a JSPX page.
Please any idea
thanks
alex

Try to disable the hardware acceleration in the Flash Player.
See [[Cannot view full screen Flash videos]]
Flash "Display settings" window:
* http://www.macromedia.com/support/documentation/en/flashplayer/help/help01.html

DataTable.Rows.Count property is occasionally wrong

I have a web service in C#.NET which calls a stored procedure using ADO.NET. The stored procedure is always returning 1 row, which is then loaded into a DataTable. The Rows.Count property of the DataTable is then examined.
When this web service is called repeatedly with numerous requests, it occasionally returns Rows.Count as 0 when it should be 1. I have debugged and examined it at runtime and found that there is indeed 1 row in the datatable, but that the Rows.Count property
is 0.
Is this a known bug?
I'm using .Net Framework 2.0
Note: This is an issue that occurs very rarely. My testing shows that it takes about 90 minutes to recreate it when you have 2 concurrent processes sending requests repeatedly at a rate of about 10 requests per second.

Are you sure that there aren't multiple threads access the DataTable?
Can you post a repro?
David
David http://blogs.msdn.com/b/dbrowne/

Is there a way to add a column after a filled DataTable from SQL with the same rows?

My problem is that not to add rows like filled by SQLDataAdapter at the same row in DataGridView. How to make that? I showed below the details with my code also a screen shot, which shows the rows differences from the origin one.
I don't want to add an expression as column behave in my sql script to get what I need with query result. I don't want to obtain that way.
using (SqlConnection c = new SqlConnection(ConnStrMSSQL))
c.Open();
// 2
// Create new DataAdapter
using (SqlDataAdapter a = new SqlDataAdapter("SELECT SIPNO, SERINO, TARIH FROM SNOHAREKETLER WHERE Cast(TARIH as DATE) BETWEEN '2015/03/20' AND '2015/03/20' AND (TEZNO = 'T23' OR TEZNO = 'T31') AND CIKTI is null", c))
// 3
// Use DataAdapter to fill DataTable
DataTable t = new DataTable();
a.Fill(t);
t.Columns.Add("MyColumn", typeof(string));
DataRow workRow;
int iGetCount = t.Rows.Count;
for (int i = 0; i <= iGetCount - 1; i++)
workRow = t.NewRow();
workRow["MyColumn"] = i;
t.Rows.Add(workRow);
dataGridView1.DataSource = t;

The extra column isn't applied to only certain rows. The columns of a table identify what data each row will contain. Hence adding a column to the table automatically adds them to the rows. What you're seeing is that all the initial rows
aren't being assigned a value so they retain their default value of null. Later you enumerate the rows of the existing table and call AddRow which adds new rows. This isn't adding columns, but rows.
To generate values for the existing rows you should ideally simply pass the data back from the database. DT computed columns can be difficult to set up as it is limited to what it can do. If you want to use a computed column on the Datatable
itself then define the column as a computed column and every row will calculate its own value.
DataTable data = GetData();
//Add elapsed time column
var col = new DataColumn("ElapsedTime", typeof(TimeSpan), "expr");
data.Columns.Add(col);
dataGridView1.DataSource = data;
The issue you will run into however is that calculating a diff on DateTime doesn't work in a computed column as the expression doesn't support the necessary functions. You can google for how people solved this if you are interested in alternatives.
Most people just tend to add the column and then hook into the various change events to update the value as needed.

How can I display one of two DataTables based on criteria

I have two DataTables. One DataTable should be displayed or the other DataTable should be displayed in the same JSP based on some criteria. I wish I could put an if statement in the JSP page but how else can I do this? Is there a JSF tag that is like an if statement?

Hi
Try to use rendered attribute.
Create boolean variable in your bean ie private boolean showTab1And in jsp type
<h:dataTable id="tab1" value="..." var="..." rendered="#{myBean.showTab1}">
</h:dataTable>
<h:dataTable id="tab2" value="..." var="..." rendered="#{!myBean.showTab1}">
</h:dataTable>if showTab1 is true, first dataTable shows, otherwise second dataTable is shown.
Hope it helps
Martin
ps. You can combine value of rendered :
rendered="#{myBean.boolVar1 && myBean.boolVar2 && !myBean.boolvar3}"

DateField not getting copy in the matrix using Datasource & Datatable

Hello All,
I have tried to copy data From Purchase Order Tables to my own created User Defined Form matrix columns using DBDatasource & Datatables ,Instead of Document Date all other data are getting copied but that document date field is not
getting the data plus it is not showing any error message as such.
Following is the code which i have written :-
=====================================
oPurchase_Amend.DataSources.DataTables.Add("oMatrixDT" )
oPurchase_Amend.DataSources.DataTables.Item("oMatrixDT" ).Clear()
Dim sSQL As String = "SELECT T1.[ItemCode], T1.[Dscription], T1.[Quantity], T1.[Price],(Select InvntryUoM From OITM Where ItemCode=T1.ItemCode) as 'UoM',T1.LineNum,T0.DocNum as 'FrmDate' FROM OPOR T0 INNER JOIN POR1 T1 ON T0.DocEntry = T1.DocEntry WHERE T0.[DocNum] ='1' and T0.CardCode='C0001'
oPurchase_Amend.DataSources.DataTables.Item("oMatrixDT" ).ExecuteQuery(sSQL)
oMatrix = oPurchase_Amend.Items.Item("mtx_0").Specific
oMatrix.Clear()
Dim oDBDataSource As SAPbouiCOM.DBDataSource = oPurchase_Amend.DataSources.DBDataSources.Item("@OSL_POAMD")
Dim oDataTable As SAPbouiCOM.DataTable = oPurchase_Amend.DataSources.DataTables.Item("oMatrixDT" )
oDBDataSource.Clear()
For row As Integer = 0 To oDataTable.Rows.Count - 1
Dim offset As Integer = oDBDataSource.Size
oDBDataSource.InsertRecord(row)
oDBDataSource.SetValue("U_ItemCode", offset, oDataTable.GetValue("ItemCode", row).ToString())
oDBDataSource.SetValue("U_ItemName", offset, oDataTable.GetValue("Dscription", row).ToString())
oDBDataSource.SetValue("U_UoM", offset, oDataTable.GetValue("UoM", row).ToString())
oDBDataSource.SetValue("U_OldQty", offset, oDataTable.GetValue("Quantity", row).ToString())
oDBDataSource.SetValue("U_OldRate", offset, oDataTable.GetValue("Price", row).ToString())
> Line For Copying Document Date Data to the matrix datasource
oDBDataSource.SetValue("U_OldDate", offset, oDataTable.GetValue("FrmDate", row))
oDBDataSource.SetValue("U_LineId", offset, oDataTable.GetValue("LineNum", row))
Next
'--- Rebinding the datasource to the matrix columns -
oMatrix.Columns.Item("col_0").DataBind.SetBound(True, "@OSL_POAMD", "U_ItemCode")
oMatrix.Columns.Item("col_1").DataBind.SetBound(True, "@OSL_POAMD", "U_ItemName")
oMatrix.Columns.Item("col_3").DataBind.SetBound(True, "@OSL_POAMD", "U_OldQty")
oMatrix.Columns.Item("col_5").DataBind.SetBound(True, "@OSL_POAMD", "U_OldRate")
oMatrix.Columns.Item("col_7").DataBind.SetBound(True, "@OSL_POAMD", "U_OldDate")
oMatrix.Columns.Item("col_9").DataBind.SetBound(True, "@OSL_POAMD", "U_LineId")
oMatrix.LoadFromDataSource()
But i am not able to get the document date in the column of the matrix .
Please suggest what changes i have to meke in this code to get the desired output.
Thanks & Regards,
Amit
Edited by: AmitSharma_061985 on Dec 17, 2009 12:24 PM

Hi Michael,
FrmDate is the Document date of the purchase order which i am fetching through sql query and trying to copy that in the matrix
through datasource .
Edited by: AmitSharma_061985 on Dec 18, 2009 7:07 AM

Scrollbar in a datatable

Similar Messages

Maybe you are looking for