Notes/Domino XPages Development Forum - xe:dynamicViewPanel or xp:viewPanel

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal

~Bella Elfreemaroni

Jan 4, 2012, 8:51 PM

31 Posts

xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?

Category: Extension Library
Platform: Windows
Release: 8.5.2
Role: Developer
Tags: View Panel
Replies: 4

Wondering if anyone's got any tips for how to preserve view column widths when using the Ext.Lib dynamic view panel control?

I'd prefer to use the Ext.Lib control vs. the stock xp:viewpanel so I don't have to build custom controls for each view I want to display. I'm following the example provided in the Ext.Lib. Demo Db where the view name is being passed via a viewScope variable.

That being the case, I find that when you collapse all categories using the <xe:dynamicViewPanel> control, any view column headers contract (squish) to the left, then when you expand all categories the view column headers expand back up to match the content. Is there a property/setting/trick I can use to stop the view column headers doing this shimmy/shake across the page?

Is there a way to get a handle to the column width set up on the Notes view & somehow stuff that into the dynamic view panel somewhere so it abides by it?

Any ideas will be most appreciated. Thanks.

~Mary Reluveroden

Jan 5, 2012, 3:51 AM

25 Posts

Re: xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?

You could do something like:

var db = session.getCurrentDatabase();

var view = db.getView("YourView");

var columns:java.util.Vector = view.getColumns();
var columns:java.util.Vector = dbView.getColumns();
for (var i = 0;i < columns.size();i++) {
var column:lotus.domino.ViewColumn = columns.get(i);

var ptSize = column.getFontPointSize();

if (column.isFontBold()) {
ptSize = ptSize + 1;
}
var computedWidth = column.getWidth() * (120 / ptSize);
}

That would actually loop through all the columns, but it should show the general idea. Also, if that's too small, as it's based on a screen DPI (determined in the resolution being run) of 120 DPI. So, you could make it a little larger by changing (120 / ptSize) to (96 / ptSize).

HTH

Keith

~Bella Elfreemaroni

Jan 5, 2012, 4:27 PM

31 Posts

Re: xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?

Thanks Keith, your code looked promising & I tried to find a home for it in the <xe:dynamicViewPanel> properties but most of them only apply classes to the objects, not styles. The 2 that do apply comma-delimited styles are the dataTableStyle which appears to pertain to the pagers, and viewStyle which only applies to the generated <table> tag, not the individual <th> or <td> tags like so:

The columnClasses property of the dynamic view panel was the closest to what I needed but I don't think I want to create a few dozen classes with all possible column widths just to get that to work!

I suppose I could create my own data table or view panel dynamically & use your code to set the view column header widths -- that's where I'm heading now. It's just too bad that the Ext.Lib. dynamic view panel is not going to work out.

Thank-you for the suggestion & code.

~Mary Reluveroden

Jan 8, 2012, 6:21 PM

25 Posts

Re: xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?

Judy,

OK, I think I found a solution... To set a width on each column, you'll need to get the children of the dynamicViewPanel, which will be the columns. These have a java class of "com.ibm.xsp.extlib.component.dynamicview.UIDynamicViewPanel.DynamicColumn". One of the methods of this class is "setWidth(String widthInPx)". So with this we can now loop through the children of the dynamicViewPanel and set a width on each column. This should go something like:

var viewPanel:com.ibm.xsp.extlib.component.dynamicview.UIDynamicViewPanel = getComponent("dynamicViewPanel1");
var viewChildren:java.util.List = viewPanel.getChildren();
var viewPanelData:com.ibm.xsp.model.domino.DominoViewData = viewPanel.getData();

var viewName = viewPanelData.getViewName();
var domView:NotesView = session.getCurrentDatabase().getView(viewName);
for (var i = 0;i < viewChildren.size();i++) {
   var child:com.ibm.xsp.extlib.component.dynamicview.UIDynamicViewPanel.DynamicColumn = viewChildren[i];
   var viewCol:NotesViewColumn = domView.getColumn(i +1);
   if (viewCol) {
   if (viewCol.getItemName() != child.getColumnName()) {
   var domViewColumns:java.util.Vector = domView.getColumns();
   for (var j = 0;j < domViewColumns.size();j++) {

var tmpViewColumn:NotesViewColumn = domViewColumns.get(i);
if (tmpViewColumn.getItemName() == child.getColumnName()) {
viewCol = tmpViewColumn;

  }
   }
   }
var ptSize = viewCol.getFontPointSize();
  if (viewCol.isFontBold()) {
  ptSize = ptSize + 1;
  }
  ptSize = viewCol.getWidth() * (120 / ptSize);
  child.setWidth(ptSize.toString());
}
}

I tried this out and it works for me so you should get similar results. The biggest thing to account for is the dynamicViewPanel id (in bold above). You could put this in a function that accepts the dynamicViewPanel id and then be able to use it from anywhere or just be sure to plug the proper id in. I put this in a button for simplicity sake in proving the concept but there's no reason why this "shouldn't" work in the afterPageLoad event. Figuring this out also gave me some good fodder for my blog and a custom control for finding component class info.

HTH

Keith

~Bella Elfreemaroni

Jan 9, 2012, 10:18 PM

31 Posts

Re: xe:dynamicViewPanel or xp:viewPanel - inherit column width from Notes view?

Well Keith, I really appreciate your suggestion & code. Really!

I tried it via a button as you suggested just to see the effect & there are styles/classes that come with the view column headers that interfere with setting the width. It seems an extra 20 pixels is always added to each column header and style classes are applied to span tags within span tags that make any hover over styling go wonky (that also applies to the stock viewPanel control so it's not unique to the dynamic view panel control). For some reason the xspPanelViewColumnHeader class is applied to the surrounding <div> & then also the internal <span> class surrounding the actual text.

</div>

</div></th>

If I inspect this element via firebug, it's grown to 80 pixels:

I even did this on the XPages Demo Db Dynamic View XPage just to make sure it isn't my custom styling or something specific to my app that's causing it. Same thing there.

Then on top of that, any data row columns that are categorized are getting truncated at the width setting even though they have a colspan attribute on the outer <td> tag:

</button><a class="xspColumnViewMiddle" style="cursor:pointer;" id="view:_id1:_id2:include1:_id32:dynamicViewPanel1:3:_id181__shrink:1.2link">resources</a>

</div>

</div></td>

So ... I can't spend any more time trying to use the dynamic view panel or getting the view panel to abide by my widths. I'll just go back to creating a custom control for each view panel for now. If I find some spare time later when everything else is working then I can revisit this.

I'm sorry I couldn't use your solution, it just didn't work for me. Thanks a bunch for all your time & efforts -- great stuff!