please look into following images let me know if you have any solution for it,
when I click on select all header checkbox (last column of grid) at that time if grid having row in collapse mode at that time all the record get selected but header checkbox remains unchecked but when I expand that particular record grid then header checkbox get selected please help me with it.
how can we get checked header checkbox while grid data in collapse mode.
enter image description here
enter image description here
Got an answer just override method onHeaderClick see commented lines,
`onHeaderClick: function(headerCt, header, e) {
if (header.isCheckerHd) {
e.stopEvent();
var me = this,
isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
// Prevent focus changes on the view, since we're selecting/deselecting all records
me.preventFocus = true;
if (isChecked) {
me.deselectAll();
me.toggleUiHeader(false); // added
} else {
me.selectAll();
me.toggleUiHeader(true); // added
}
}
Please find code snippet below
addTreeGrid: function( view, type ) {
var me = this,
grid = null;
grid = Ext.create( 'widget.documentgrid', {
selModel: new Ext.selection.CheckboxModel({
injectCheckbox:'last',
checkOnly: true,
listeners : {//Issue # 7066 : t3281034
beforeselect : function(model, record, index){
if( record.get('status') === 'ANNL' ){
return false;
}
}
}
})
} );
Related
I encountered this bug where the column filter is incorrect if the grid has a locked column
Here's the fiddle: sencha fillde
Steps to reproduce:
(Do not apply any filter)
Open the "Email" column menu
Open "Name" column menu (this is the locked column)
Open "Phone" column menu (notice that the filter menu is incorrect, it is showing the filter for "Email" column).
For grid that has no 'locked' columns the filter menu is working fine, thanks for anyone who can help!
Okay, this one was a bit tricky. It turns out that for a locked grid, the Ext.grid.filters.Filters:onMenuCreate gets hit twice... one for each side of the grid's menu that shows. The problem is that in the onMenuCreate, the framework doesn't account for the 2 menus. It only cares about the last menu that gets created and destroys the previous menu's listeners. In onMenuBeforeShow, the framework does account for each side of the grid, so I extended this idea into an override. I would encourage you to create a Sencha Support ticket for this, and if you don't have access, let me know, so I can submit one. Fiddle here.
Ext.override(Ext.grid.filters.Filters, {
onMenuCreate: function (headerCt, menu) {
var me = this;
// TODO: OLD BAD CODE... this would destroy the first menu's listeners
// if (me.headerMenuListeners) {
// Ext.destroy(me.headerMenuListeners);
// me.headerMenuListeners = null;
// }
// me.headerMenuListeners = menu.on({
// beforeshow: me.onMenuBeforeShow,
// destroyable: true,
// scope: me
// });
// Just like in the onMenuBeforeShow, we need to create a hash of our menus
// and their listeners... if we don't, we remove the 1st menu's listeners
// when the 2nd menu is created
if (!me.headerMenuListeners) {
me.headerMenuListeners = {};
}
var parentTableId = headerCt.ownerCt.id;
var menuListener = me.headerMenuListeners[parentTableId];
if (menuListener) {
Ext.destroy(menuListener);
me.headerMenuListeners[parentTableId] = null;
}
me.headerMenuListeners[parentTableId] = menu.on({
beforeshow: me.onMenuBeforeShow,
destroyable: true,
scope: me
});
},
destroy: function () {
var me = this,
filterMenuItem = me.filterMenuItem,
item;
// TODO: ADDING THIS AND REMOVING FROM THE Ext.destroy on the next line
var headerMenuListeners = this.headerMenuListeners;
Ext.destroy(me.headerCtListeners, me.gridListeners);
me.bindStore(null);
me.sep = Ext.destroy(me.sep);
for (item in filterMenuItem) {
filterMenuItem[item].destroy();
}
// TODO: ADDING THIS AND REMOVING FROM THE Ext.destroy on the next line
for (item in headerMenuListeners) {
headerMenuListeners[item].destroy();
}
this.callParent();
}
});
There are two combo boxes and a button.I want a validation i.e. if "combo1" is selected then "combo2" should get enabled and when i select "combo2" then browse button should get enabled.
Mabe something like that (insert text on first combobox):
The combobox2 and button must have this configs:
hidden:true,
disabled:true,
On combobox1:
listeners:{
change: function(combobox,newValue, eOpts){
var combo2 = Ext.ComponentQuery.query('#combo2ItemId')[0];
var button = Ext.ComponentQuery.query('#buttonItemId')[0];
if(!Ext.isEmpty(newValue)) {
combo2.setHidden(false).setDisabled(false);
button.setHidden(true).setDisabled(true);
}
else {
combo2.setHidden(true).setDisabled(true);
button.setHidden(true).setDisabled(true);
}
}
On combobox2:
listeners:{
change: function(combobox,newValue, eOpts){
var button = Ext.ComponentQuery.query('#buttonItemId')[0];
if(!Ext.isEmpty(newValue)) {
button.setHidden(false).setDisabled(false);
}
else {
button.setHidden(true).setDisabled(true);
}
}
I hope this helps!
I guess you may want to disable the second combo and button when the page first shows.
Then You could listen for the change event for each combo and in your handler code disable\enable which ever controls you need to based on the values passed into the handler function arguments.
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'm setting the selection of my ngGrid from JavaScript, calling gridOptions.selectItem(). I have multiSelect set to false, so there is only ever one row selected. I'd like the ngGrid to automatically scroll to show the newly selected row, but I don't know how to do this: can anyone help, please?
On a related topic: can I disable row selection by mouse click? If so, how?
Edited to add
I'd also like to disable keyboard navigation of the selected row, if possible.
What worked:
AardVark71's answer worked. I discovered that ngGrid defines a property ngGrid on the gridOptions variable which holds a reference to the grid object itself. The necessary functions are exposed via properties of this object:
$scope.gridOptions.selectItem(itemNumber, true);
$scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (itemNumber - 6))*$scope.gridOptions.ngGrid.config.rowHeight);
My grid is fixed at 13 rows high, and my logic attempts to make the selected row appear in the middle of the grid.
I'd still like to disable mouse & keyboard changes to the selection, if possible.
What also worked:
This is probably closer to the 'Angular Way' and achieves the same end:
// This $watch scrolls the ngGrid to show a newly-selected row as close to the middle row as possible
$scope.$watch('gridOptions.ngGrid.config.selectedItems', function (newValue, oldValue, scope) {
if (newValue != oldValue && newValue.length > 0) {
var rowIndex = scope.gridOptions.ngGrid.data.indexOf(newValue[0]);
scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (rowIndex - 6))*scope.gridOptions.ngGrid.config.rowHeight);
}
}, true);
although the effect when a row is selected by clicking on it can be a bit disconcerting.
It sounds like you can make use of the scrollTop method for the scrolling.
See also http://github.com/angular-ui/ng-grid/issues/183 and the following plunker from #bryan-watts http://plnkr.co/edit/oyIlX9?p=preview
An example how this could work would be as follows:
function focusRow(rowToSelect) {
$scope.gridOptions.selectItem(rowToSelect, true);
var grid = $scope.gridOptions.ngGrid;
grid.$viewport.scrollTop(grid.rowMap[rowToSelect] * grid.config.rowHeight);
}
edit:
For the second part of your question "disabling the mouse and keyboard events of the selected rows" it might be best to start a new Question. Sounds like you want to set your enableRowSelection dynamically to false? No idea if that's possible.
I believe I was looking for the same behavior from ng-grid as yourself. The following function added to your gridOptions object will both disallow selection via the arrow keys (but allow it if shift or ctrl is held down) and scroll the window when moving down the list using the arrow keys so that the currently selected row is always visible:
beforeSelectionChange: function(rowItem, event){
if(!event.ctrlKey && !event.shiftKey && event.type != 'click'){
var grid = $scope.gridOptions.ngGrid;
grid.$viewport.scrollTop(rowItem.offsetTop - (grid.config.rowHeight * 2));
angular.forEach($scope.myData, function(data, index){
$scope.gridOptions.selectRow(index, false);
});
}
return true;
},
edit: here is a plunkr:
http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview
Hope that helps!
I found the accepted answer above is not working with the latest version of ui-grid (v4.0.4 - 2017-04-04).
Here is the code I use:
$scope.gridApi.core.scrollTo(vm.gridOptions.data[indexToSelect]);
In gripOptions, you need to register the gridApi in onRegisterApi.
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
var grid = $scope.gridOptions.ngGrid;
var aggRowOffsetTop = 0;
var containerHeight = $(".gridStyle").height() - 40;
angular.forEach(grid.rowFactory.parsedData, function(row) {
if(row.entity.isAggRow) {
aggRowOffsetTop = row.offsetTop;
}
if(row.entity.id == $scope.selectedId) {
if((row.offsetTop - aggRowOffsetTop) < containerHeight) {
grid.$viewport.scrollTop(aggRowOffsetTop);
} else {
grid.$viewport.scrollTop(row.offsetTop);
}
}
});
I have two grids; I call them child and parent grid. When I add a new row(data) into the parent grid, I want to reload the parent grid. I was trying to edit it using the afteredit function in the code. If I uncomment out line number 2 in the alert, that works fine. But with out the alert, the newly added row is hidden. I don't understand what's going wrong in my code. Please can anyone tell me what to do after I add the new row in to my grid and how to reload the grid immediately?
this my afteredit function
afteredit : function (roweditor, changes, record, rowIndex)
{ //alert('alert me');
if (!roweditor.initialized) {
roweditor.initFields();
}
var fields = roweditor.items.items;
// Disable key fields if its not a new row
Ext.each(fields, function (field, i) {
field.setReadOnly(false);
field.removeClass('x-item-disabled');
});
this.grid.getSelectionModel().selectRow(0);
this.grid.getView().refresh();
},
xt.ux.grid.woerp =
{
configRowEditor:
{
saveText: "Save",
cancelText: "Cancel",
commitChangesText: WOERP.constants.gridCommitChanges,
errorText: 'Errors',
listeners:
{
beforeedit: WOERP.grid.handler.beforeedit,
validateedit: WOERP.grid.handler.validateedit,
canceledit: WOERP.grid.handler.canceledit,
afteredit: WOERP.grid.handler.afteredit,
aftershow: WOERP.grid.handler.aftershow,
move: WOERP.grid.handler.resize,
hide: function (p)
{
var mainBody = this.grid.getView().mainBody;
if (typeof mainBody != 'undefined')
{
var lastRow = Ext.fly(this.grid.getView().getRow(this.grid.getStore().getCount() - 1));
if (lastRow != null)
{
mainBody.setHeight(lastRow.getBottom() - mainBody.getTop(),
{
callback: function ()
{
mainBody.setHeight('auto');
}
});
}
}
},
afterlayout: WOERP.grid.handler.resize
}
},
AFAIK RowEditor is a plugin for GridPanel which changes underlying data which comes from store. Usually updates are also made by store. If you want to know when data is saved, you should attach event handler to store. Example:
grid.getStore().on('save', function(){ [...] });
Finally i found solution. When i add reload function in to the afteredit method that will be hide newly added row. So Grid reload After commit data in to that data grid store work well for me. Anyway thanks lot all the people who try to help
this my code look like
record.commit();
grid.getView().refresh();
I think there exist a Save button after editing grid.
So in the handler of Save you can catch the event
or using
Ext.getCmp('your_saveButtonId').on('click', function(component, e) {
// Here they will be checking for modified records and sending them to backend to save.
// So here also you can catch save event
}