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);
});
Related
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();
}
the normal way in kendo ui grid update data is add a edit popup.
What I want is, Think I change a value in text field.In update I added switch case and change the submit value. Then It will add that value and return that values to the grid. But I want to do is when get the return value and change it and show a different value in the grid.
Here is a example.....
In edit popup it has a input text field. I submit a value as "A". In the update I add a switch tells that If the value is "A" change the submit value to 1(number one).
Then it submit the value and show the value in grid as "1" not as the "A".
How I do this ???
I think you want a custom handler. In the grid you toss in this:
edit: function(e) {onEdit(e)},
and then on top of the page you do whatever logic you want to do
function onEdit(e) {
if (true) {
$("#Whatever").text('Hello') //Whatever in this case is a field in grid
In many websites, when we scroll down a button would appear. It says 'Top'. when we click it, then it will take us to the top of the page.
My question is:
I want to have similar functionality in a table but horizontally.
Let me explain, I have a table in my application which has 100+ columns. So if I want to go to the last column, then I have to scroll horizontally till i reach last column. I am using Jqgrid. Is there any implementation in jqgrid which will take us to the last column just by clicking a button or something? Anyone tried?
Here is a possible solution: https://jsfiddle.net/99x50s2s/38/
Add a custom button to your jqgrid as shown in the fiddler, get the width of the 'ui-jqgrid-bdiv' class and scoll to right on the button click event,
.jqGrid('navButtonAdd', '#sg1' + "_toppager", {
caption: "See last column",
title: "Last Column",
onClickButton: function () {
$('.ui-jqgrid-bdiv').animate({
scrollLeft: $(this).width()
}, 'slow');
}
});
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.
I have a in-line delete button, I want to append more data to the delete message pop-up like this:
"Delete selected row with code = 7 ?"
I'm using the following in the delOptions:
beforeShowForm: function ($form) {
var sel_id = $("#list").jqGrid('getGridParam', 'selrow');
$("td.delmsg", $form[0]).html("Delete record with <b>code=" + $("#list").jqGrid('getCell', sel_id, 'cd') + "</b>?");}
The problem is If I click on the delete button without first clicking on any part of the row, the selrow is either null or it gets the previously selected row not the currently selected!
How do I make the row selected when clicking on the trash bin icon?
Any help is appreciated
I suppose that you use the example which I posted in the old answer. It was written in case of usage of the Delete button (the part of form editing) from navigator bar.
There are one hidden row in the Delete dialog which could help you. Try this one
beforeShowForm: function ($form) {
// get comma separated list of ids of rows which will be delete
// in case of multiselect:true grid or just id of the row.
// In the code below we suppose that single row selection are used
var idOfDeletedRow = $("#DelData>td:nth-child(1)").text();
$form.find("td.delmsg").eq(0)
.html("Delete record with <b>code=" +
$(this).jqGrid('getCell', idOfDeletedRow, 'cd') + "</b>?");
// REMARK: in old versions of jqGrid you can't use $(this) and
// will have to use something like $("#list")
}