Is there any direct way to sort the data on jqGrid at client side with inline editing?
It does not sort data when the row is editable even if the row header is clicked.
Grid can't be sort if some line is editing. I think that the reason of your question is a misunderstanding about how inline editing works and how sorting works.
At the beginning of editing the original data from the editing row will be saved in internal parameter savedRow array. In any time the user can revert the current modifications back to original state or save the current values in the grid. If keys: true option of inline editing is enabled then the user can use Esc or Enter keys to revert/save the changes of the current row. It is permitted that multiple rows could be in the same time in editing mode and the user could save some rows and some other revert.
The sorting of grid means rebuilding of full grid content applying of the current filter from internal postData parameter. jqGrid supports multiple pages. Sorting of grid means always the sorting of optionally filtered over all data of the grid. After sorting if should be displayed only the current page based on the value of page parameter.
To sort the grid which is in editing mode one would need to decide what should be done with currently editing rows. Neither discarding of current changes nor saving could be good solution in common case. Even if one would try first to save the current editing data (old state and current state) then sort the data and later start editing one more time it could not work in common case. It could be many problems of implementation such scenario
the current editing row could be on another page, which is not visible now
the data could be changed now. So filling savedRow array with old data could be wrong and the current editing data could be also wrong.
the current editing row could be deleted from another user. So it could not exist in new grid content.
if we decide to save data before sorting if could be some validation errors or concurrency errors during saving. So one need to ask user first to solve all the conflicts before saving could take place.
...
So to sort grid which is in editing mode is not easy. The implementation way could depend on the project requirements. Because of described above problems (and many other which I didn't mention) jqGrid just test whether internal savedRow array (used to save old state of row before editing started) is empty or not. If the savedRow array is not empty then there are some row or cell (in case of sell editing mode) which is editing now. In the case any click on the corresponding column header will be ignored and no sorting is done.
I had this same problem --not being able to sort if any row is in edit mode. In my case it didn't matter what the state of the user edits were. My grid is clientSide and there is a save button on the page the user's clicks to submit the changes.
I did some digging around and found a solution that works for me. I hope it helps others. Basically what I did was reorder the click events on the column headings so that mine was first. Then in my click event I call saveRows.
Here is a piece of code I got from another thread here about reordering events:
$.fn.bindUp = function(name, fn) {
// bind as you normally would
// don't want to miss out on any jQuery magic
this.on(name, fn);
// Thanks to a comment by #Martin, adding support for
// namespaced events too.
this.each(function() {
var handlers = $._data(this, 'events')[name.split('.')[0]];
// take out the handler we just inserted from the end
var handler = handlers.pop();
// move it at the beginning
handlers.splice(0, 0, handler);
});
};
Then in my code I add a handler to save the rows:
$("th.ui-th-column", $("#pacPaymenReviewGridNEW")[0].grid.hDiv).bindUp('click', function(e) {
var $th = $(e.currentTarget).closest("th");
if ($th.length > 0) {
pacTransferFundMaint.saveRowsById('#pacPaymenReviewGridNEW');
}
});
After research, I found the following algorithm:
Catch the header click event. e.g. ('th').click(function(){})
Save the the row data which is in edit mode using saveRow when this event occurs
Identify the header which is clicked.
Sort grid data with that header in ascending or descending order.
like $('#dataGrid').jqGrid('setGridParam', ({ data: list, sortname: columnHeader, sortorder: 'asc',rowNum: list.length })).trigger('reloadGrid');
Make the selected row editable again. editRow can be used for this.
Note: Steps 2 to 5 should be executed in event at steps 1 (header click event)
Related
SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.
I have a button in each row, when pressed that row is removed from one table, and added to another table:
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
and at first it appears to work perfectly, the row is removed from one table and added to another, but when I force a re-draw (by changing the sorting of one of the columns, for example) all the rows are back as they were, and the buttons no longer work. This is the case for both the removed rows, and the rows added to the other table.
Is this because I'm using a .jsp table as a data-source? Would this work correctly if I dynamically added all the rows to the table using JavaScript at load-time, or if I used a modelMap collection as a data-source?
Thanks a lot for any advice.
Solution for future googlers - I have no idea how my google-Fu did not find the answer, I had all the right keywords!
In short:
I was doing this to add:
$('.my-other-table-class').append(row);
And this to remove:
var row = $(this).closest("tr").remove().clone()
but I should've been doing this add:
$('.my-other-table-class').dataTable().fnAddData([$(this).attr("data-val1"), "var2"]);
And this to remove:
$('.my-table').dataTable().fnDeleteRow($(this).closest('tr')[0]);
With more detail:
What I am really doing here is modifying the DOM with JQuery (well duh, but I'm really new at this, remember...) - I figured the DOM was the data-source for my table, so that made sense? The table is redrawn, it rereads the DOM and updates? Well not really.
In order to be dynamic, if you use DOM (in other words HTML, or in my case .jsp rendered as HTML) as your data-source, upon initialization, datatables will copy all that information into a JavaScript array.... so rather then my original thought:
"The DOM is not updating correctly, and that issues is propogating up in to my table... because HTML is static...or something?"
it turns out the actual problem was:
"I was updating the DOM, but the real data source was a JavaScript array I wasn't seeing. So upon redraw, this array was overwriting the DOM and my changes were being lost."
TL;DR: Use the Data-tables API and don't modify the data-source directly, unless you need to.
If the event handlers are one of the issues, it may help to set up your event handler like this:
$("#myTable").on("click", "button.moveMe", function(e) {
e.preventDefault();
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
});
This will set a handler on the table that has id="myTable". The handler will look for click events on buttons with the "moveMe" class. It will catch the event on rows that are added later, as well as the rows that exist when this hook is created.
Reference: http://api.jquery.com/on/
I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you
Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.
Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.
I'm working on the following webpage and have reached a problem. Here's what happens on the site: On, the "mouseup" event after dragging a row, the following events occurs.
server updates the "order number" in the database
server returns the updated database back to the browser.
browser displays the update info.
The problem is that when the browser is updated, the rows are not draggable any more.
When modifying a table dynamically through Javascript, do I need to reload the Javascript "include files" again or something? If you need source code, I can provide.
here is the site
(link now removed, the problem solved)
Currently, I have it simply adding a new row with "made up" information every time you drag something only for testing purposes. What I would like to know, is how to make those new added rows draggable like the rest.
You're using jQuery, which I notice has a Drag and Drop plugin, whose comment section had the following that may be helpful:
#Ian Q: I had a similar problem, when DnD didn’t worked for rows added after initialization.
var params = {
onDragClass: “onDragRow”,
onDrop: function(table, row) { },
onDragStart: function(table, row) {}
};
// Initialization
$(“table”).tableDnD(params);
Then call $(“table”).tableDnD(params); everytime you add rows to that table.
Those new rows are being added to the table but never attached by the javascript library that is allowing you to drag and drop. Also, there seems to be some issue where I'm getting a repeat row? A lot of "Earthquake in Haiti"'s.
Check out the site for the plugin you're using to see how to add new rows into its control.
From the tableDnD website:
Added $(‘…’).tableDnDUpdate() to cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.
So call that function when the rows are inserted/updated.