We Keep Coding

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.

Callback for Yii2's GridView CheckboxColumn

I have a GridView (Yii2) and one of the columns is a boolean type of data. I want to be able to toggle that value and have it saved in my database.
I need a callback for that, but I don't see CheckboxColumn having one. How can I achieve this?

Don't go looking too far. Just use the checkboxOptions-property of your column setup to add a specific class to all checkboxes. Then you can use a jQuery event to listen to changes and report them back:
$('.checkbox-column').change(function(e) {
var checked = $(this).is(':checked');
$.ajax('route/target', {data: {id: $(this).closest('tr').data('key'), checked: checked}});
});
Yii's GridView normally renders a data-key-attribute for every row (on the <tr>) that you can use to identify the actual record to update.
As an alternative: $('input:checkbox', $('#w0')).change() could also work, assuming you don't want the extra class and that the GridView is your first widget.

All the GridView column can have a callback function. you can set the value attribute of the every singole column with result of the callback function.

How to edit row of Telerik MVC grid in 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.

jqgrid hide() row issue

I'm using latest version of JqGrid, and I've learned here that there is now build-in hding method. I figured out how to hide rows using
$("#"+rowid).hide();
But here I faced the very big issue. My jgrid is limited to display not more than 10 rows per page, and often happen that after using the above code, my items starting to be displayed at i.e. 10th page.
Thanks in advance .

The hide method is not part of jqGrid, but rather is part of jQuery itself:
Hide the matched elements.
So that probably explains why it is not working the way you expect. What exactly are you trying to do?

jqgrid allows to delete rows. See "Live data manipulation - Delete row" example on examples page.
$("#dedata").click(function() {
var gr = jQuery("#delgrid").jqGrid('getGridParam','selrow');
if( gr != null )
jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
else
alert("Please Select Row to delete!");
});
See also delGridRow method documentation.
Another option is to change data source (it depends on method was used for filling the table), delete rows from it and re-fill the table.

Dynamically Expand Subgrid in a loop - JQGrid

I have Grid with a subgrid using subGridRowExpanded.
And I want to dynamically expand some rows of the grid so I wrote following
in GridComplete Event of First Grid.
ids is array of row ids of my Grid
for(int i =0; i< ids.length; i++) {
//Checking with condition
$("#myGridName").expandSubGridRow(ids[i]);
}
I also tried with following code, But for some reason checkboxes in GridComplete of second level, is added only for last expanded row.
$("#myGridName").expandSubGridRow(ids[0]);
$("#myGridName").expandSubGridRow(ids[1]);
Above code expands appropriate rows. But,
In GridComplete event of Subgrid, I've check boxes in each row.
So, Here I need to check some of the Chekc boxes.
But the Problem is,
The subgrid_row_id is getting wrong
i.e. ID of last subgrid to be expanded is assigned in SubGridRowExpanded of Parent Grid.
Note : I manually adding checkboxes to each row in subgrid
Thanks in Advance.

If I understand you correct you have very close problem as discussed in the answer. What you try to do seems the same what expandOnLoad: true property of the subGridOptions option should do. Like I described in the answer jqGrid don't support queuing of Ajax requests. If you execute
$("#myGridName").expandSubGridRow(ids[0]);
with remote datatype or subgridtype ('json' or 'xml') the Ajax request will be sent to the server. Till we receive the corresponding response from the server the internal property
$("#myGridName")[0].grid.hDiv.loading
will be set to true and all other Ajax requests for example from $("#myGridName").expandSubGridRow(ids[1]) will be just skipped (ignored).
The same problem (bug) exist in the current implementation of expandOnLoad: true. If you open in the official jqGrid demo the "Hierarchy (4.0) new" tree node and then look at the demo "Expand all Rows on load" you will see that not all rows are correctly expanded as promised (you have to scroll the grid to see all subgrids).
I think that to implement expanding of subgrids on load correctly you should do about the following
You should examine the list of collapsed subgrids (the corresponding row has class "sgcollapsed") and expand only the first found subgrid.
The expanding of the next subgrid should be done only after the response from the server will be received and processed.
I can recommend you to use success callback function of ajaxSubgridOptions jqGrid options because there are no loadComplete event after loading the subgrid. The current implementation of the Ajax request in subgrid uses complete callback function of jQuery.ajax (see here) which will be called before success callback. So you can define your success callback as the method of the ajaxSubgridOptions option of jqGrid. Inside of the success callback you can call $("#myGridName").expandSubGridRow(ids[i]) for the next node (if any still not expanded). In the way you can open all subgrids.
To enumerate subgrids more effectively the answer could be helpful for you.