I have a grouped Kendo Grid and need to trap collapse and expand events. For grids with detail there is detailExpand event . Is there something equivalent for group expand/collapse?
After poking around in the kendo source code, there is no directly provided event but you can just attach your own handler to the same event that kendo attaches to internally to handle the expand/collapse.
Internally, kendo attached a handler to expand/collapse icons like so:
if (that._isLocked()) {
that.lockedTable.on(CLICK + NS, '.k-grouping-row .k-i-collapse, .k-grouping-row .k-i-expand', that._groupableClickHandler);
} else {
that.table.on(CLICK + NS, '.k-grouping-row .k-i-collapse, .k-grouping-row .k-i-expand', that._groupableClickHandler);
}
where CLICK = "click" and NS = ".kendoGrid".
So, you can just add your own handler to the exact same element, i.e.:
var grid = $("#grid").getKendoGrid();
var table = grid._isLocked() ? grid.lockedTable : grid.table;
table.on('click.kendoGrid', '.k-grouping-row .k-i-collapse, .k-grouping-row .k-i-expand', myGroupableClickHandler);
and then do whatever you need to do in myGroupableClickHandler().
Example: http://dojo.telerik.com/#Stephen/udUga
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'm using event sources with FullCalendar 5. I need the cells containing events from one of the event sources to not be clickable.
I realize I can use eventClassNames or className to add a class for a given event source, but that class is added to the event text, not the cell, and nothing about the event source seems to be present as a selector at the cell level, either.
To summarize, the calendar is being used for reservations. If the date is present in a given event source, it is not available, so the cell should not be clickable. How do I accomplish that?
You could perform a check against existing events in the select callback - https://fullcalendar.io/docs/select-callback
so check that there is event(s) within the date range, and some custom property that identifies the source you wish to check for.
So when you import your events, have something like.
sourceType: "a" / sourceType: "b"
Then in the select, do a check, here blocking selection if an event of sourceType "b" is found within the cell.
select: function( selectionInfo ) {
if(calendar.getEvents().filter(x => (x.start >= selectionInfo.start && x.end <= selectionInfo.end && x.extendedProps.sourceType == "b").length > 0) ) {
calendar.unselect();
selectionInfo.jsEvent.stopPropagation();
return false;
}
// your handler if selection is allowed goes here
}
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
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
I am using Ext.grid.gridpanel.As in rowclick event, we can handle row click of grid..Is there any event to handle column click of grid?
i want to select a particular column of grid.
There is no special columnclick event on the gridpanel or the selection model, but you can listen to the
cellclick : ( Grid this, Number rowIndex, Number columnIndex, Ext.EventObject e )
event on the gridpanel itself - irrespective which selection model you use. Looking at the columnIndex you'll know which column has been clicked. If you want to react on clicks onto the header row, use the headerclick event instead.