I have a grid that is locally initialized from an array data. after adding the rows to it I want to be able to get the event of the scrollbar when it reaches to the end and load more rows locally.
(the grid has certain height and 'overflow-y' : scroll)
How can this be done?
Thanks In Advance.
You can see the code for loading more data at line 1831 of grid.base.js:
case "local":
case "clientside":
beginReq();
ts.p.datatype = "local";
var req = addLocalData();
addJSONData(req,ts.grid.bDiv,rcnt,npage>1,adjust);
$(ts).triggerHandler("jqGridLoadComplete", [req]);
if(lc) { lc.call(ts,req); }
$(ts).triggerHandler("jqGridAfterLoadComplete", [req]);
if (pvis) { ts.grid.populateVisible(); }
endReq();
The good news is that the loadComplete event is called, so you can put your code there. The only complication is that loadComplete may also be called when the grid is initially constructed, so you have to take that into account as well.
Related
What is the best way to set a saved grid state after the angular-slickgrid has already been created? The Grid State/Presets - Wiki explains setting the saved state on load by setting the gridOptions.presets. In my case, I would like to update the grid state when the underlying saved state has changed in local storage (perhaps saved from another instantiation of the app), and apply the state to the current slickgrid. If I update the gridOptions.presets, is there a method I can call to force the grid to update with the new presets?
Please note that I'm the author of Angular-Slickgrid.
The answer is No it's called Presets for a reason, it only works when creating the grid...but you can still do it with a few method calls. So if you really wanted to use the Grid State then you'll have to save it yourself and then reload the entire grid after applying all previous State. The Grid State that can be applied dynamically are the Filters and Sorting which you can see in Example 4 and Example 25 (with a button click or a dropdown selection like the last example). I did later add a method to change the columns as well and that one is demoed under this Slickgrid-Universal Example 11, in fact that demo will show you exactly the way you want to do it, you can follow the code here.
for a short code sample, you'll need to get the angularGrid instance from (onAngularGridCreated) and then use it to dynamically change the grid. It shows you all the options, you can skip any of them if you don't need or want to change that option.
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
}
// the `selectedView` should be the result of your Grid State
changeGridView(selectedView: GridState) {
if (selectedView) {
const columns = selectedView?.columns ?? [];
const filters = selectedView?.filters ?? [];
const sorters = selectedView?.sorters ?? [];
this.angularGrid.filterService.updateFilters(filters as CurrentFilter[]);
this.angularGrid.sortService.updateSorting(sorters as CurrentSorter[]);
this.angularGrid.gridStateService.changeColumnsArrangement(columns);
// if you have a frozen grid (pinning)
this.angularGrid.gridService.setPinning(pinning);
} else {
// to reset the grid
this.angularGrid.filterService.clearFilters();
this.angularGrid.sortService.clearSorting(); this.angularGrid.gridStateService.changeColumnsArrangement([...this.columnDefinitions].map(col => ({ columnId: `${col.id}` })));
// if you have a frozen grid (pinning)
this.angularGrid.gridService.clearPinning();
}
// you might want to scroll back to top of the grid if filters are changed
this.angularGrid.slickGrid.scrollColumnIntoView(0);
}
You might not need to re-render the grid but in case the grid UI doesn't show correctly, you could force a re-render of the grid by invalidating all its rows
this.angularGrid.slickGrid.invalidate();
I am trying to change the recordtext of a display grid to a custom format. I am using a treeview as the selector that refreshes the display grid. I need to find the total records for the grid and I am able to get this value using the getGridParam records method when I click on the treeview node and load the display grid.
However, after I get this value and try to create the custom recordtext, the record count is the previous value, not the current records count. I know that the gridComplete happens before the loadComplete, but even placing the get in the gridComplete and the set int he loadComplete, it still doesn't work, even with a reloadGrid trigger. If I click on the treeview node twice, I get the correct value.
I am thinking it is a timing issue as to when the new value is ready to set the recordtext. Any help would be great, thanks in advance.
I recommend you to try updatepager method, which updates the information on the pager. Alternatively you can do for example the following:
loadComplete: function () {
var p = $(this).jqGrid("getGridParam");
p.records = 123;
p.recordtext = "My View {0} - {1} of <i>{2}<i>";
this.updatepager();
}
to see the viewrecords
So what I'm trying to accomplish is when the grid is fully loaded, I loop over a certain column that contains checkboxes. Depending on the value of the checkbox I should be able to disable it.
Problem is that I can't access the html element that's there. Am i doing something wrong or overlooking something?
What i've tried:
loadComplete: function() {
// Fetch all the ID's of the rows
var rows = $("#table").getDataIDs();
// Loop over the rows
if(rows.length != 0){
for(i=0; i < rows.length; i++) {
// Get the data so we test on a certain condition
var row = $("#table").jqGrid("getRowData", rows[i]);
if (row.gridCheckbox == 1) {
//disable the element
row.prop("disabled", "disabled");
}
}
}
}
It's important to understand that changing one element on the page follow in the most cases to web browser reflow: validation whether some property (position for example) need be changed in all other elements on the page. If you do changes in the loop then your JavaScript code can be really slow.
Thus it's strictly recommended to reduce the number of changes of the DOM. Especially to reduce the number of changes jqGrid provides rowattr, cellattr and custom formatters. If you need for example to set disabled attribute on some rows then you should now do this in loadComplete, but to use rowattr instead to inform jqGrid that some additional attributes (disabled="disabled") should be set on some rows. jqGrid collect first the string representation of the whole table body and it use one assignment of innerHTML to fill the whole body of the grid in one DOM operation. It improves essentially the performance. See code example in the old answer.
I have the following code snippet (just to illustrate the question, it is not full production code) for the CkEditor plugin:
onOk: function() {
var dialog = this,
element = dialog.element;
.........
element.setStyle('width', width+'%');
element.setStyle('text-align', align)
dialog.commitContent(element);
}
In this small code snippet a modification of one dialog element occurs using setStyle() method, after which commitContent is triggered.
So, the questions are:
Do I understand correctly, that each setStyle call here triggers
element rerender (repaint) since this element already exists in
DOM?
What is the purpose of commitContent() ckEditor method? Just an event for dialog elements to store some data?
setStyle
I belive that setStyle repaints the components already existing in the DOM, have a look at this example (that I have taken from the official documentation):
var element = CKEDITOR.document.getById( 'myElement' );
element.setStyle( 'background-color', '#ff0000' );
element.setStyle( 'margin-top', '10px' );
element.setStyle( 'float', 'right' );
It first gets the element from the doc and Then sets the style, so basically it is repaiting it triggering events.
commitContent
From the official documentation:
Calls the CKEDITOR.dialog.definition.uiElement.commit method of each
of the UI elements, with the arguments passed through it. It is
usually being called when the user confirms the dialog, to process the
values.
Hope this helped you!
I have a slickgrid that, in the 'onMouseEnter' event, I do the following:
change the underlying css for the row in question
call grid.invalidateRow()
call grid.render()
These latter two calls are necessary for the new css classes to be reflected. However, I then need to capture the onMouseLeave event, and it is not fired when I move my mouse away from the cell (or row), presumably because the call to invalidate/render has placed a new DOM element under my mouse, and it's no longer the one I initially "entered."
So I have two questions:
Is there another way to have the new css classes for a given cell be rendered without calling invalidateRow/render?
If not, is there another way to do this and still have the onMouseLeave event fired?
One option is to use the setCellCssStyles function.
grid.onMouseEnter.subscribe(function(e, args){
var cell = grid.getCellFromEvent(e),
param = {},
columnCss = {};
for(index in columns){
var id = columns[index].id;
columnCss[id] = 'my_highlighter_style'
}
param[cell.row] = columnCss
args.grid.setCellCssStyles("row_highlighter", param);
})
So the above changes the background-color of every cell of the row that has been moused into. In my fiddle, the mouseLeave subscription performs a simple console.log to ensure it is still firing.
Edit: fixed the external resource usages in the fiddle for cross-browser support