I am using YUI Pagination to show data. How can I populate the default 5th page of my table after updating record of 5th page. And I also need to populate the RowsPerPageDropdown value, used to decide how many records to show per page.
Is there a onChange event for YUI Pagination? Can anyone help me?
Assuming you are using: YAHOO.widget.Paginator
pageChange Event fired when attribute changes have
resulted in the calculated current page changing.
from: http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html#events
Used something like this:
var paginator = new YAHOO.widget.Paginator({
... options ...
});
paginator.subscribe('pageChange',function(){
... handle page change event ...
})
Related
I've been quite pleased with how remote pagination on Tabulator works with automatic ajax loading, but I can't seem to find a way to set the page that is displayed when the table is first loaded. table.setPage(pageNum) only works for me after the first page has been fetched and rendered; if I do something like
new Tabulator("#my-tabular-table", { lots of stuff }).setPage(5)
then I get a Pagination Error - Requested page is out of range of 1 - 1: because the page count hasn't been received from the server yet.
Is there some way of doing this? Am I missing something? I realize that I could hook into some callback and switch to the desired page immediately after the first page has been loaded, but I'd rather not wait for an extra server call.
You can use the paginationInitialPage option in the table definition to set the page number for the initial load:
var table = new Tabulator("#example-table", {
pagination:"remote", //enable remote pagination.
paginationInitialPage:2, // this option can take any positive integer value
});
I'm writing a Primefaces 5.1 portlet.
It consists in a unique page containing a panelMenu, and I need that it starts with any panel collapsed everytime a user change page (on page loading).
But, if I open a panel, then change page, it will start showing that panel still opened.
I wasn't able to find any option to achieve this goal (e.g. collapsed=true, ignoreCookie=true or something similar).
The only solution I found was the following Javascript code:
PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);
The problem is that this code will collapse any opened panel (so on page loading user is able to see panel menu collapsing animation) but it seems it doesn't store this state in its cookie/localstorage... the result is that on any page loading user can see this animation.
I'm sure it doesn't save its state, because the only way to "solve" the problem is to manually re-open and re-collapse the panels... then, on following page change, these menus start closed (and there is no animation).
I also tried to use PrimeFaces.widgets.sideMenuPanel.saveState() after collapsing, but with no success.
Do you have any idea about?
Thank you...
I found a solution to the problem.
If you read my discussion with Kukeltje (comments on my question), you will find that latest Primefaces' versions will solve the problem.
Otherwise, if you want to avoid upgrade or modify sources, and you need a quick fix based on Javascript only please read the following part of the answer.
It directly works on the component's state using JavaScript.
First of all you need to have a variable reference to your component:
<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />
Then you should add the following JS code on document ready:
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
// following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
//clearSidePanelMenuPreferences();
// 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
// We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});
The function called to clear preferences are the following:
function clearSidePanelMenuPreferences() {
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState(); // store this information
}
Hope it helps
Please check this block of code
PF('myPanelMenu').headers.each(
function(){
var header = jQuery(this);
PF('myPanelMenu').collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
);
I prefer to do this in order to execute this method only once and keep the menu option selected.
$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState();
}
});
I am using a Data View control and the Pager Add Rows control to allow the user to add more rows to the data view.
Can I extend the Pager Add Rows control to automatically add rows to the Data View when the user reaches the bottom of screen?
Yes, you can do that easily with jquery. if you master dojo you can probably do it in similar ways. but this example show jQuery.
add jQuery to your xpage
add a new custom scriptlibrary to your xpage
put below code in your custom scriptlibrary
Add a addPageRows control to your xpages and connect it to a repeat.
All set, try it out.
$(function(){
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$("[id$='pagerAddRows1_ar'],[id$='pagerAddRows2_ar']").click();
}
});
})
The jquery code will try and find pagerAddRows1_ar or pagerAddRows2_ar and if found will click the link automatically when you reach the bottom of screen.
You can actually use this code with any kind of pager or link you have on your xpage. just make sure your code click the right id.
I am using the Telerik MVC grid, with Ajax data binding.
I would like to do 2 things with the Telerik MVC Grid:
When a row is selected, detect (client side) which page the grid is currently on as well as which row was selected.
The next time the grid is loaded (using ajax ... I never leave the page), page back to the same page to show the last select. (I guess I am really just asking if there is a way to immediately go to a page of the grid once the data is loaded, rather than page 1)
Please keep in mind, I am aware of the client side events already. I would like to know how to do #1 from the event, and #2 either from the client side or programatically somehow.
Edit/More Details: I think I know what I need to do here. Since I am using Ajax loading here, the Ajax POST is being called somewhere in the Telerik code. I can see that during that Ajax POST they are sending a "page" parameter to the controller. If I could edit that somehow, I am sure it would work - but I am having trouble changing that parameter.
Thanks in advance!
For the sake of anyone else looking for this, I figured it out:
Getting the current page of the Grid:
To do this, I use jQuery to determine which number has the "selected" style (t-state-active) to determine the current page number. Example (my grid id is 'cases-grid'):
function getCurrentGridPage() {
///<summary>Gets the current page of the #cases-grid</summary>
var page = $('#cases-grid .t-state-active');
if (page.length == 0) {
return 1; //default to page 1 when unknown
}
return page.text();
}
The second part of my question was actually well documented on the Telerik site ... I just missed it for awhile. To load the grid to a specific page (other than 1) I added the following to my grid:
.Pageable(pager => pager.PageTo(#Model.InitialPage))
And added the InitialPage property to my model.
I have a html drop down and an extjs grid.
I want to implement searching functionality using the drop down...
The ext grid has to show the records based on the selected value of the drop down. and the grid has paging also...
I implemented this like
In drop down change event i'm loading store with the search parameters
searchGrid.store.load({params:{start:0, limit:10, year: searchVal}});
This works fine for the first page..
Grid shows records according search params....
But when i click the next page button in paging bar.... search params are missing....
how to handel this....
Is there any other way to implement this kind of search...
Help thanks.
Welcome to SO
Add a beforeload handler to the store that initializes the params everytime the store needs to be loaded (whether by user selecting a dropdown value or click the next button)
Your code would be something along the lines of -
Ext.onReady(function() {
//...some initialization code
Ext.getCmp('your-grid-id').getStore().on('beforeload', function(store, options){
options.params.year=Ext.getCmp('your-combo-id').getValue();
});
//....some more initialization code
});
If your combo does not always a value (for example, if it does not have a default value when it is loaded, you will have to modify options.params.year=Ext.getCmp('your-combo-id').getValue(); accordingly.