Discussions
Categories
- 197.1K All Categories
- 2.5K Data
- 546 Big Data Appliance
- 1.9K Data Science
- 450.7K Databases
- 221.9K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 552 MySQL Community Space
- 479 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3.1K ORDS, SODA & JSON in the Database
- 555 SQLcl
- 4K SQL Developer Data Modeler
- 187.2K SQL & PL/SQL
- 21.3K SQL Developer
- 296.3K Development
- 17 Developer Projects
- 139 Programming Languages
- 293K Development Tools
- 110 DevOps
- 3.1K QA/Testing
- 646.1K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 158 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.2K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 19 Java Essentials
- 162 Java 8 Questions
- 86K Java Programming
- 81 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 205 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 466 LiveLabs
- 39 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.7K Other Languages
- 2.3K Chinese
- 175 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 233 Portuguese
Is it possible to show/hide columns in oj-table based on a bind variable ?

I have an oj-table with many columns. I would like to implement a slider or checkbox that allows the user to show or hide a (set of) columns in the oj-table.
Answers
-
The columns attribute of an oj-table component can be bound to a variable that returns the appropriate array with column data, yes.
The only thing to watch out for with this, is if you are using inline templates to define the row or cell data, then you will want to adjust those as well if you remove a column.
-
Thanks John,
my html looks like this:
<oj-table
id="table"
data="[[dataprovider]]"
columns="{{columnArray}}"
and javascript defines the columns like this:
this.columnArray = [
{ headerText: 'Department Id',
renderer: this.highlightingCellRenderer,
id: 'DepartmentId',
frozenEdge:'start',
footerTemplate: 'footerLabelTemplate'
},
{ headerText: 'Department Name',
renderer: this.highlightingCellRenderer,
id: 'DepartmentName',
headerClassName: 'oj-sm-only-hide',
className: 'oj-sm-only-hide',
resizable: 'enabled'
},
etc.
The idea is that there is a checkbox displayed above the table that will show Department Name column when checkbox is checked, and hide it when the user unchecks it. Should I change the className and headerClassName values in the columns definition (and to what value then?), or is there a different attribute I should be using ?
-
This jsFiddle will show you and example of how it can be done. This is using an oj-buttonset-many instead of checkboxset, but the code would be the same.
-
This works brilliantly, thanks for the info !!
One more question: when showing/hiding columns I see in the console this error:
Uncaught TypeError: this._appliedColumnWidths is undefined
Can you point me to the documentation where is explained how to solve this kind of error?
-
It would appear that you're trying to control the column width in some way that I don't have in my sample. I don't see the error in my fiddle.
Since you are an Oracle employee, please take this question to the internal resources available to you, as it is against Oracle security policy to discuss product development in public forums.
Thanks :-)