I am using ExtJS 5. I have a dynamic grid meaning the column configurations, store fields, data etc are all coming from the backend.
Before I reconfigure the grid with the columns, I try to add a tooltip to the header using the data-qtip attribute but this does not work.
Here is the fiddle:
https://fiddle.sencha.com/#fiddle/1fr8
Snippet:
var cols = data_1.metaData.columns;
for(var i=0;i<cols.length;i++){
cols[i].header = "<font data-qtip='"+cols[i].header+"'>"+cols[i].header+"</font>";
}
grid.reconfigure(null, cols);
store.getProxy().data =data_1.data;
store.loadPage(1)
grid.getView().refresh();
Thanks!
Please don't overcomplicate things, the gridcolumn has a tooltip configuration which should work.
for(var i=0;i<cols.length;i++){
cols[i].tooltip = cols[i].header;
}
It doesn't work in your case, because the QuickTipManager has to be initialized first in Ext.onReady:
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = ...
Please note that the header config in gridcolumn has been deprecated in favor of the text config.
You can also override initRenderData to set this application-wide. For example to always use the column text as a tooltip:
/**
* If a tooltip has not been set for a column header
* then always default to the column name
**/
Ext.override(Ext.grid.column.Column, {
initRenderData: function () {
var me = this;
if (Ext.isEmpty(me.tooltip)) {
me.tooltip = me.text;
}
return me.callParent(arguments);
}
});
Related
How to add or remove a row in ag-grid,
i try this, but not work
$scope.gridOptions.rowData.push(data);
and with this
scope.gridOptions.api.forEachNode( function(node) {
var data = node.data;
updatedNodes.push(vehicle);
});
$scope.gridOptions.api.refreshRows(updatedNodes);
Thanks
This is what worked for me with the ag-grid community version 22.1.1:
add new row
const row = //someNewRowDataHere
this.gridOptions.rowData.push(row)
this.gridApi.setRowData(this.gridOptions.rowData)
remove
const selectedRow = this.gridApi.getFocusedCell()
const id = this.gridOptions.rowData[selectedRow.rowIndex].i
this.gridOptions.rowData.splice(selectedRow.rowIndex, 1)
this.gridApi.setRowData(this.gridOptions.rowData)
The current version of ag-grid now supports this:
https://www.ag-grid.com/javascript-grid-insert-remove/
The grid does feature change detection but if you want/need to force a refresh, you can pick one of the refresh methods:
https://www.ag-grid.com/javascript-grid-refresh/
Since this answer is a bit old, just noting another update to the grid has emphasized the use of what the grid calls "transactions" for all grid CRUD operations:
https://www.ag-grid.com/javascript-grid-data-update/#gsc.tab=0
I personally like this approach
Add row
$( '#newRow' ).on( 'click', function() {
gridOptions.api.applyTransaction({ add: gridOptions.rowData });
} );
Remove row (ex. clicking on a bin-icon)
Works with rowDragManaged enabled
// remove row
$( document ).on( 'click', '#myGridFees .fa-trash-alt', function(e) {
$.fn.agGridRemoveRowByBinClick(gridFeeOptions, $(this));
});
/**
*
* #param agGridOption
* #param $this
*/
$.fn.agGridRemoveRowByBinClick = function(agGridOption, $this) {
let id = $this.closest('.ag-row').attr( 'row-id' );
agGridOption.api.applyTransaction({ remove: [ agGridOption.api.getRowNode(id).data ] });
}
i try to get the the value of number row selected, and print it in HTML using Angularjs, but no issue,
i have the count only when i clic in the grid column header.
The value of " selectedRowsCounter " is 0 in html, when i dosn't clic in the grid header
my code is like
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
};
$scope.gridOptions = {
rowData: null,
angularCompileRows: true,
onSelectionChanged: activeButtons,
}
there is a screenshot
i have open the same subject here
https://github.com/ceolter/ag-grid/issues/1023
i have added this line to activeButtons function and it work fine
$scope.gridOptions.api.refreshView();
i dont knew if there is a good solution, but that work for now
The problem seems to be with Angular being unaware of the $scope property change because ag-grid does not tell Angular that it has modified something in the $scope. Although it is difficult to tell if you don't show your view.
You can use onSelectionChanged the way you are using it to know how many rows have been selected, but you need to tell Angular that something has changed in its $scope by applying it.
Something like this:
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
window.setTimeout(function() {
this.$scope.$apply();
});
};
That way you can apply the $scope and the html view will reflect the changes.
How do I reset my ExtJS filters in my grids. More specifically, how do I get the header to honour the changes to the filtering.
ie. This works fine :
grid.store.clearFilter();
But the header rendering is all wrong. I need to get into all the menu objects and unselect the checkboxes.
I am getting pretty lost. I am pretty sure this gives me the filterItems :
var filterItems = grid.filters.filters.items;
And from each of these filter items, i can get to menu items like so :
var menuItems = filter.menu.items;
But that's as far as I can get. I am expecting some kind of checkbox object inside menu items, and then I can uncheck that checkbox, and hopefully the header rendering will then change.
UPDATE :
I now have this code. The grid store has its filter cleared. Next I get the filterItems from grid.filters.filters.items and iterate over them. Then I call a function on each of the menu items.
grid.store.clearFilter();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(checkbox) {
if (checkbox.setChecked)
checkbox.setChecked(false, true);
});
}
The checkboxes do get called, but still nothing is happening :(
Try this code:
grid.filters.clearFilters();
This should take care of both the grid and its underlying store.
When you do
grid.store.clearFilter();
it can only clear the filters on the store but the grid's view doesn't get updated with that call. Hence to handle it automatically for both the grid's view as well as the grid's store, just use
grid.filters.clearFilters();
Hope it helps!
Cheers!
Your update help me but you forget the case where you have input text instead of checkbox.
So this is my addition of your solution:
grid.filters.clearFilters();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(element) {
if (element.setChecked) {
element.setChecked(false, true);
}
if(typeof element.getValue !== "undefined" && element.getValue() !== "") {
element.setValue("");
}
});
}
When you use grid wiht gridfilters plugin
and inovoke
grid.filters.clearFilters();
it reset applyed filters, but it don't clean value in textfield inside menu.
For clean textfield text you can try this:
grid.filters.clearFilters();
const plugin = grid.getPlugin('gridfilters');
let activeFilter;
if('activeFilterMenuItem' in plugin) {
activeFilter = plugin.activeFilterMenuItem.activeFilter
}
if (activeFilter && activeFilter.type === "string") {
activeFilter.setValue("");
}
I am a newbie to ExtJS.I am now working on grids.I would like to toggle the visibility of the headers on a button click(Show and hide the header only).Any suggestions should be appreciated.Thanks in advance.
I would try
var el = myDataGrid.headerCt.getEl();
if (el.isVisible()) {
el.hide();
} else {
el.show();
}
If you want to hide all headers in all grids, I suggest you assign them some custom class and then you do the above for all of them separatelly.
Something along the following lines (not tested)
var allGrids = Ext.dom.Query.select(".myDataGrids");
Ext.Array.each(allGrids, function(gridDomElement, index) {
var el = Ext.fly(gridDomElement);
// Do the above
// ....
});
I have grid in extjs program. Grid has 2 columns. I want to get each value in grid.
Is possible something like that (of course in JS):
foreach( row in grid ) {
row.cell[0] // do something
row.cell[1] // do something
}
If yes, how to do it?
Using other user answer I know how do it in extjs 3.3.1 (user863680's solution doesn't work in my program).
gridName.getStore().each(function(rec){ // for each row
var rowData = rec.data; // get record
alert( rowData['col1Name'] ); // get value from cell
alert( rowData['col2Name'] );
});
If you want to access each row in your grid, you could do the following.
yourGrid.getStore().each(function(rec){
var rowData = rec.data;
for (var i=0; i<rowData.length; i++) {
console.log(rowData[i]); //or you could do something else here
};
});
I hope this helps.
alert("Getting grid value = "+document.getElementById("yourgridblock").rows[1].cells[2].firstChild.value);
alert("Getting grid value = "+document.getElementById("yourgridblk").rows[1].cells[0].firstChild.checked);
alert("Getting grid count = "+document.getElementById("yourgridblk").rows.length);