Example:
Table poped in Modal
There is a existing functionality in java application when we click on search button, It will pop up a modal window(like data table grid) and shows data in table format with filtering and sorting options, when we select the record from table it will be selected in existing form. How to achieve this using ReactJs and react-bootstrap ? any library to import and work on this requirement ?
Filtering, Sorting dropdowns...
Col1 Col2 Col3 +ADD row
--- ---- ----
When selected the row..
Col1 Col2 Col3 -Del row
Ok. When selected the row, the values will shown in main form
I think the two main competitors here are:
ReactDataGrid, also known as react-data-grid and https://facebook.github.io/fixed-data-table/
At least in the case of react-data-grid, it supports the features you are asking for, but there is work to get it integrated. It provides UI to allow users to request sorting and filtering, but you have to actually sort and filter the data in response to the event. It supports UI to allow in-place editing, and you can add rows dynamically, but you have to add buttons on the UI and respond to them in the appropriate way.
In react, getting a selection from a Modal dialog back to a detailed form view of an Object would normally happen through a store like redux and react-redux.
Getting all of this up and running from scratch is not a trivial task and would take a few days at least.
Related
Scenario is based on the 2nd column value I need to click on check box lie in first column.
Problem is by default table displays 5 rows of data, in this case the element is getting detected properly and check box works. But if the record is not in displayed 5 rows I have to use the number of item dropdown to load more rows in table in this case the elements has stopped detecting which is available in first 5 rows as well.
So far I checked no change in XPATH and page scrolls a bit so tried using Actions as well to move to the element and click but did not work.
Things seems to be working after using Actions/ActionChain instead of find_element()
I have a table similar to below in a WPF application.
We are using Silk Test 17.5 using VB.NET.
Table is dynamically loaded based on latest data.
I need to click on 'Default' ( Link) for specific row.
e.g. I need to click on 'Default' link for Trump1 , Trump2 row.
How should I do it? All locators of default links are same and I cannot differentiate between them.
Is there any I can append First Name locator to Default to figure out which locator to click?
Tokci
SilkTest has a framework for supporting such custom controls and a nice tutorial here
Theoretically you would have to:
List all the methods on the control
From the previous listing (or by talking with the developers) look up the method to access the rows inside the control
Filter your rows and get the one which is interesting for you
From the row you can get the cell by following the same pattern(find out the method which gives acces to it, get it, filter)
Click on the Link
Of course as the tutorial tells you, if you do not want to always do these iterations you should create some higher level utilities where you can just get the Cell at once. Example: GetGridViewRowCell(gridView, cellRow, cellColumn) where cellRows can be a more sophisticated filter object where you describe which cell must have which value in order to identify the proper row
Assuming the table has a hierarchical structure similar to HTML, you should be able to do the following:
Locate a cell in the row you are looking for that is easy to find, e.g. //WPFDataGridCell[#text='Obama'].
From that cell, move up the hierarchy one step using ...
Now you're in the correct WPFDataGridRow, search down again for the row's "Default" link with //WPFHyperLink[#caption='Default'].
Putting it all together, you'll get a locator like //WPFDataGridCell[#text='Obama']/..//WPFHyperLink[#caption='Default'].
Of course this is only an example based on the information you provided, so if you try it, make sure to pick the attributes with Silk Test's locator spy to make sure you get the correct values.
I am using datatable (v1.10.2 with jquery 1.9.2) because I like the out-of-the-box features (searching/sorting etc). However, now I want the ability to:
1) use animations (sliding) when showing/hiding a row
2) have the hidden row available in the DOM to change (ie, it would exist but have a display:none).
My current code to create the table looks like the following (where formatChild() returns html for a table):
if (row.child.isShown()){
row.child.hide();
tr.removeClass('shown');
} else {
row = row.child(formatChild());
row.show();
tr.addClass('shown');
}
I am using several services to change data in the child row's table via ajax and want to be able to change that data even when the row is hidden. I know I can create a map in memory and use the information in the stored map when I show the child row, but to me it is much cleaner to change the hidden row immediately.
I was hoping I could do a row()child(), modify the row, then call row()child().show() but the row isn't created in the DOM after the row.child().
Regarding the animation, I found an answer here but it involves changing the datatables code :(
I considered just using jquery to add a row to the datatable and hide it, but I couldn't find a good way to "attach" it to the primary row for sorting.
The plan I am currently leaning towards is to add a div to my primary table row that I will show/hide/update rather than using child rows at all.
What is the best practice for managing these hidden areas in a datatable (and showing them with animation)? ty
In case anyone else has the same question, I ended up using a DIV in the row rather than using DataTables' child row. When I add a new row to the datatable, the div is hidden then I hide and show (slideup/slidedown) on a click event. This gives me the nice animations, keeps the sorting simple, and let's me change information in the hidden row. Interestingly, the DIV contains a table and the text that is in that table when I create the new row is searchable; however, the text in the table that my ajax call adds/modifies is not searchable. I'm looking into how I want that to work (and may keep the div out of the search altogether if possible).
May I know if it's possible to have a drop down box in every row in the Rally Table?
It is. Check out this example here (scroll down to Displaying Components in Cells):
http://developer.rallydev.com/help/tables
If you'd like to also make an update to the data when the value of the dropdown changes you'll want to wire up a listener to the onChange event and then use RallyDataSource's update method to change the data in Rally.
I have a Grid with say 10 rows and 5 columns. suppose the first column is "Name"
So the data would be some thing like
Name
abc
xyz
pqr
Now My query is, I want to Expand the Row on "abc" click, i.e. on "Name" columns data click.
And wanted to show the data of the other columns from the same row.
I have attached the image , Hope this will clear my requirement.
In the image it is shown that, the RowExpander, we can make the row expandable. I wan the same functionality but not on click the Plus image, but on the name of the first column. i.e. from the above image when user clicks on "3m Co" from the company column. the Row should get expanded. i.e. what currently displayed in the image.
My advice is to stick with the rowexpander plugin - it's UI is much more user friendly than what you want to do.
The other way is to use rowbody and add custom functionality to collapse the rowbody with an itemclick listener - yeah good luck with that :)