I have a grid with singleClickEdit set true.
I want to enter in edit mode when the grid finishes loading or when the user finishes editing a row.
I have tried with API setFocusedCell(rowIndex, colKey, floating) but it just focus the cell without enter editing.
The goal is to build speed editing grid and never use the mouse...
Is there a way to do that?
Thank you in advance!
You can get a reference to the grid by using gridReady/onGridReady callback and then call startEditingCell function on grid.api.
grid.api.startEditingCell(params): Starts editing the provided cell. If another
cell is editing, the editing will be stopped in that other cell.
Parameters are as follows:
rowIndex: The row index of the row to start editing.
colKey: The column key of the column to start editing.
keyPress, charPress: The keyPress and charPress that are passed to the cellEditor
Related
We have a requirement to move the cursor from one editable cell to another automatically in sap.m.table .
I tried all the previously answered blogs but none of the code works.
Has anyone tried similar requirement before ?
Thanks
Tisha
I had this requirement before. I had to automatically focus from input field in column A to the next input field in column C in my sap.m.Table.
How I solved it was like this:
I detected the change of my input A by defining an event handler on the view XML. Then I get by id the input C and use jQuery method to put focus on its HTML inner element.
noobie_sapui5_developer
I am trying select single row of sap.ui.table with checkbox.
There are 2 modes for this table
Multi
Single
In multi selection mode there are checkboxes for each row and multiple rows can be selected - but I want only a single row to be selected
In single selection mode, it allows only a row to be selected - but there are no check boxes.
How to achieve a table with checkboxes with only one selectable row?
It is possible with sap.m.table, but my requirement is to make it work with sap.ui.table.
Why I wouldn't recommend doing this:
Checkboxes (selectionMode="MultiToggle") are usually used to signal the user that he's able to select no, one or more options, while radio buttons (selectionMode="Single") tell the user that he's only able to choose one option.
See: material.io, nngroup, uxplanet-radio, uxplanet-checkbox
In your case, I'd recommend using the selectionMode="Single" and either set the selectionBehavior attribute to Row, RowOnly or RowSelector (SelectionBehaviour).
As #jasbir pointed out, you could use the rowSelectionChange event in order to invoke a function that grabs the index (getSelectedIndex) of the row that was just selected. You can then call the setSelectedIndex function on the sap.ui.table.Table and pass it the grabbed index. This will remove previously selected rows and set the currently selected row as selected.
<Table id="yourTableId"
selectionMode="MultiToggle"
rowSelectionChange="onSelectionChange">
</Table>
And in the controller.
onSelectionChange: function(oEvent) {
var oYourTable = this.getView().byId("yourTableId"),
iSelectedIndex = oEvent.getSource().getSelectedIndex();
oYourTable.setSelectedIndex(iSelectedIndex);
}
Note: Since the setSelectedIndex function triggers a rowSelectionChange the above function gets triggered twice (another indicator that this solution isn't intended behaviour).
Check the SAP Fiori Guidelines for the sap.ui.table.Table for further information.
You can use rowSelectionChange event whenever a selection is changed you can unselect other rows and keep the selected one.
Hope this helps
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);
}
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.
I need to implement a functionality like onclick of a row, whole row must become editable.
For eg: Currently I have 4 columns, each column have edittext cell as the datatype (element). Onclick of a row, each edittext cells must be in edit mode (input mode). Can this implementation be done??
Currently when we click on each component it opens in input mode, but i need to have input mode for all cells on click of a row.
Please suggest and give some ideas.
I think you could do the job with some things in the "databinding" part of GWT :
com.google.gwt.editor.client.Editor