recently i am adding a Google table chart to my project. my task is to add a numeric pager in it. but i only can add
options['pagingSymbols'] = {prev: 'prev', next: 'next'};
options['pagingButtonsConfiguration'] = 'auto';.
it only shows next and previous button. so how can i change it to numeric paging. thanks in advance.
You would have to create a custom event handler for your chart. For instance, you can use a dataView to get 10 rows of data as follows:
var dataView = new google.visualization.DataView(data);
var page = 1;
dataView.setRows(page * 10 - 9,page * 10);
You can then create buttons in any way you'd like (images, etc.) below the chart, and attach an event to each of them. You can have that event show the page number in between, and then when you click the < or > buttons, it will change the page and the number through a function call, such as:
page = page + 1; // Obviously -1 for the minus button
dataView.setRows(page * 10 - 9,page * 10);
Then you'd write the 'page' to your document where the page number exists. You can do a current/max page value by looking at the max rows of data using:
var maxPage = data.getNumberOfRows();
Then you can write some sort of an error trapping function (for if they click "back" on the first page, or try to move to "next" on the last page). Or you can grey out the buttons. Or you can have it loop to the last page. Or whatever.
Whenever you make a change, you just redraw the table using your dataView instead of the actual data.
Related
Now, I am working with jQuery DataTable. Everything is going well in intializing data tables with javascript data array.
In my table, it included remove row button. When I clicked the Remove button of each row, I delete record using following function.
function removeRow(itemList, recordIndex){
itemList.splice(recordIndex, 1);
dataTable.clear();
dataTable.rows.add(itemList);
dataTable.columns.adjust().draw(false);
}
This function performed well with no error. At that, I set false to draw() function to prevent going to first page when delete records in any other page.This one also working for me.
The problem is, when my itemList has 11 records, and I go to second page of data table and delete the 11th record.
So, my itemList will left only 10 record and My data table should show the first page of paging.
But, jQuery data table is not doing that. It still have in second page with no records.
I don't know how to fix that one. I want to show previous page after delete every records from current page.
I know `draw()`` function without false parameter will go to first page. But it go to first page in every deletion.
I only want to go to previous page, when I deleted all records from current page.
Please, help me. Thanks.
I found an hacky way to get the previous pagination when the current has been emptied.
It is specific to jQuery DataTable, since using it's class naming.
Try it in CodePen.
function removeRow(recordIndex){
// Get previous pagination number
var previousPagination= parseInt( $(document).find(".paginate_button.current").data("dt-idx") ) -1;
// Splice the data.
data.splice(recordIndex,1);
myTable.clear();
myTable.rows.add(data);
myTable.columns.adjust().draw(false); // May ajust the pagination as empty... `.draw(false)` is needed.
// Decide to redraw or not based on the presence of `.deleteBtn` elements.
var doIdraw=false;
if($(document).find(".deleteBtn").length==0){
doIdraw=true;
}
myTable.columns.adjust().draw(doIdraw); // Re-draw the whole dataTable to pagination 1
// If the page redraws and a previous pagination existed (except the first)
if(previousPagination>1 && doIdraw){
var previousPage = $(document).find("[data-dt-idx='" + previousPagination + "']").click();
}
// Just to debug... Console.log the fact that only one pagination is left. You can remove that.
if(previousPagination==0 && doIdraw){
}
}
Notice that I used:
#myTable as the table id
.deleteBtn as the delete buttons class
data as the dataTable data
I removed all console.log() and example related code in the code above (but not in CodePen).
"Delete this →" button handler is:
$("#myTable").on("click",".deleteBtn",function(){
var rowElement = $(this).closest("tr");
var rowIndex = myTable.row(rowElement).index();
removeRow(rowIndex);
});
I have 120 columns in kendo grid, and have select all and deselect all functionality.
If I go with for each loop it takes huge time to hide or show all column.
Is there any way to hide/show all columns in one call.
Just want to mention kendo showColumn/hideColumn is very slow.
$(".some-class").each(function(){
var field1 = $(this).data("field");
input.find('label').addClass('enableCheck');
input.find('label').removeClass('disableCheck');
$("#grid-id").data("kendoGrid").showColumn(field1);
}
Well I have created a demo of this kind of scenario for you: Show/Hide all columns
This uses the inbuilt show/hide function for the grid and using a slightly larger grid than yours approx 130 columns on average it is completing the operation in sub 2 seconds. I have added a "timer" so you can see from the point it hits the looping of the columns to the end of the operation how long it takes.
$("#clickme").on('click',function(){
var grid =$("#grid").data("kendoGrid");
var columns = grid.getOptions().columns;
var start = new Date().getTime();
columns.forEach(function(me){
if(me.hidden !== undefined && me.hidden === true)
{
grid.showColumn(me.field);
}
else
{
grid.hideColumn(me.field);
}
//console.log(me);
});
var end = new Date().getTime();
console.log(start,end, end-start);
$("#timer").text((end-start)/1000 + ' Seconds to run' );
});
All this does is gets the columns within the grid and then checks to see if it is currently hidden (if it is then it will show it otherwise it will hide it)
This is just bound to a simple button that you can click underneath the grid.
For this type of operation I think sub 2 seconds is more than quick enough and "feels" about right for this number of columns as depending on how many rows you have on the current page it has to hide all those elements as well.
I was watching Matthew Podwysocki event on https://www.youtube.com/watch?v=zlERo_JMGCw 29:38
Where he explains how they solved scroll on netflix. Where user scroll for more data as previous data gets cleaned up and more adds up (but scroll back shows previous data again).
I wanted to do similar, but I grabbed netflix demo code:
function getRowUpdates(row) {
var scrolls = Rx.Observable.fromEvent(document, 'scroll');
var rowVisibilities =
scrolls.throttle(50)
.map(function(scrollEvent) {
return row.isVisible(scrollEvent.offset);
})
.distinctUntilChanged();
var rowShows = rowrowVisibilities.filter(function(v) {
return v;
});
var rowHides = rowrowVisibilities.filter(function(v) {
return !v;
});
return rowShows
.flatMap(Rx.Observable.interval(10))
.flatMap(function() {
return row.getRowData().takeUntil(rowHides);
})
.toArray();
}
But I'm bit confused on how to pass new data or page data according to the scroll here.. Can someone give little explanation on how I can do the following:
fetch first list (I can do that)
fetch more list as user scroll down (using paging next page)
remove previous fetched data from memory, and refetch on request (scroll up).
Here is how I would do it in general lines. If this seems to give you satisfaction, I'll edit and add more details.
Version 2 : (For first one, see edit changes)
Premises :
The tag containing the dynamic list will be called "the zone".
Each row of the list will be contained in another DIV which can contains anything.
A page is enough rows to cover the zone.
Three javascript "constants" : numberOfLinesOnFirstLoad, numberOfLinesOnPageLoad, numberOfLinesToLoadAfter
JavaScript variables to hold required data : rows[page#], heights[page#], currentPageNumber = 1, maxPageNumber = 0
page# : # is the page number
rows[page#] shall contains a way to get them back from database, not real DOM objects.
Steps / Events :
Add the zone tag.
Load numberOfLinesOnFirstLoad rows.
If total rows height inferior zone height multiplied by three, then load numberOfLinesToLoadAfter rows. Repeat step 3 if rows added, otherwise continue to step 4.
maxPageNumber +=1. Find the next rows that full fills the zone. Add those rows to rows["page" + maxPageNumber] (as an array). Calculate the height of those and add it in heights["page" + maxPageNumber].
Repeat step 4 until no more rows and then continue to step 6.
When scrolling down and page1 (which means last element of rows["page1"]) is not visible, add another below : page4.
maxPageNumber += 1. Load numberOfLinesOnPageLoad rows.
If total new rows height inferior zone height, then numberOfLinesToLoadAfter rows. Repeat step 8 if rows added, otherwise put total new rows height in heights["page" + maxPageNumber] and the new rows as array in rows["page" + maxPageNumber] and continue to the step after entering this one (so either 9 or 11).
Still scrolling down, if page2 is not visible, remove the page1 elements from DOM and adjust scroll position by removing page1.height (heights["page1"]).
Load page 5 (step 7 and 8).
So now, there is page2 to page5 in the zone which page2 and page5 are not visible. If page3 is fully visible, than page4 is not, otherwise a part of page3 and page4 are visible. (Just to indicate possibilities, but not important)
When scrolling up and page2 is starting to be visible (so last element of rows["page2"]), load page1 by using rows["page1"], add page1.height (heights["page1"]) to scroll position and remove page5 from DOM. Here you can either remove it from variables rows && heights and maxPageNumber -= 1, but you can also keep them so that reloading this page is done in one process (so loading a page would imply to check if page definition already exists in those variables).
I have a table on one page in a Livecycle Designer form and would like the repeating row to duplicate to another table on a different page. I have this working on the first table on the first page to the table on the second using the exit event however, if the same information on the second table stays the same, because it is on the exit event, it does not copy to the new table on page 3.
I have this code in table 1 on page 1 on the exit event which works:
xfa.resolveNode("Month2.Performancegoals2.updates.details[" + this.parent.index + "]").projectName.rawValue = this.rawValue;
I thought this code would work using a button which unhides page 2
xfa.resolveNode("Month1.Performancegoals2.updates.details[" + this.parent.index + "]").projectName.rawValue = xfa.resolveNode("Month2.Performancegoals2.updates.details[" + this.parent.index + "]").projectName.rawValue
but this does not work. Actually when a value is placed in the field and the button is clicked, the entered value disappears.
Can anyone help? I'm out of time!
OK, looks like you're assigning values backwards. Values in Javascript are assigned from right to left. So, whatever is on the right of the '=' get put into the left side.
e.g.,
x=5; //assigns the value 5 to x
y=x; //assigns whatever is in x to y
Month1 = Month2; //Month2 is assigned to Month1.
If Month2 is blank, then Month1 becomes blank
I have three Tabs and in each tab, I have a Grid.
The data for each Grid is coming from a database, so I am using rowRenderer to populate the Grids. The following code is common for all three Grids:
<grid id="myGrid1" width="950px" sizedByContent="true" rowRenderer="com.example.renderer.MyRowRenderer">
The rows are constructed from Doublebox objects. The data is populated successfully.
The Problem:
I need to handle multiple-cell editing on the client side. The editing is done via mouse-clicking on a particular cell and entering a value.
As example let's say that the user edits first cell on the first row and the value should be
propagated to all other cells on the same row and in all three Grids (so also the two Grids which the user currently does not see, because they are in tabpanes).
I am using jQuery to do this value propagation and it works OK.
I am passing the jQuery as follows:
doublebox.setWidgetListener(Events.ON_CHANGING, jQuerySelectors);
doublebox.setWidgetListener(Events.ON_CHANGE, jQuerySelectors);
This makes it possible to change the value in 1 cell and the change is instantly (visually) seen in all other cells filtered by jQuery selectors.
The problem is that the value is visually distributed to all the cells, but when I try to save the Grid data back to the database, the background values are the old ones.
I am assuming that ZK-Grid component is not aware that jQuery changed all the cell values. Nevertheless if I manually click on a cell that already has the NEW value (enter/leave/change focus) when I save the grid the NEW value is correct in that particular cell. Maybe that's a hint how can I resolve this.
Code of how I extract the Grid values:
Grid tGrid = (Grid) event.getTarget().getFellow("myGrid1");
ListModel model = tGrid.getModel();
MyCustomRow tRow = (MyCustomRow)model.getElementAt(i);
The model for my Grid is a List of MyCustomRow:
myGrid1.setModel(new ListModelList(List<MyCustomRow> populatedList));
I have a couple of assumptions, but whatever I have tried, hasn't worked. I have in mind that jQuery events and ZK-Events are different and probably isolated in different contexts. (Although I have tried to fire events from jQuery and so on..)
Do you have any suggestions? As a whole is my approach correct or there's another way to do this? Thanks for your time in advance!
Your problem is exactly what you are expecting.
Zk has it's own event system and do not care about your jq,
cos it's jq and zk don't observ the DOM.
The ways to solve your problem.
Use the "ZK-Way":
Simply listen at server-side and chage things there.
I am not sure if not selected Tabs
are updateable, but I am sure you could update the Grid
components on the select event of the Tab.
Fire an zk-event your self:
All you need to know, is written in the zk doc.
Basically, you collect your data at client side, send
an Event to the server via zAu.send() extract the
data from the json object at serverside and update your Grids
I would prefer the first one, cos it's less work and there should not be
a notable difference in traffic.
I post the solution we came up with:
This is the javascript attached to each Doublebox in the Z-Grid
//getting the value of the clicked cell
var currVal = jq(this).val();
//getting the next cell (on the right of the clicked cell)
objCells = jq(this).parents('td').next().find('.z-doublebox');
// if there's a next cell (returned array has length) - set the value and
// fire ZK onChange Event
if (objCells.length) {
zk.Widget.$(jq(objCells).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCells).attr('id')).fireOnChange();
} else { //otherwise we assume this is the last cell of the current tab
//So we get the current row, because we want to edit the cells in the same row in the next tabs
var currRow = jq(this).parents('tr').prevAll().length;
//finding the next cell, on the same row in the hidden tab and applying the same logic
objCellsHiddenTabs = jq(this).parents('.z-tabpanel').next().find('.z-row:eq(' + currRow + ')').find('.z-doublebox');
if (objCellsHiddenTabs.length) {
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).fireOnChange();
}
}
The java code in the RowRenderer class looks something like this:
...
if (someBean != null) {
binder.bindBean("tBean", someBean);
Doublebox box = new Doublebox();
setDefaultStyle(box);
row.appendChild(box);
binder.addBinding(box, "value", "tBean.someSetter");
...
private void setDefaultStyle(Doublebox box) {
box.setFormat("#.00");
box.setConstraint("no negative,no empty");
box.setWidth("50px");
String customJS = ""; //the JS above
//this is used to visually see that you're editing multiple cells at once
String customJSNoFireOnChange = "jq(this).parents('td').nextAll().find('.z-doublebox').val(jq(this).val());";
box.setWidgetListener(Events.ON_CHANGING, customJSNoFireOnChange);
box.setWidgetListener(Events.ON_CHANGE, customJS);
}
What is interesting to notice is that ZK optimizes this fireOnChange Events and send only 1 ajax request to the server containing the updates to the necessary cells.