How can I make DataTables work with both a button in each row AND a selectable row? - datatables

With DataTables, I know how to get the following to work, independently:
Let a user click on a row and go to another page
Add a button to a row in one column and have it work
What I don't know how to do is to get them to work together. For a row, if the button is pressed then execute that function, otherwise, if another part of the row is selected, go to the next page.
Right now, when the button is pressed, both functionalities happen. How do I get it to work like I want to? I'd really like to avoid adding some "View" button on each row to go to the next page.

I'm putting #Priyank Panchal's comment reply into the answer. I changed
"<a href='javascript:updateUser(" + row.id + ",0)'>Disable</a>
to
"<a onclick='updateUser(event," + row.id + ",0)'>Disable</a>
including the event as a parameter and then in the updateUser() function, call
e.stopPropagation();

Related

Selenium/Razor App: How to get a button ID from first row inside list?

I have a list with several rows and columns. Each row has a button called "Show Trail Details".
During the test, i click twice on the "Date" column title, to have the latest entry in the list in the first row.
I need to get the ID of the button inside the first row.
The IDs are changing all the time. So its either:
//tbody/tr[1]/td[6]/button[1]/span[1] or //tbody/tr[1]/td[4]/button[1]/span[1] and so on.
I tried to copy the HTML, but it looks weird when i run the html code.
The inspect looks like this:
Is there any way how to get that ID?
Thanks!
I need to get the ID of the button inside the first row.
But there's no "id" attribute on either the td, button, or span elements?
Or do you mean the '_b1_685ddfc4-de...' attribute?
If the id is just a means of getting access to the first button then you could just use something like:
WebElement firstShowTrailDetailsButton = driver.findElements(By.cssSelector("td[style='text-align:right'] button.mud-button")).get(0);

Kendo-Vue Hide button in column?

i'm struggling with this one, i need to hide a button, i mean a command button based on the value of a column.
i grab the following example from kendo pages, i would like to show/hide the button "View Details" based on the "Discontinued" value.
i've already tested with :visible or :hide properties without success.
https://stackblitz.com/edit/e1fre3
does someone know how to get this working?
The command option is expecting string or array so this is an updated stackblitz example that worked at my side - https://stackblitz.com/edit/e1fre3-wnzfer?file=index.html

Get the value of a cell on a ASPXGridview based on the button click

I have a ASPXGridview with a button as the first column for each of the rows. When I click a button I want it to perform a callback which will get me the value of the cell next to the button click. I'm a bit stuck on this so any advise would be great.
Thanks
I created a call back function to get key field name from a row on selection changed.
Then when I click on the button is gets the selected keys on the page.

Programmatically set dgrid row as active

I'm trying to programmatically set a dgrid row as active, not just selected. I have a dojo dgrid OnDemandList which is using the Selection and Keyboard Mixins.
Using the select(row) method I can programmatically select a given row, but that row is not active. When a row is active, I can use the Up and Down arrow keys to navigate to the rows above and below it. When a row is just selected, the row is highlighted but the arrows keys do not work.
Clicking the row with the mouse will make it active and selected, but I'm trying to build my interface to be 100% usable with just the keyboard.
Ok, took me awhile but got it figured out. What I was really trying to do was add focus to a row. The code for doing that was in dgrid/Keyboard.js under the _focusOnNode method.
The actual code to change focus from row currentFocusedNode to row focusedNode is:
if(currentFocusedNode){
// Clean up previously-focused element
// Remove the class name and the tabIndex attribute
put(currentFocusedNode, "!dgrid-focus[!tabIndex]");
if(has("ie") < 8){
// Clean up after workaround below (for non-input cases)
currentFocusedNode.style.position = "";
}
}
if(has("ie") < 8){
// setting the position to relative magically makes the outline
// work properly for focusing later on with old IE.
// (can't be done a priori with CSS or screws up the entire table)
focusedNode.style.position = "relative";
}
focusedNode.tabIndex = grid.tabIndex;
focusedNode.focus();
put(focusedNode, ".dgrid-focus");
The code above is really just a code fragment, for it to work you will have to declare "dojo/has" and "put-selector/put" first as well as define the currentFocusedNode and focusedNode. But I'm leaving that as an exercise for the reader ;-)
Also note that this only changes the "focus", it will not select the focusedNode but that can easily be done using grid.select(focusedNode);

Seaside/Smalltalk - how to highlight a row in a table?

Is there currently a way to highlight a row in a table? For example, I would like to list a table of entries and be able to highlight a row and click Process. I can't find any examples of this online - I'm sure there's a way though, right?
Highlighting the row could be done based on a radio button - a user selects the radio button for the row they want to update, and then click Process or whichever button they want, and that action would be performed for that row.
Any help on where I should look (or just a quick example) would be greatly appreciated!
If you're going to use a radio button, try add a jQuery action on it.
Something like:
onClick: ((html jQuery: #tableRowId) toggleClass: 'highlight')
Then have CSS that'll highlight the row
.hightlight {
background-color:light-yellow
}
If you need a more extensive example, let me know.