How to edit row of Telerik MVC grid in Javascript - javascript

I am trying to edit a cell's innerText property. The text is shown in the table but the problem is that the row isn't being marked as updated, so when I press my "Save Changes" button the update method doesn't get this row (in the list of rows to update).
I am trying to use this method (updateRow) but so far it has been unsuccessful:
var grid = ("#grid").data("tGrid");
var rowToUpdate = grid.data[0];
rowToUpdate.quantity = 4;
grid.updateRow(rowToUpdate);
When the method is called I get the following exception:
"object does not support this property or method".
in the source of telerik. Does anyone know how to mark a row as updated? Or a better way to update the value of cell in row?

You can use the client-side method updateRow to force updating. The key is selecting the table row you wish to update, as indicated in their example (of course, you don't have to use their $('#Grid .t-grid-edit-row') selector; you can use any selector, so long as it selects the row you wish to update). I believe that your modifying of the cell's innerHTML/innerText to communicate the new value is how its done.

Related

Tabulator : edited cell not showing in table.getEditedCells()

I am using Tabulator to implement an editable table and I encountered an issue.
The user can either manually edit cells one by one (through a dropdown) or select multiple cells and click a button to set them all to the same value.
Then, when the user is done editing, a save button is available and sends everything back to the server.
The save button only saves edited cells (accessed by table.getEditedCells()).
My issue is that cells edited through a button (to set a common value for multiple cells) are not marked as edited, thus are not present in the table.getEditedCells() list.
Is there a function to force a cell to be marked as edited ?
Or would you have suggestions on how I should change the save button behavior ?
Some code
At first, the buttons updated the cell values through
row.update({column:value}); but this didn't trigger the cellEdited callback.
I now use :
var cell = row.getCell("field");
cell.setValue(value);
fixEditedCells.push(cell);
cell.setValue triggers cellEdited callback (the change can now be undone with history table.undo() ; that wasn't the case when I used update)
My temporary fix is to store the cells modified through the button in an array (fixEditedCells) and then merge it with the .getEditedCells() when saving...
Thank you for your help !
Cells only get flagged as edited by user interaction not by use of the 'setValue' function. This is by design to allow developers to update the table without it being registered as an edit by the user.

Slickgrid: value entered in a cell disappears after moving out of cell

In a Slickgrid cell, i click and enter a value. Once i move out of this cell using a mouse click the value entered disappears. But if i enter the value in the cell and tab out then the value stays in the cell. I would like to know if this should be manually handled.
OnClick event i am calling
grid.updateRow(grid.getDataItem(args.row));
grid.invalidate();
grid.render();
Thanks,
Asha
You're doing something wrong, updateRow() argument is a row index in the grid but you're passing an item object so that won't work, also if I remember correctly updateRow is only used for re-rendering or refreshing a specific row index, it's not for updating the data but more for rendering purposes (perhaps the naming is confusing).
I personally only use the SlickGrid DataView and the functions to call for updating items are different, you can see how to that in this other Stack Overflow answer Change slickgrid cell data after edit
If you're using the grid object, as it's written in the other SO answer I referenced earlier, then it would be
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Personally I always use the SlickGrid DataView as it's much more user friendly and comes with a lot more benefit like data grouping and many other functionalities. Again take a look at the other SO answer that I wrote in previous paragraph, that is the correct way to do it

How do I set the focus on the first editable cell in a row onRowClicked?

I have an ag-grid that I need to be able to edit via the keyboard. I have the editType set to fullRow and I'd like to be able to add javascript so that when I fire the onRowEditingStarted event, it goes to the first editable cell because occasionally, my grid is larger than the screen.
I can get the rowIndex, but I cannot get a hold of the collection of columns to look at the properties. I want to keep the rowIndex, but get the first editable column and set focus there. (Right now, it's whatever is incidentally selected to fire the event.)
Does anyone have an example that I can look at?
I've tried looking through the objects produced here:
onRowEditingStarted: function(params) {
console.log("started row editing");
console.log(params);
}
This gives me an event where I can get the rowIndex and the columnApi. I would expect somewhere in here is a collection to do a for loop, but I don't see it.
You could do something like in your onRowEditingStarted
// scrolls to the first column, or first editable column. you can pass in the correct index
var firstEditCol = params.columnApi.getAllDisplayedColumns()[0];
/////
params.api.ensureColumnVisible(firstEditCol );
// sets focus into the first grid cell
params.api.setFocusedCell(params.rowIndex, firstEditCol);
This example from docs is a good starting point

How can I change the value of an Oracle APEX page item using JavaScript?

I created the links in the left-most column to target a JavaScript function and I can successfully pass through the value of the row ID to that function.
Once clicked, a modal pops up to present a form to update the fields. However, I need the fields in the modal to be populated with the information from the row clicked. I figured I could create a hidden page item (P2_SONG_SELECT) to store the row ID so that I can use the value in my query for the data. My problem is I haven't been able to assign the row ID value to the application item.
Here is my JavaScript:
Each 'Edit' button successfully uses this URL target:
javascript:viewEditSong$(#Row_ID#).val();
to call this function:
function viewEditSong(Row_ID) {
alert(Row_ID); // successfully alerts the Row ID
$("#P2_SONG_SELECT").val() = UA_ID; // fails to assign
$("#EditSongWindow").dialog('open'); // open the modal
}
How do I properly assign the page item the value passed in?
Elsewhere I use simliar syntax effectively:
ajaxRequest.add("P2_FILE_MAIN", $("#P2_FILE_MAIN").val()); // this works fine
By 'application item' I presume you meant 'page item' as per your question title, since you're prefixing with page number.
Use this to set a value on the browser.
$s('P2_SONG_SELECT', 'xyz')
http://docs.oracle.com/cd/E59726_01/doc.50/e39149/javascript_api.htm#AEAPI269
Scott's post effectively solves your problem by using the built in APEX set method, but as an aside, you are attempting to use the jQuery val() method in the wrong way.
Instead of:
$("#P2_SONG_SELECT").val() = UA_ID;
You should use:
$("#P2_SONG_SELECT").val(UA_ID);
Have a look at the documentation for val().
http://api.jquery.com/val/#val2
You can see that the usage of the function differs depending on whether you want to set or retrieve a value.

How to add a row below the currently selected row (based on a dropdown input) using jQuery?

I have a table with a bunch of rows. In the last column of every row, there is a dropdown. When the dropdown changes, I need a new table row to appear below the row where the user selected the dropdown item. However, I also need the new row to have different data depending on what was selected in the dropdown.
Is any of this possible using only jQuery?
Note that I'm using ASP.NET for back-end development, so if a solution can be found without using ID's that would be great.
$("table select").live("click",function(){
var row=$(this).parent().parent();//add some .parent() untill you get the TR element
var val=$(this).val(); //<select> value if you want to use it for some conditions
$("<tr><td>....</td></tr>").insertAfter(row);
})
It's simple enough to add the HTML using JQuery. However, if you intend to save this data back to the server, the default ASP.NET process (using ViewState) will ignore the new rows. Instead, you would need to directly read the submitted form properties.
To learn how to add a row, look at the suggestions here: How to add a new row to a specified table with jQuery?

Categories