I am facing an issue inside a React App.
On clicking a button, a new Table row gets generated which contains a Checkbox as well. I have three such rows present on my Screen.
When I am trying to select the Checkbox present on Third or Second row, the Checkbox present on the First Row gets Focused and also gets checked.
Can anyone point me in the right direction, what does this issue mean and what can be the potential cause for this.
PS: I am New to Frontend!!
Related
I'm using material-table to show some data, now I want to select one row at the time to pass the row's data to another component, so being able to select multiple rows at the time isn't what I'm looking for and the main suggestion is to go for a radio button. So is there a way to replace the checkbox on the table with radio buttons or make the selection option to only allow one row to be selected at the time?
According to documentation your hands are tied. But, this might work:
Add selectedRow key to the component which uses MaterialTable
Create some method or function e.g. handleSelection and pass it to onSelectionChange prop. Argument to this func is an array which handleSelection returns
When user select some row, set selectedRow to that row object
If user click on "slelect all" checkbox (top left) - show notification that action is not supported. If there is no way to unselect all checkboxes programatically - unmount and than mount MaterialTable (to reset checkboxes)
If one row is already selected, than another one get selected (which makes two selected rows) - repeat step "4"
I know this is a bit complicated, but it's a best I could think of at the moment
n.b. Another thing you can do (to force users to select only one row) is to hide table on multiple selection and show message about what they can do. Message could be closable. When message get closed fresh table could appear (mount aggain).
Update
Just have found another option that might work for you. Take a look at this page at the "Simple Action Example". There you have buttons instead of checkboxes. I am starting to think that:
options={{
selection: true
}}
is not the right option for you.
I am updating an application written in ADF 11.1.1.3. In almost all of my screens, i have ADF Tables with editable fields and every table has a row selector enabled.
I have a problem where if a user clicks in an editable field, of a table row that isnt yet selected, the field row selector appears to fire off and then the browser loses the focus on the field that the user intended to select.
Per my example screen above, the 2nd table row is currently selected. However, if i click inside any editable field in row 3 (like End Date), browser sets the focus on the field. But then the Table Row Selection listener invokes immediately after, and then takes the focus off the field i originally clicked. This happens on any editable field type.
The most annoying thing is when i update a checkbox of a table row (not selected), the value is immediately overwritten back with its original value.
Currently, the only way to get around this problem, is the user first selects the table row, then updates the field data.
Any experience with this issue? I'm thinking about a client listener or value change listener but wanted to see what your thoughts are.
Thanks!
Update 01:
I set "immediate" property to "true" for the table, still get the same results. I applied immediate=true to the parent Panel Boxes, same results.
Update 02:
The table's Iterator' and Binding's ChangeEventPolicy was set to default (none). But i set it to none anyways. Same results..
Update 03:
Removed validators, same result.
Does your selection listener still retains "#{bindings.xxx.collectionModel.makeCurrent}"? this is used to set the currently selected row as current row, if you have removed this then it means that even when you select the row by clicking on a field, the model still has previous row selected in its iterator.
Folks,
I am trying to display EXT JS with Row Expander plugin in a Visual Force page.
Check this link http://mikhailstadnik.com/ext/examples/nested-grid.htm
As per the link, I am successful in displaying Accounts in first grid and respective Contacts in child grid.
Problem is: When I click on first row, it is expanded and shows the respective contacts.
When I click on second row and first row is not closed, the data which I can see for second row (Contacts) are visible at first row contacts also.
So, I think when second row is clicked, I need to close the first row.
Please suggest me how to do this..
The plugin you are talking about features collapseRow(row) method.
Each time you are trying to expand a row (use beforeexpand event for that) you need to loop through all the rows and collapse expanded ones.
Here is how you check if the row is expanded:
Ext.fly(row).hasClass(this.rowCollapsedClass) // this is referring to plugin instance
I am using EditorGridPanel with cellEditor which acts nearly like Excel. We implemented Arrow Keys to move among rows and
columns. We do row validation when user moves from one row to another (specifically in rowdeselect event) and then save the
record. There is some issues are:
For the last row of the grid, rowdeselect event does not fire, as we do not have any other control after the grid.
rowdeselect event fires if we move from row to row using Tab, Enter & Arrow keys. But when user clicks on another row using mouse - events do not come in correct sequence, so focus moves to the new row, but earlier row not saved. Currently we solved this by calling stopEditing at the beginning of rowdeselect event.
We would like to know how we can solve these two issues and whether there are more robust ways to handle automatic grid saving.
You can fill free to check the problem in our site. -> http://www.softworksbd.com/swazilandlmis/yyyy_stockdata.php
1 ) First of all the event is not firing on the blur of the whole grid and not just the last row. try changing a row and clicking anywhere on the screen but the grid and you will see that no validation takes place (which means your rowdselect does not fire).
You should try and add a blue event to the whole grid that runs your validation scripts.
2) As far as I have checked the event is fired even on another row click so please explain exactly what you mean...
ps
I have viewed only this page in your application:
I have an EXT js grid that uses the CheckboxSelectionModel. The grid is paged. The first column is check-boxes and this columns header is a check box as well. When the column header box is clicked, it selects/delesects all rows on the page, and only that page. The problem is that if on one page you select all, and then go to another, the column header box is still checked. the records are not selected which is correct, it's just the top one that is not updated. I found the code that fires when switching pages. I already have a selModel var set up. I found a condition to check whether or not the column header should be checked, I just don't know how to updated it. can anyone give me an idea how to do this?
Have you tried adding a listener to your grid's data store:
listeners : {
'load' : function() {
grid.getSelectionModel().clearSelections();
}
}
Hopefully the clearSelections() method will also uncheck the header checkbox.