I am using primefaces 3.5, the latest release for our development work! In our homepage, we display the rows of data. When we click a row onRowSelect (SelectEvent) event we navigate to the next page with the Navigation Handler. On this landing page, I have a dataTable with expandable rows which has data in it. When I click the rowToggle icon the data is displayed in row expansion section (as it should normally).
What I need is to show the data automatically when page is loaded, with the rowToggler displaying down.
How can I achieve this?
This can be achieved using a bit of JavaScript (jQuery). All you have to do, is as your page loads call the click action of the RowExpander.
Something like this would work :
jQuery('.ui-row-toggler').click()
You can place this in your body onLoad attribute.
Source
http://forum.primefaces.org/viewtopic.php?f=3&t=8537
Related
I have an app that has two ag-grids in two tabs using Angular Material tabs. When the user switches between tabs the items in one of the columns get rendered outside of the grid (but inside the tab body). The difference in the column is that it uses a custom cell renderer. It only effects the grid in the first tab because that is the grid that uses the cell renderer. So you have to switch to the second tab then back to the first tab to see it.
Stackblitz example here
It's hard to see because the column elements get rendered at the bottom of the tab window, you can barely see them poking out at the bottom of the grid. Also, if you page to the next page of the grid they are rendered properly, even on the first page when you page back.
I've tried executing gridApi.refreshCells() after the tab has switched but it doesn't do anything.
The fix turned out to be simple and I hope this is the best method for doing so. I simply execute the grid API's redrawRows method.
I'm using this, Angular-UI Bootstrap Popover
And below is my code snnipt:
<a href=""
popover-placement="{{$index < 4 ? 'bottom' : 'left'}}"
popover-trigger="outsideClick"
uib-popover-template="'popover_table.html'">
Click me
</a>
When I click the link, it will show the popover_table.html content in page, it's a table which shows the data returned from backend. When there are too much data returned, The popover_table will show many records, and user need to scroll down inside the table. So They are asking if we can fixed the table header in the popover dialog top when scroll. Screenshot added below
So if there are more than 4 records, I need to add scroll-y and keep the table header fixed in the popover top so user can see it all the time when scrolling.
How to implement this feature? position fixed does not work in this case.
and also, if I add ng-click for <a>, then is there a way to execute the ng-click function after the popover shows? I tested and found that ng-click function execute first..
If you are using ng-click then it suppose to be worked if its still fails use $scope.$apply() inside click function
As titled,
In my webpage, i have a jqgrid, and a button that will pop up a modal dialog that contains another jqgrid (displaying different data) on it. The problem is, the jqgrid on the modal dialog breaks the jqgrid on the page, like for example, if i set my jqgrid on the dialog to have no filter function, then it will cause the jqgrid's filter on the webpage to suddenly disappear.
Just want to know if anyone encounter such issues before?
By the way the webpage was created using Grails, so i'm not sure if this is related to Grails's resource issue or not.
It's difficult to help you because you don't posted your code. I can only to suppose that you could have id conflicts between the grid in modal dialog and the grids on the main page. I would suggest you to add idPrefix option with some non-empty unique value in the modal dialog. For example you can add idPrefix: "g1_" in the first grid and idPrefix: "g2_" in the second grid. Then the rows with ids "1", "2", "3" will be "g1_1", "g1_2", "g1_3" in the first grid and there will be "g2_1", "g2_2", "g2_3" in the second grid.
Here's my layout. I'm using a Kendo splitter control. The left pane contains a menu and the right is the main content. Some of the content pages contain kendo grids that can contain several pages of data. My problem is that when the user clicks on the next page of the grid, it performs a post back and the whole page refreshes taking the user back to the home page. The left menu loads the right panel using javascript. Does anyone know how to get around this?
In another words, I need the grid to load the next page and target the right side of the splitter control. How do I "Ajaxify" the next page of the grid control?
It sounds like your Grid is configured for Server Binding - if so you need to change it to Ajax binding and there is not other way to put it inside a Splitter which content is loaded with Ajax.
My initial page has an empty div. An ajax transaction fills it with suitable h3/div content. If I call .accordion() before there's any content, it has no effect. If I call it after the first content is loaded, the first content looks good. Calling it a second time, however, does not work. Do I really need to destroy and redo?
At the moment you have to destroy and re-create the whole thing using the official stable release. There is already a feature request for it, scheduled for 1.next: http://bugs.jqueryui.com/ticket/4672
If you have a read above, mrfr0g says he built a custom accordion based on jQuery UI 1.8.2, give that a try.
give the inner DIV of each tab an id
and use document.getElementById("content1").innerHTML = "HelloEveyOne345443333334422" to dynamically change the content of each tab