Please see this plunker
https://plnkr.co/edit/cOuQ5YPdQDl6oDvoUSSn?p=preview
If i put filter on any column, eg from Gold i remove 8 then the total should get refreshed. How can this be achieved
enter code herefunction
CustomPinnedRowRenderer () {}
CustomPinnedRowRenderer.prototype.init = function(params) {
this.eGui = document.createElement('div');
this.eGui.style = params.style;
this.eGui.innerHTML = params.value;
};
CustomPinnedRowRenderer.prototype.getGui = function() {
return this.eGui;
};
It's not updated cuz it doesn't relate with visible data, it's binding to real (immutable, memory data)
But for sure you can create a workaround and handle pinnedData by yourself
onFilterChanged:(params)=>{
let result = {
gold:0,
silver:0,
bronze:0
}
setTimeout(()=>{
params.api.forEachNodeAfterFilter(i=>{
result.gold += Number(i.data.gold);
result.bronze += Number(i.data.bronze);
result.silver += Number(i.data.silver);
});
console.log(result);
params.api.setPinnedTopRowData([result]);
},0)
}
Add this part to your gridOptions.
One notice: currently we should use setTimeout inside onFilterChanged cuz grid doesn't provide updated data inside this event, the ag-grid team informed about
AG-2078 Filter Cell Renderer refreshes before grid has finished updating
Related
When the grid loads there is no grouping/filtering applied. I want to be able to remove any grouping/filtering which the user has applied manually i.e. get the grid format back to its original state.
You can do this with help of gridOptions of ag-grid. Try to do the below changes..
Initialize gridOptions if not yet along with column definitions and set the grid options in ag-grid.
Component.ts
this.gridOptions = {
defaultColDef: {
editable: true,
resizable: true,
filter: true
},
columnDefs: this.columnDefs,
rowData: this.rowData
};
clear the filters with like below
...
gridOptions.api.setFilterModel(null);
gridOptions.api.onFilterChanged();
...
component.html
<ag-grid .. [gridOptions] = "gridOptions" ..> </ag-grid>
You can see more about this in the ag-grid documentation.
you can define a function to reset everything
function ResetGrid(){
//clear filters
gridOptions.api.setFilterModel(null);
//notify grid to implement the changes
gridOptions.api.onFilterChanged();
//remove all pivots
gridOptions.columnApi.setPivotColumns([]);
// disable pivot mode
gridOptions.columnApi.setPivotMode(false);
//reset all grouping
gridOptions.api.setColumnDefs(columnDefs);
//where columDefs is the object you used while creating grid first time.
}
the above method does what you want but more sophisticated way to do this will be saving column state(it may be at iniital stage or later after certain operation).
function saveState() {
window.colState = gridOptions.columnApi.getColumnState();
window.groupState = gridOptions.columnApi.getColumnGroupState();
window.sortState = gridOptions.api.getSortModel();
window.filterState = gridOptions.api.getFilterModel();
console.log('column state saved');
}
function restoreState() {
if (!window.colState) {
console.log('no columns state to restore by, you must save state first');
return;
}
gridOptions.columnApi.setColumnState(window.colState);
gridOptions.columnApi.setColumnGroupState(window.groupState);
gridOptions.api.setSortModel(window.sortState);
gridOptions.api.setFilterModel(window.filterState);
console.log('column state restored');
}
function resetState() {
gridOptions.columnApi.resetColumnState();
gridOptions.columnApi.resetColumnGroupState();
gridOptions.api.setSortModel(null);
gridOptions.api.setFilterModel(null);
console.log('column state reset');
}
here is a demo
Here is how you can remove all filters and row groups. For more info, see GridApi.
gridApi.setFilterModel(null);
gridApi.setRowGroupColumns([]);
gridApi.onFilterChanged();
Live Example
I am trying to have my ag-grid start editing as soon as a new item is added. It works when grid has data already but if it's the first item in the grid it does not work.
var a = $scope.gridOptions.api.updateRowData({add: [newItem]});
$scope.gridOptions.api.refreshCells({force:true}); // does not help
$scope.gridOptions.api.startEditingCell({
rowIndex: a.add[0].rowIndex,
colKey: 'Note'
});
using ag-grid version 12.0.2. Console shows nothing.
It seems like updateRowData does not automatically start a $digest loop. Adding $scope.$apply or $timeout or anything similar alleviates the problem.
The question showed AngularJS code.
Here's an example what you'd need to do, using regular Angular.
getContextMenuItems(params) {
var result = [
{
name: 'Add new row',
action: function() {
// Add a new row at the start of our agGrid's data array
params.context.rowData.unshift({});
params.api.setRowData(params.context.rowData);
params.api.refreshCells();
// Get the name of the first column in our grid
let columnField = params.column.userProvidedColDef.field;
// Highlight the left-hand cell in our new row, and start editing it
params.api.setFocusedCell(0, columnField, null);
params.api.startEditingCell({
rowIndex: 0,
colKey: columnField,
rowPinned: null
});
},
icon: '<img src="../../assets/images/icnAdd.png" width="14"/>'
}
];
return result;
}
Hope this helps.
Is there a way to have row selection checkbox for each row without configuring a special column for it? I mean to add propertie for my gridOptions and to see checkbox near each row, then to get all selected rows?
All the documentation I read is showing how to do it by adding it to specific column.
Thanks,
You can still have row selection without having a checkbox column - you can either simply have selection based on row selection, or have a column render with a checkbox in it (with a custom cell renderer).
Take a look at the Selection Documentation for more information about row selection, and at the Cell Rendering Documentation about cell rendering
I know it is too late to answer on this post. But It may help someone who look for solution still. It works with checkbox selection on each row (click anywhere on the row to select checkbox), shift/control and toggle selection. Here I have given only necessary code.
vm.gridOptions = {
appSpecific : {},
onRowClicked : onRowClicked,
onGridReady : function() {
let api = vm.gridApi = vm.gridOptions.api;
}
};
function toggleSelect(row) {
row.node.setSelected(!row.node.isSelected(), false);
}
function onRowClicked(row) {
var appSpecific = vm.gridOptions.appSpecific;
var lastSelectedRow = appSpecific.lastSelectedRow;
var shiftKey = row.event.shiftKey;
// if not modifier keys are clicked toggle row
if (!shiftKey) {
toggleSelect(row);
} else if (lastSelectedRow !== undefined) {
if (shiftKey) {
var startIndex, endIndex;
// Get our start and end indexes correct
if (row.rowIndex < lastSelectedRow.rowIndex) {
startIndex = row.rowIndex;
endIndex = lastSelectedRow.rowIndex;
}
else {
startIndex = lastSelectedRow.rowIndex;
endIndex = row.rowIndex;
}
// Select all the rows between the previously selected row and the
// newly clicked row
for (var i = startIndex; i <= endIndex; i++) {
vm.gridApi.selectIndex(i, true, true);
}
}
}
// Store the recently clicked row for future use
appSpecific.lastSelectedRow = row;
getSelection(); // Implement functionality to get selected rows
}
I try to implement an Isotope combination filter. One of the three filters should be set to one selection, the other two filters should show all the items according to these filters. Everything works fine with one exception: When clicking the first time, the preselection is "lost" and all the items according to the preselected filter are shown. Only after the preselected filter is clicked, everything works.
As I am a beginner, I have no idea how to this. Any ideas how to solve this?
Thanks a lot!
<script>
$('#container').isotope({ filter: '.current' });
$(function(){
var $container = $('#container'), filters = {};
$container.isotope({
itemSelector : '.prod'
});
// filter buttons
$('.filter a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
I had the same problem. The only solution I found was simulating a click on the button for that specific selection after page load.
This is possible with jQuery.
Set an ID for the button in question and call:
$("#button_id").click();
I'm trying to set values in a slick grid from jQuery thru val and text e.g. .find('div.slick-cell.l2.r2').text('xyz'). There is a jquery autocomplete on the cell in question but it only gets activated on click. So when I click the cell in question it get overwritten by the initial defaultValue in the editor:
function ComboBoxEditor(args) {
...
this.loadValue = function (item) {
defaultValue = item[args.column.field] || "";
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
...
Can I get the jQuery text value from within the world of the slick grid.
Think of slickgrid as a rendering engine and dataView as the data interface (You are using dataView right?) Jquery or javascript editing of dom elements isn't gong to work so think about how jquery/javascript can use the dataView methods to do the updating.
I ran into this same issue when adding drag and drop of files into SlickGrid
I detect the elementID of the drop and map it back to the dataView row and column.
Here is the function I used for text pasting:
function insertText(textString, location) {
grid.resetActiveCell();
$(location).click();
var startCell = grid.getActiveCell();
if (startCell) {
// only paste text into active cells for now
var columnDef = grid.getColumns();
var colField = columnDef[startCell.cell].field;
if (!dataView.getItem(startCell.row)) {
// new row
var tobj = {'id': "new_" + (Math.random() + 1).toString(36).substring(7)};
tobj[colField] = textString;
dataView.addItem(tobj);
} else {
// modify existing cell
var item = dataView.getItem(startCell.row);
item[colField] = textString;
dataView.updateItem(item.id, item);
}
grid.resetActiveCell();
grid.render();
dataView.refresh();
}
}