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
Related
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!!
I have a 2 columns page and I want that on small screens the first column to be replaced by a small column with just a button on it. When you click the button the original first column appears again (like it is on Wordpress for example).
Thank you.
You cannot reduce a column into a button on a breakpoint (not without adding a lot of code), but you can:
Add a new column with class="column small-12 hide-for-medium", and put the button there... this will keep the column hidden from medium up.
The collapsible column (the first one) will have the class hide-for-small-only, so this will be hidden on small breakpoint; please add an id to this column.
Using jQuery, on the button click, hide/show the first column (the one with the ID, you sould use slideToggle() from jQuery), and that's it.
Hope this helps.
I am having a situation where I want to add input box at the end of the table. Is it possible to do this in ui-grid. I know rowTemplate, but it applies to whole column. I want to apply only to the last row of the table.
I'm displaying an ng-grid and I would like to change a particular cell's content based on an update. I don't want to make the cell editable. I'm instead popping up a dialog when they click on a Row. When they submit the data, I update the db using ajax, but I don't want to refresh the page. I'd like to update the cell to say something like "Updated". I haven't found anything in documentation or examples that would allow me to modify a particular cell on the fly. Anybody wanna point me in a right direction?
I do something similar with my data. Use a row or cell template to show your dialog using ng-click and pass a reference to the row.entity to your dialog. Then you can just update the data on the row.
I created an example below where I have a cell template that has an event to capture the row, column, and cell data. Then I allow for the user to update the value, and on the button click I update the row with the new value.
Plunkr here:
http://plnkr.co/edit/JQ7mtD?p=preview
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: