Following is my method where tableComponent is the table body element.
This method works fine when the text is visible in a row, but if the row has a scrolling and the text is out of view port, the method fails.
I tried the CSS as well, with out luck...
If I use the scroltoview option, I can get the text, but this is kind of a bootstrap, to scroll to the element, I need to find the right row and column, and to find the row and column, I only knows the text that it could appear in that cell.
This is Java, Selenium webdriver
public IUIElement getRowContainingText(final String text) {
return tableComponentElement.findUIElement(By
.xpath(".//tr[*[self::td|self::th]//text()[contains(.,\"" + text + "\")]]"));
}
Alternate solution-
List<webElement>rows=tableComponentElement.findElements(By.tagnamr("tr"));
for(webElement element:rows)
{
List<String>tabledata=rows.findElements(By.tagName("td"));
String desiredText=tableData.get(index);
//index will be the postion where text will appear in each row
}
Related
I'm using the find method editor.find() to find a specific search phrase in Ace Editor. Using the find method selects and scrolls the search phrase into view but it is not always at the first visible line.
Is there an option to scroll the selected row to the top of the editor?
This works:
var searchResults = aceEditor.find("phrase");
if (searchResults) {
aceEditor.scrollToLine(searchResults.start.row);
aceEditor.clearSelection();
}
I'm trying to create a plugin to add some preset style to a table cell.
Step-by-step:
User click in a cell.
User click on my plugin button in the toolbar
Select a style
A class attribute is add to the closest TD
I'm having a hard time with the 4th point. How can I know where my cursor is in the source? How can I select the closest TD? The cursor must be between a <td> </td>. If there is no TD around nothing happen.
The cursor can be between any <Tag> as long as they are in a <td>.
// nearest element that surrounds your cursor
var el = editor.getSelection().getStartElement();
while (el) {
// if element is <td>, set class attribute and break loop
if (el.getName() == 'td') {
el.setAttribute('class', 'myClass');
break;
}
// otherwise, continue with parent element
// until you find <td> or there are no more elements
el = el.getParent();
}
I am trying to make my chart 508 compliant. Hence in order to make it possible to navigate the chart using keyboard, i want to add anchor elements before every bar column. I tried doing :
d3.select("svg").insert("a",".nv-bar").attr("href","");
but it didnt work.
Can anybody suggest a better way of doing it. Thanks !
Here's one way to do it:
d3.selectAll('.nv-bar')
.each(function() {
var el = this;
d3.select(el.parentNode)
.insert('a', function(){return el;})
.attr('href', '');
});
The insert method will add elements to each item in the current selection, regardless of how many elements the "before" parameter matches.
My solution will add an anchor for each bar in the document, and takes advantage that the insert method can accept a selector string or a function that returns an element to insert before. (Although, somewhat frustratingly, it does not accept a DOM node directly)
Edit: Here's a jsfiddle with an example: https://jsfiddle.net/bgp6atzo/
Is there any way i can hide HOT columns from javascript?
The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.
The HOT has rowHeaders and colHeaders and the data with 20 columns.
Please advise.
OUTDATED SOLUTION
Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.
You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:
var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns
function getCustomRenderer() {
return function(instance, td, row, col, prop, value, cellProperties) {
if (colsToHide.indexOf(col) > -1) {
td.hidden = true;
} else {
td.hidden = false;
}
}
}
What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.
Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.
http://jsfiddle.net/zekedroid/LkLkd405/2/
Better Solution: handsontable: hide some columns without changing data array/object
I am facing problem in Jqgrid. I have a column with hyperlink and on the click of that hyperlink I want row data. Is this possible using Jqgrid. when I am using "getGridParam" I am getting row id as null.
There are two possibilities you can try here:
1) You can use a custom formatter to create the hyperlink, and have a custom attribute on the link where you put in the rowid (prefix the custom attribute name with 'data-' to keep it html5 compatible). Alternatively you could call a javascript function explicitly passing the row id.
2) Instead of the hyperlink's event itself, try using the onCellSelect event of jqGrid where you get the row and column id of the clicked cell, even if its a hyperlink. But this would trigger the event even if the user clicks anywhere inside the cell, not just on the link!.
I'm sure you found the answer to this by now but for some of you using ASP.NET WebForm here is what I used.
Create the Custom Formatter and add it to the column where you want the link to appear:
My columns are from a database I use a Select statement as so:
switch (jqGrdCol.DataField)
{
case "xxx":
CustomFormatter hypLinkxxx = new CustomFormatter();
hypLinkxxx.FormatFunction = "xxxformatOperations"; --> **JavaScript Function**
jqGrdCol.Formatter.Add(hypLinkxxx);
break;
}
Then in the Javascript function:
function xxxformatOperations(cellvalue, options, rowObject) {
return "<a href=somefile.aspx?xxx=" + rowObject[0] >" + cellvalue + "</font></a>"
}
I get the value of the column as a hyperlink.
I had a similar issue and was did look into your question to figure out a solution and I have found out a solution to this.
The solution is by using onCellSelect: function(rowid, index, contents, event)
this gives the rowid and contents ie the content of the cell you have clicked or selected
therfore you can get the entire row of contents which includes your hyperlink as well