I have a slickgrid table that I refresh with new data every couple of seconds. If set enableTextSelectionOnCells to allow the user to select text in a cell, currently the selection is removed when the table refreshes.
Is there a way to persist user cell-selection during a grid.setData(newData) call?
you can use goToCell after setting data as follows,
grid.gotoCell(row, cell, forceEdit);
grid.gotoCell(0, 0, true); // it will take you the 1st row and 1st cell and will make it editable.
Use dataView.syncGridSelection(grid, true);
dataView.syncGridSelection(grid, true); function will preserve the row selection even after adding new row to the grid. Later U can check for the active cell and make it active Try it
Related
In jqGrid, one can set sortableRows to true to enable drag-and-drop row with local data. Is it possible to remember/persist row position even after a page refresh? I know it's possible to save column position with localStorage. How about the rows?
I have a single slickgrid that uses a dataview with the row selection model. I frequently assign a completely different array to the dataview, switching the data in this grid.
I use this function to swap datasets in the grid:
function setData(dataArray, uniqueIdFieldName) {
dataView.beginUpdate();
dataView.setItems(dataArray, uniqueIdFieldName)
dataView.endUpdate();
grid.resizeCanvas();
grid.invalidate();
}
The first time I use this function (to load the initial data into an empty grid), everything works great. Every time after that, it loads the data fine but has a selection bug. I can't select the first row in the grid. However, if I select a row other than the first, the bug seems to correct itself and I can then select the first row again. When I change the data again with my function, I once again can't select the first row.
Anyone know why this is happening?
I found the problem and solution. The problem is slickgrid is keeping all the data about the active cell/row even after you completely change it's data with setItems(). The internal variable activeCell is still set to an index value, even though no cells are selected anymore. The solution is to call grid.resetActiveCell() before changing the data. So the working code looks like this:
function setData(dataArray, uniqueIdFieldName) {
grid.resetActiveCell(); //THIS LINE ADDED
dataView.beginUpdate();
dataView.setItems(dataArray, uniqueIdFieldName)
dataView.endUpdate();
grid.resizeCanvas();
grid.invalidate();
}
It seems to me that this is a bug in slickGrid. The setItems() function should reset the selection variables internally before changing the rows, since obviously the current selection is going to be null and void after resetting the items and not doing so leaves the entire selection model in a faulty state.
I have the amazing SlickGrid configured to access data asynchronously and post user changes back to the server asynchronously. In general terms, the server may modify a few fields of a row based on the user's changes. As such, after the row is updated I would like SlickGrid to refresh only that row without changing the rest of the view.
Does anyone know how to do this?
In my case, the field that changes on the server is a timestamp associated with the record that is updated by a database trigger. If the timestamp is out of date, the user has an old copy of data, and if they submit changes, they may overwrite a new copy. Since I can't find a way to trigger a refresh, the user cannot modify their own changes without refreshing the browser window (forcing a complete refresh).
You should be able to do this using grid.invalidateRow() and grid.render(). SlickGrid will re-render the affceted rows (assuming they are displayed in the currently visible viewport) without refreshing the entire page.
// Mark row 42 as changed and re-render the display
grid.invalidateRow(42);
grid.render();
For an example check out SlickGrid Example 14. (Click the Start Simulation button to see it in action)
function updateSlickgrid() {
dataView.setItems(tableName);
grid.invalidate();
}
Note : tableName could be the array or id etc.
I prefer storing all the slickgrid data in the array ex tableName = [];
Keep using the above function when it comes to displaying the data in slickgrid
I'm using jqgrid with inline editing , when the user gets to the last cell inside a row , when he clickes on "tab" key he will be editing the next row - and if it does not exist a new row will be created.
I want to add a delete row function for the user , but still to have that row data inorder to send it later to the server as a deleted row.
I tried hiding the row , but then when the user "tabs" to the next row - it goes to the hided row - and i want it to go only to the not hided rows.
Is there a way to mark a row as deleted? and then when I generate the xml from the grid rows it will be a part of those rows? or is there a way to delete the row and save it's cells values , and be able to navigate throgh the grids line without going throgh the deleted line?
Any help will be appritiated!
Thank's In Advance.
To fix problem with editing of hidden row you can try to add class "not-editable-row" to the row which you hide.
$("#"+rowid).addClass("not-editable-row").hide();
If it will not help you will have to overwrite the default "TAB" behavior of jqGrid (see the question for implementation details)
Probably more easer way would be to use delRowData which delete a row from the grid without sending any information to the server. If you want to have your custom implementation of the "Delete" button in the navigator (see the example here). Inside of your onClickButton event handler you can save the contain of rows, which will be deleted, to some JavaScript array/object and then delete the row with respect of delRowData. So you can trace all delete operation, save deleted rows and send later all needed informations to the server.
I use two grids at one PHP page.
Is there any way to get data from the first grid (i.e. after click row) and pre-fill it into the add new row form in the second grid?
thank you for any suggestion Petr
I am not sure that I correct understand what you mean under the "pre-filling". But how I understand you question you can do following:
With respect of onSelectRow event which you define on the first grid you will receive the id of selected row as the parameter. Inside of the onSelectRow event handle you can call getRowData to get full information about the data of selected row. Then using addRowData for example you can add new row in the second grid.