How to set focus and open the grid cell editor of a newly inserted row in vaadin 8 grid? - vaadin-grid

Is it possible to focus and open the grid cell editor directly after inserting a new row? I have searched a while but I didn't find anything helpful.
I am inserting rows with
grid.setItems(theListWithItems);
After the insertion the editor is closed and I have to double click the row to edit it.
I want the editor opens immediately after inserting the new row.
Any help is highly apreciated.
Thanks in advance

Since Vaadin 8.2 you can now call editRow() on the grid editor
grid.getEditor().editRow(theListWithItems.size() -1);
to open the editor for the newly inserted item. But there is no focus on it, you still have to click (once, no doubleclick) into the column that you wish to edit.
However, the row is not focused only by calling editRow(). To focus a certain column I have not found a simple function for it, but I have found a way to do it nevertheless:
Each column needs a defined Editor-Component (i.e. a TextField). For the column that you want to be initially focused, define a memberfield so it can be accessed when you add a new item. Then - after you call editRow() - you can call focus() on that Editor-Component.
private TextField fooEditorTextField = new TextField();
private createGrid(){
// create your grid as usual
// define Editor components for grid
grid.getEditor().setEnabled(true);
grid.getColumn("Foo").setEditorComponent(fooEditorTextField );
grid.getColumn("Bar").setEditorComponent(new TextField());
}
private void addNewItemToGrid(){
MyItem newItem = new MyItem();
theListWithItems.add(newItem);
grid.setItems(theListWithItems);
// open editor for new Item
grid.getEditor().editRow(theListWithItems.size() -1);
// Focus the "Foo" column in the editor of the new item
fooEditorTextField.focus();
}

Related

Constant values in DataGridVIew

I have a DataGridView with 3 columns.
I need the first two columns remain constant, These columns always have to be the same and the user will not be able to enter a different value to these.
The values for the two first columns of the DGV are in textBox1 and textBox2.
I need that when the user is going to add a new row in the DGV the first two columns automatically fill with these constant values and set the focus to the third column.
Thanks in advance
If you don't want the user to edit the first two columns, just set their ReadOnly property to true:
this.dataGridView1.Columns[0].ReadOnly = true;
As for your other criteria, first set the following property to limit control of when a new row is added (ex. click of a button):
this.dataGridView1.AllowUserToAddRows = false;
Then create your own method to add new rows when needed:
private void AddNewRow()
{
DataGridViewRow row = new DataGridViewRow();
row.CreateCells(this.dataGridView1);
row.Cells[0].Value = this.textBox1.Text;
row.Cells[1].Value = this.textBox2.Text;
this.dataGridView1.CurrentCell = row.Cells[2];
this.dataGridView1.BeginEdit(true);
}
Technically, you could do this when AllowUserToAddRows == true by handling the DataGridView.RowsAdded event and the above code slightly modified, but you'll get an annoying behavior where as soon as you enter one character into the new row, 3rd column, another new row is added and the editing cell loses focus (probably before you actually entered anything useful).

RadGrid EditColumn Insert Data to an Edit Field from a RadGrid in a RadWindow

I have a telerik:RadGrid that contains Bound Data,
I am calling Popup Edit Control Of RadGrid, I am getting all the fields and edit works fine.
What I want to do is from the Edit Popup, Edit one of the fields (Which is a RadTextBox) by clicking a button to open a RadWindow, this Window Contains another RadGrid with user details and one of the column with a button that executes RadGrid_OnCommand event, I am passing one of the values of the Grid by:
CommandArguments='<%# Eval("UserName")%>'
How can I place this value to the RadTextBox.Text in the Edit PopUp, So that I can update the grid with the selected value?
I would really appreciate any help. Thank you in Advance
I solved the issue by geting the grid row, which is in edit mode so I got the value of which row I need to change and updated its Editible item by ID using this code:
var rowid = RadGrid1.EditIndexes[RadGrid1.EditIndexes.Count-1];
GridEditFormItem rowEditControls;
foreach (GridDataItem row in RadGrid1.Items)
{
if (row.ItemIndex == int.Parse(rowid))
{
rowEditControls = row.EditFormItem;
((rowEditControls as GridEditableItem).FindControl("ID") as RadTextBox).Text = e.CommandArgument.ToString();
}
}
I Hope this will be helpfull for someone, I find it valuable for customising your edit forms.

Why delete does not work on CKEDITOR when selected?

I'm having a inline editable div. I can type, delete, add. Works great. I wanted the text within he div to be selected on focus (or if you click it). So I added the following to the code
var editor = CKEDITOR.instances.div#{attr};
var element = editor.document.getById('div#{attr}');
editor.getSelection().selectElement( element );
This works too. Fully selected on focus. However, if I press the delete key or any other character key to overwrite the programmatically selected text, it doesn't change. It's as if more than only the text is selected, and the browser doesn't let me delete it. If I select the text manually, it works.
The selection#selectElement method will start selection before passed element and end after it. This means that not only editable's content will be selected but also non-editable parts of contents outside it and therefore selection may not be editable.
This is a correct solution:
var editor = CKEDITOR.instances.editable,
el = CKEDITOR.document.getById( 'editable' ),
range = editor.createRange();
editor.focus();
range.selectNodeContents( el );
range.select();
But the easiest solution is to use selectAll command defined in selectall plugin:
editor.execCommand( 'selectAll' );

DataGridView: how to make scrollbar in sync with current cell selection?

I have a windows application with DataGridView as data presentation. Every 2 minutes, the grid will be refreshed with new data. In order to keep the scroll bar in sync with the new data added, I have to reset its ScrollBars:
dbv.Rows.Clear(); // clear rows
SCrollBars sc = dbv.ScrollBars;
dbv.ScrollBars = ScrollBars.None;
// continue to populate rows such as dbv.Rows.Add(obj);
dbv.ScrollBars = sc; // restore the scroll bar setting back
With above codes, the scroll bar reappears fine after data refresh. The problem is that the application requires to set certain cell as selected after the refresh:
dbv.CurrentCell = dbv[0, selectedRowIndex];
With above code, the cell is selected; however, the scroll bar's position does not reflect the position of the selected cell's row position. When I try to move the scroll bar after the refresh, the grid will jump to the first row.
It seems that the scroll bar position is set back to 0 after the reset. The code to set grid's CurrentCell does not cause the scroll bar to reposition to the correct place. There is no property or method to get or set scroll bar's value in DataGriadView, as far as I know.
I also tried to set the selected row to the top:
dbv.CurrentCell = dbv[0, selectedRowIndex];
dbv.FirstDisplayedScrollingRowIndex = selectedRowIndex;
The row will be set to the top, but the scroll bar's position is still out of sync. Not sure if there is any way to make scroll bar's position in sync with the selected row which is set in code?
I found an answer to resolve issue. As I mentioned that the control does not have methods or properties to set the correct scroll bar value. However, the scroll bar and the DatagridView content will display correct if there is an interaction directly towards to the UI such as touch the scroll bar or grid cell. It looks like that the control needs to be refocused and a repaint.
Simply use the following codes does not cause the scroll bar reset:
dgv.Select();
// or dbv.Focuse();
The way I found is that I have to make the DatagridView control disappear to back again. Fortunately, I have a tab control with several tabs. Then I switch the tab to get scroll bar reset:
int index = myTabCtrl.SelectedIndex;
if (index == (myTabCtrl.TabCount)) {
dgv.SeletecedIndex = 0;
}
else {
dgv.SelectedIndex = index + 1;
}
myTabCtrl.SelectedIndex = index;
If you don't have any way to hide the DatagridView on your form, you could simply minimize the form and then restore it back.
The problem is that there will be a fresh on the UI.
It seems, TAB, SHIFT+TAB, END keys don't always bring last column into the visible view.
The following code inside the CurrentCellChanged event handler seems to fix this issue (vb.net):
If Me.MyDataGridView.CurrentCell IsNot Nothing Then
Dim currentColumnIndex As Integer = e.MyDataGridView.CurrentCell.ColumnIndex
Dim entireRect As Rectangle = _
Me.MyDataGridView.GetColumnDisplayRectangle(currentColumnIndex, False)
Dim visiblePart As Rectangle = _
Me.MyDataGridView.GetColumnDisplayRectangle(currentColumnIndex, True)
If (visiblePart.Width < entireRect.Width) Or (entireRect.Width = 0) Then
Me.MyDataGridView.FirstDisplayedCell = Me.MyDataGridView.CurrentCell
'OR Me.MyDataGridView.FirstDisplayedScrollingColumnIndex = currentColumnIndex
End If
End If

Datatable full row inline edit

I am working on a DataTable where allow user to add new/modify and delete data. BUt save the final data to database only at the end of the page.
Can i know when i click on a cell, how do that enable all textboxes in the entire row to be in editable mode? And when i mouse out of that row or press on tab at the last column of that row, how do it disable the editing mode of that row?
The online example only allow edit by column - https://editor.datatables.net/examples/inline-editing/simple.
I tried to modify the .Edit in Content\assets\pages\scripts\table-datatables-editable.js to below. I can see the row is in editable, but it dont allow me to edit and how do it enable the mouse in and mouse out?
table.on('click', '.edit', function (e) {
Become
table.on('click', 'tbody > tr > td', function (e) {
To disable the editing mode after mouse out and tab out from the last column, below is what I try:
$(this).childern().first().blur(function() {
saveRow(oTable,nRow);
});

Resources