Change Oracle Apex region grid column with dynamic action - javascript

is there any way to change Oracle Apex region with dynamic action. I mean when i click a button, i execute dynamic action to change column order of a region or to change grid column width of a region. Lets say i have two region : regionA and RegionB. What i need to do is place RegionA side by side (not in a new row), so i have to place it in column order column1 and column 2, but then i need to hide RegionA and display RegionB in full screen, so the only way is dynamically change regionB to column 1 because i dont want regionB display in half of the screen.
Any clue would be appreciate. Thanx.

Personnaly, I never use columns in Oracle Apex. I had too much problem with it in last releases (especially 3.2)... I was forced to build a new custom template with custom region positions (because at the time apex was using <table> elements for the page layout... I used only <div> elements + CSS).
In your case, if you need region A and region B side by side, I would create the two regions in the same region position and same column, and then simply apply float:left to the two regions (add style="float:left" in the region attributes).
So when you will hide one of them, the other one will fill the page width (you may need some more CSS of course).
Then give a static id to the two regions, then from JavaScript/Jquery you can show/hide them easily using $('#your_region_id').hide(); and $('#your_region_id').show();.
I use it a lot and it works like a charm.

Related

Hide some part from the table column header

I have one table. In table column I have two thing one table column name and one icon to sort column. Everything works fine, but right now I started working with accessibility and found that for each column value it reads both table header and aria label for icon also. I don't want read aria label for icon Is there any way to give label for icon so that it read in screen reader but don't read foe each data row.dont want to put icon outside of table column also.
Use the solution as explained here in Sortable Table.
Use aria-hidden to remove the icon from accessibility and also
Use aria-sort which meets the arrow icon purpose and lets the Screen Reader know the direction of the sort: ascending or descending.
Visual users would be able to know the direction by seeing the arrow icon position.
Non-visual users would be able to know when SR speaks the aria-sort value.

Is it possible to pass html into a Scrolling Table in Gojs?

I'm working on go js. I have two div and I need to connect the contents of them with links. Therefore I just saw a Scrolling-Table concept in Gojs by which we can connect each row of left table with the rows of right table.
Now I need to pass an html div into rows for both left and right tables.
This html div contains a switch button together with a asp dropdown.
It is possible to pass such html content in each row of Scrolling Table?
Because GoJS wants to be able to render to canvas and to SVG and to other targets, one cannot embed any HTML in a diagram. You'll need to implement it yourself using GoJS GraphObjects. Read http://gojs.net/intro about the basic Shapes and Panels. For examples of how the various kinds of predefined buttons are implemented, see http://gojs.net/latest/extensions/Buttons.js.

How to build dynamic grid in app

I'm having trouble with where to start on this problem. I have a Rails app and I want to build a dynamic grid within it. What I mean by this is that I want to be able to input a row of data (i.e., from one of my tables) within one cell of the grid. Then I want to be able to move the cell around to a different location of the grid. Ultimately having many of these cells that are freely able to be moved on a grid. Any assistance would be awesome. Thanks.
You should check out jQueryUI draggable https://jqueryui.com/draggable/

Recreating Doodles Accordion Table

In my current Webproject I have to implement a table containing all days of a month, resulting in ~30-31 table columns. Since such a huge table isn't very pretty, I wanted to implement something similar to the tables of Doodle Polls. Doodle folds a table, replaces the hidden columns with a pic and if you click on that picture it unfolds the columns -> displays the hidden columns.
But how do I achieve such a behaviour? I'm new to Javascript and not that familiar with fancy CSS3 techniques.
Especially, how do I replace the hidden columns with a picture?
The tutorials I've found only allow to hide specific columns and not to replace them.
PS: I also tagged RoR, since the project I'm working on is built with RoR and maybe there is also a Rails solution for that problem?
PPS:
You could hide the columns you want to hide first and have a column with the image displayed in the table. When the image (folding) is clicked you can hide the column containing the picture and make the other columns visible again. This is not really about some fancy css3 stuff but you need basic knowledge of how to interact with DOM elements through javascript (hide / show) elements. That should do the trick.
See this tutorial at w3schools. All that you need is get the elements you need (Image Column and all TDs in the hidden columns) ant then apply a css style to them (hidden / visible).

get data from main grid to populate subgrid

I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)
One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo

Categories

Resources