I am using DOJO datagrid version 1.10 What I want is on tab indexing the row in the grid should get highlighted so that user will be able to know on which row the focus is. But I am not getting the row focus.
You could listen on the dojox.grid.DataGrid::onCellFocus event. The event arguments are the focused cell-Object itself and the corresponding rowIndex.
function onCellFocus(cell, rowIndex) {
// first clear selection
grid.selection.clear();
// select the focused row
grid.selection.setSelected(rowIndex, true);
// invoke manually the render method
grid.render();
}
I've created a working fiddle for you, which can be found here.
Related
I have a multipage form with more than 40 fields spread over multiple tabs, and grouped in collapsible fieldsets.
Now I have the case that upon form submission, a field is detected as invalid, and I want to find the field for the user, bring it into the visible area and focus it. So I have to switch to the right tab, open the fieldset if applicable, scroll the field into the visible area and focus it.
I would guess ExtJS has a function for this, but I don't find one. My code:
// Get first invalid field. C&P from Ext.form.Basic.isValid function
var invalidField = me.getForm().getFields().findBy(function(f) {return !f.isValid();});
if(invalidField) {
// TODO: Bring the field to front.
// Now focus the field:
invalidField.focus();
Is there a builtin function available?
Ext JS does not provide a built-in method for doing this specifically, but it does provide all of the necessary utility methods and supports animations. At a minimum, ensuring the form is configured as scrollable, setting the active tab, and focusing on the invalid field is enough to scroll to correct position. I created a fiddle example demonstrating a solution.
Sencha Fiddle: An Example of Scrolling to an Invalid Field in a Tab
tabPanel.items.each(function(tab) {
var formPanel = tab.down('form');
formPanel.getForm().getFields().each(function(field, index, length) {
if (!field.isValid()) {
tabPanel.setActiveTab(tab);
// Focusing an element will set the correct scroll position.
// However, an animation can help the user follow along.
formPanel.setScrollY(field.getPosition()[1], true);
field.focus();
return false;
}
return true;
});
});
http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-getPosition
http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-setScrollY
I am new to Nattable, my requirement is to highlight a selected object of nattable view to different view.
Consider 'View1' as nattable data view, it has following code:
getViewSite().setSelectionProvider(
m_gridTable.getRowSelectionProvider() );
and 'View2' implements ISelectionListener, but 'selectionChanged' of View2 is not getting called when I select any object in 'View1'.
Am I missing anything?
RowSelectionProvider was created using fullySelectedRowsOnly as true value so selection event was not fired unless user selects complete row, changing flag to false worked fine for me.
Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click.
If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.
I already tried to find in the documentation any information about it, but cant find nothing.
Here is a example from the documentation.
https://ag-grid.com/javascript-grid-tree/index.php
example image:
We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...
This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.
onRowClicked(params) {
params.node.setExpanded(!params.node.expanded);
}
This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.
You can listen to events on either a row or cell clicked, and expand nodes accordingly.
For example to expand a row based on a click you could do the following:
onRowClicked: (params) => {
// update the node to be expanded
params.node.expanded = true;
// tell the grid to redraw based on state of nodes expanded state
gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}
This should be in the documentation - I'll update it to reflect this information.
In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.
this one works
onRowClicked(params) {
params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
}
Currently , I am applying mouse hover style to highlight the row of a celltable by using below code snippet.
int rowCount = this.getRowCount();
for(int i=0; i<rowCount; i++){
TableRowElement rowElement = this.getRowElement(i);
rowElement.addClassName("selected-row");
}
.selected-row:hover{
background-color: #DFE8F6;
}
When i click a row in the cell table, the hover style gets removed, and is not highlighting the row. Can someone suggest please how to retain the hover style, even after clicking of a row. Please give some examples.
When you click on a row, the table is refreshed, which removes your style.
GWT already applies a special style to a selected row. If you don't like the way it looks, you can override GWT's CSS class rather than trying to add your own.
I would just add the background-color in a mouse down event as well.
I want to add a special selection model to the celltable. Basically the function i want to have is to select a row on the table which is located on left side, a corresponding form will pop up on the right side.
I know so many people will use the singleSelectionModel with SelectionChangeHandler.
But there is problem with this method.
For example, if I select row 1 on the table. the form pop up. I close the form by clicking the close-button. Later then, I select the row 1 again, the event is not fired, because it is SelectionChangeHandler. I have to select other row before doing this. This is no good.
So I think there are a few ways to do this:
Make the row deselected right after I select the row.
Use click handler to fire the event ( to pop up the form)
Use other selection model with other selection handler to do this. (I have no ideas about this though)
So my questions are,
Does anyone know what kind of other selection handler I can use for this.
If I use the click handler on celltable, will there be any problem?
I just want to learn more about this. So any ideas will be welcome.
Thanks a lot.
Best Regards.
Use NoSelectionModel. It won't update the table view after the row is selected. That is, even if the same row is selected, the change event is fired.
//Here 'Contact' is the datatype of the record
final NoSelectionModel<Contact> selModel = new NoSelectionModel<Contact>();
selModel.addSelectionChangeHandler(new Handler() {
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Contact clickedObject = selModel.getLastSelectedObject();
GWT.log("Selected " + clickedObject.name);
}
});
table.setSelectionModel(selModel);
I have using cell table in my each project. The better way to just deselect row manually as u mention. and make change css such as selected cell table's row look not changed after selection.