Develop Reference

How to scroll a grid up/down in protractor?

How can I scroll a grid so that I can fetch all element's text for post-processing? Rows under the grid gets created dynamically as I scroll up/down. I tried doing it through Javascript,but, being new to it, did not get success.
I am using protractor and VS Code.
HTML:
Tried:
var div = element(by.css('.ag-scrolls'));
var lastRow = element(by.css('CSS value of last visible row in the view e.g: 5th element ')); //I have 5 rows displayed at once in the view. Remaining elements are displayed when I scroll.
browser.executeScript("return arguments[0].offsetTop;",lastRow.getWebElement()).then(function (offset) {
browser.executeScript('arguments[0].scrollTop = arguments[1];',div.getWebElement(), offset).then(function() {
// assertion of last possible element/row after complete scroll.
});
});
I gave the locator values for first two lines.

Use browser.executeScript("arguments[0].scrollIntoView();", lastRow)

mouseMove has worked for me. It'll scroll the object you pass to it into view
browser.actions().mouseMove(<element>).perform();

FlexGrid refresh grid with different columns

I'm currently testing wijmo5. One thing I would like to do is after a FlexGrid is loaded, I would like to reload the grid with different columns. Note that I don't want to just hide columns. I want to actually load completely different columns. I've tried calling initialize again with the different desired columns, but that only appends the columns and causes duplicate columns to show up.

The secret here is to prevent the grid from creating the columns for you automatically. You can do that by setting the "autoGenerateColumns" property to false.
This fiddle shows how you can select a set of columns to display on command:
http://jsfiddle.net/Wijmo5/djL2ouk1/
The interesting code is the "showColumns" function which is implemented as follows:
// show the specified columns in the grid
$scope.showColumns = function(cols) {
$scope.flex.columns.clear();
cols = cols.split(',');
for (i = 0; i < cols.length; i++) {
var c = new wijmo.grid.Column();
c.binding = cols[i];
$scope.flex.columns.push(c)
}
}
I hope this helps.

Deleting dynamically created rows in Knockout.js

I'm using knockout.js 2.3.0 and I have a table with dynamically added rows and select lists in each of these rows. Upon changing a date input, the select lists populate with different content. Because different dates will populate the lists with different content, I want to remove any previously added rows because the content may not be accurate.
The issue I'm having is that not all of the rows are being removed. Ex: If I have more than 4 rows, there will always be 2 remaining. The only time all rows are cleared is when there is only 1 row to start with.
Here's the subscribed function for deleting the rows
self.date.subscribe(function() {
//I also tried setting the loop length to a very long number but the same results happened each time
for (i = 0; i < self.customers().length; i++){
self.customers.remove(self.customers()[i]);
}
//now populate the select list and add an empty row - commented out for testing to make sure rows are being deleted
//setCustomerList(self.date());
//self.customers.push(new AddCustomer(self.customerList[0]));
});
I was just testing to see what would happen, and the only way I've gotten all of the rows to remove is by adding multiple for loops which obviously isn't desirable.
Is there a simpler way to remove all dynamically added rows?

If you want to remove all the items in an observable array, use the removeAll method:
self.customers.removeAll();
If you really want to use a loop, you could do so by continuously removing the last (or first) item until there are none left:
while (self.customers().length) {
self.customers.pop();
}

I think you need to reverse the for loop and remove the items from the bottom up. the problem with your code is that the each time an item is removed the length of the array changes.
self.date.subscribe(function() {
var customerLength = self.customers().length
for (i = customerLength ; i >= 0; i = i - 1){
self.customers.remove(self.customers()[i]);
}
});

Figure Out Which Merged Table Cells Would Have Been Clicked?

Is there any way to figure out which cell position is clicked if you have merged table cells? We have 20 cells etc merged together and we would like to figure out if the user has clicked on what would have been for example the 7th cell
We have merged cells which mean specific things but we now need to figure out logically which cell was clicked by a user (even though they are merged).
Is this possible?

You can judge it based on the dimensions of unmerged cells in the same table. Here is an example using jQuery (just because it's much more concise than native JS to demonstrate this point):
var $mergedTd = $('td.myMergedTd'),
$unmergedThs = $('th');
$mergedTd.click(function(e) {
var clickedUnmergedIndex = 0;
$unmergedThs.each(function(i) {
var $th = $(this);
if(e.pageX < $th.pageX + $th.width()) {
clickedUnmergedIndex = i;
} else {
// Stop iterating; we've found the unmerged index
return false;
}
});
alert('You just clicked 0-based cell index #' + clickedUnmergedIndex);
});

I would keep two copies of that table in DOM. One visible and one hidden. You take click events on the visible table, and before you merge the cells, mark the clicked cell (e.g. add a data attribute to it indicating it was marked such as data-marked='1') and copy that table to the hidden one.

How to add Numeric Pager in Google Table Chart?

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.