October 25th, 2014

How to specify column widths using percentages in Bindows tree views

Columns’ widths in a Bindows BiTreeView based class are restricted to using absolute size values.

We (at the Bindows support) are often asked if is there is a way to use percentages for the column widths.
The bad news is that you must use absolute sizes.
The good news is that the view-manager (the class that handles the visual aspects of the columns, among other things) can easily be extended to support this.

The main steps to achieve this are:
1. When the tree is created, set the desired percentage value you want for each column.
2. Store an array with these percentages on the view-manager object of the tree.
3. Extend the view-manager with a method that converts the percentage values to absolute sizes in pixels.
4. Call this method in all the cases where it needs to be calculated (e.g. when the tree is created and/or resized).

Below is a screenshot of the code. Be sure to read the comments.

blogcode1.png

And this is what the result looks like. The percentage value chosen for each column is written in red and I also marked the row headers (just in case you are uncertain what those were).

blogimage.png

Here you can run the application in your browser.
Try resizing the browser window and see that the relative widths of the columns are preserved.

In a production setting, you would add some more error checking of course.
For a generic solution, the resize listener probably needs to be added to the create event as well (for the case when the tree view is not yet added to the page when setCWP() is called).
And to be perfectly generic, it should allow changing the tree view (i.e. remove the listeners from the current tree and add them to the new tree).
However, this code should cover most situations for you.

2 Responses to 'How to specify column widths using percentages in Bindows tree views'

  1. 1Codebix.com
    March 21st, 2011 at 6:13 am

    Codebix.com - Your post is on Codebix.com…

    This post has been featured on Codebix.com. The place to find latest articles on programming. Click on the url to reach your post’s page….


  2. 2How to specify column widths using percentages in Bindows tree views
    April 9th, 2011 at 7:43 am

    […] is a way to use percentages for the column widths. The bad news is that you must use absolute… [full post] Johan Lund Bindows Blog developing in bindowsjavascript 0 0 0 […]


Leave a Response

Imhotep theme designed by Chris Lin. Proudly powered by Wordpress.
XHTML | CSS | RSS | Comments RSS