I wanna create a table where I should hide some columns. Whenever I click on an arrow or some button The hidden columns should be display along with original columns in that table.
For example, I have 20 columns, I don't need show all the columns at the staring point of view. Suppose I want to display 5 columns in UI, renaming 15 should be hidden. Where can I put some arrow on right corner(in header line) of table to extend the table with remaining columns.
Is it possible with JSF with rich-faces or anything else.
Thank you in advance.
Take a look on this example on primefaces labs. It allows to dynamically add columns to a datatable. I am sure you can tweak it to get the behaviour you are looking for.
Use a <rich:dataTable. Set the rendered property of the columns which should be initially hidden by using a boolean property in your class.
<rich:dataTable value="" var="v" id="tbl">
<rich:column>Always visible column 1</rich:column>
<rich:column rendered="#{del.renderColumn}">Visible on demand</rich:column>
<rich:column>Always visible column 2</rich:column>
<rich:column>Always visible column 3</rich:column>
</rich:dataTable>
Use an <a4j:commandButton and set the property renderColumn as true at button action and reRender the table.
<a4j:commandButton value="Show" action="#{del.renderHiddenColumn()}" reRender="tbl"/>
Related
I'm creating a report that has 5 columns. However, one column can have no data and in that case I need to hide it. This works using the 'Hidden' property of column but when the column is hidden, I want to make the first column wider. Is there any way to do this in expression?
The only solution I found is to have multiple same tablixes with different column count and then show or hide each tablix appropriately if the specific column has no data. (by checking 'Max' value in column).
Unfortunately, it's not possible to enter an expression to the column width property but if you simply need to change the width of one other column when the first is hidden, I've come up with a workaround that works fairly well.
The idea is a little easier and requires less data to load than your current solution. Basically, you'll create an identical width column that is simply empty -- but set the borders to appear as if it is simply part of another column. So you'll simple reverse the expression used to hide the column with no data in the hidden property. To achieve this, depending on where you choose to add the extra space column, you'll have to adjust the borders of the adjoining cells where there is no right border on the cell to the left and a left border on the cell to the right. Depending on your layout, you would only need a top and bottom border on the extra space column cells.
I did something similar with a report that has 3 pages and 11 columns -- but 8 of the columns changed from page to page. I had to hide one column, show another, and used expressions in column headers and detail rows to simply change the data in each column based on a field that returns the type of the data.
I have a report containing a Tablix/table with sets of rows and columns which I am hiding conditionally using Expressions, via the Column/Row Visibility dialog.
If for example I have 3 columns which I want to all have the same Expression to determine their visibility, is there any way for me to achieve this without opening the Column Visibility dialog for each Column and entering the appropriate Expression?
I've tried selecting multiple columns, but then the right-click context menu no longer offers the Column Visibility option (it's greyed out) and I have also tried out the Hidden property of the columns (which can be amended in bulk by selecting multiple columns), but this only stops the columns from being rendered, leaving a blank space where they used to be (rather than how Column Visibility works, where columns to the right of the hidden columns are moved across to fill the gap, like hiding columns in an Excel sheet).
Is it possible to achieve what I'm after, or will I have to continue opening the Column/Row Visibility dialog for each column/row I wish to conditionally hide/show?
If the columns you want to control the visibility for are next to each other, you can create a Column Group for them and manage the visibility via the Group.
Add a new column group at the appropriate level so that only the relevant columns will be included.
If you already have Column Groups this will likely be a Child Group or an Adjacent Group.
If not, you can create an initial Column Group by dragging a Dataset field from the Report Data into the Groups pane.
Insert new columns inside the new group, and move the data from your existing relevant columns into the group.
The new group does not need to repeat, so in it's properties window set Group on: to a plain text value, e.g. "1".
Input the desired visibility settings into the Visibility page of the properties window.
For each of the individual columns inside the group set the Hidden property to False, to remove any other expressions or settings that might interfere.
Not exactly what you are looking for but perhaps a midway point - and this can apply to many things other than visibility (e.g. background colour, tooltip) - edit the RDL directly using View Code. This has the added benefit of being able to implement changes that are almost identical per column instead of identical with a minimum of mouse usage.
Typically I have set one column up the way I like it in the designer and then copy/paste under the other columns. In the case of visibility look for <TablixColumnHierarchy><TablixMemebers>. You will see a list of empty <TablixMember /> items along with the expanded <TablixMember><Visibility><Hidden>=... block where you have set up one column. Simply copy paste that block over the empty items at the position of interest (you will need to count it out unfortunately as there are no identifiers).
Bonus Tip: If you make a mistake or want to change something later, you can do a replace on all expressions at once (optional regex allowed).
Remember to backup or check in your work first because the designer may not open that report again correctly if you make a mistake :-)
Select the columns you want to conditionally hide and press F4 to see the Properties Window. Look for the Visibility node and use the Hidden property to set the conditionally expression.
The expression should evaluate to True for hiding and False for showing.
Let me know if this helps.
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
I am trying to create a Table that shall contain some columns with basic facts on the left and on the right side there shall be some columns that can be tabbed. Something like this:
So the Question is, how to do this?
I could personaly think of two solutions, but I actually don't like both:
Write a own Table for Tab1,Tab2 ... That contains the basic data and the Tabbed Data
Write a Table for the basic Data and one for each Tab. Here I think you would have a lot of Design problem "glueing" both tables together, so they look like one table.
So actually I don't like both solutions. Maybe there is a better solution to this?
Perhaps you could give the columns that belong to each tab their own unique class, e.g. .tab1-columns, .tab2-columns, etc. Then, you could show or hide the column depending on the active tab. The tabs, however, would exist outside of the table. Alternatively, you could pt the tabs into a pseudo- header row above the actual table header row, with the first header cell spanning those cells that shouldn't be "tabbed". However, I believe leaving the tabs outside of the table would be a bit more semantic in nature.
HTH.
Render all columns but hide them (display: none;) except the column by default.
Then add an click event on the tabs to switch the visible columns. be sure to use just the nav-tabs and not the js component.. it will be easier I think
I need to produce a table similar to:
What we see is the left column containing the data point headers, and each column after contains the actual data.
I'd like to treat each column (other than the first one) as an optional column. The user can add or remove the columns based on funds they select. If they've selected only 1 fund, only the first 2 columns are visible, the rest of the spaces are blank. Each subsequent fund selection adds a new column to the table, up to a max of 5.
I'm wondering what is the best way to implement this? I'm thinking each column is an independent table of a fixed width that I can add to a container which can align them side by side. Will I have difficulty getting the 6 tables to line up side by side?
Is there a better way for me to achieve this result?
You could have invididual tables, or you could assign each column a class which would then allow you to add or remove all elements that have that class using Javascript.
For example:
<table>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
</table>
You could then use Javascript to show/hide elements (via CSS) with the relevant class based on actions of the user. Depending on how big your table is, that could work.
Nice use of Comic Sans by the way!