I need to get column index of hide column in extjs grid panel
columnhide: function() {
var cell = this.getEl().query('.x-grid-cell-inner');
for(var i = 0; i < cell.length; i++) {
if (i%2 != 0){ // Instead of this i, want to change the style to none for the hide column, so i need to get the column index of hide column in grid panel
cell[i].style.display= "none";
}
}
Using the columnhide listener:
columnhide: function(ct, column, eOpts) {
alert(column.getIndex());
},
Alternatively, you could loop through the grid columns and check the isHidden() property on each column:
Ext.each(grid.columns, function(column, index) {
if (column.isHidden()) {
alert('column at index ' + index + ' is hidden');
}
});
I have a test case set up here: http://jsfiddle.net/cCEh2/
Related
I have grid then I can select few or all the rows and on toolbar with a "delete" button. I can delete one row, but for remove several; selected rows I don't have a method.
Can somebody help me? Thank you.
The following is for deletion of one selected row:
listeners: {
click: {
scope: this,
fn: function(sm, selection) {
var selection = this.getView().getSelectionModel().getSelection()[0];
/*if (selection.length > 1) {
store.removeAll(selection);
}*/ //This not working
else {
store.remove(selection);
}
store.sync();
}
}
}
selectionModel.getSelection() will give you array of records.
If you are able to get all the selected rows you can access each row in a loop and also you can leave some of the selected rows.
onDeleteClick : function() {
var studentGrid = this.getStudentGrid();
var studentStore = studentGrid.getStore();
var selectedRows = studentGrid.getSelectionModel().getSelection();
if (selectedRows.length) {
studentStore.remove(selectedRows);
} else {
Ext.Msg.alert('Status', 'Please select at least one record to delete!');
}
}
I have an ng-grid with 6 columns in it, and as a default set up each column is 100px, so the grid itself is 600px. The columns are resizable but I want to keep the overall grid width the same, to ensure that there are no horizontal scroll bars. So, for example, if I change the second columns width to 150px I would want the overall width to stay at 600px (so maybe an adjacent cell will change size to 50px) - this way I don't get a scroll bar.
Does anybody know if there is a plugin that can do this/help me accomplish this?
I've included a plunker: http://plnkr.co/edit/4LRHQPg7w2eDMBafvy6b?p=preview
In this example, I would want to keep the table width at 600px, so if I expand "Field 2" you will see "Field 4" go off the edge of the viewable area for the grid and a horizontal scroll bar appear. The behaviour I want is for a different column (probably the adjacent column - "Field 3") to shrink in size automatically, so that the grid stays at 600px and the horizontal scroll bar doesn't appear.
After a lot of time searching the web for an answer, I started with Paul Witherspoon idea of watching the isColumnResizing property and after reading about ng-grid plugins I came up with this plugin solution:
Plunker: http://plnkr.co/edit/Aoyt73oYydIB3JmnYi9O?p=preview
Plugin code:
function anchorLastColumn () {
var self = this;
self.grid = null;
self.scope = null;
self.services = null;
self.init = function (scope, grid, services) {
self.grid = grid;
self.scope = scope;
self.services = services;
self.scope.$watch('isColumnResizing', function (newValue, oldValue) {
if (newValue === false && oldValue === true) { //on stop resizing
var gridWidth = self.grid.rootDim.outerWidth;
var viewportH = self.scope.viewportDimHeight();
var maxHeight = self.grid.maxCanvasHt;
if(maxHeight > viewportH) { // remove vertical scrollbar width
gridWidth -= self.services.DomUtilityService.ScrollW;
}
var cols = self.scope.columns;
var col = null, i = cols.length;
while(col == null && i-- > 0) {
if(cols[i].visible) {
col = cols[i]; // last column VISIBLE
}
}
var sum = 0;
for(var i = 0; i < cols.length - 1; i++) {
if(cols[i].visible) {
sum += cols[i].width;
}
}
if(sum + col.minWidth <= gridWidth) {
col.width = gridWidth - sum; // the last gets the remaining
}
}
});
}
}
and in the controller
$scope.gridOptions = {
data: 'myData',
enableColumnResize: true,
plugins: [new anchorLastColumn()],
columnDefs: $scope.columnDefs
};
It is not a perfect solution but works for me and I hope that it will help others.
I found a way to do this using a watch on the isColumnResizing property:
$scope.$watch('gridOptions.$gridScope.isColumnResizing', function (newValue, oldValue) {
if (newValue === false && oldValue === true) { //on stop resizing
$scope.ColResizeHandler($scope.gridOptions.$gridScope.columns);
}
}, true);
then I was able to resize the columns in the resize handler I created:
$scope.ColResizeHandler = function (columns) {
var origWidth;
var col1 = undefined;
var col2 = undefined;
var widthcol2;
var found = false;
var widthDiff = 0;
angular.forEach(columns, function (value) {
if (col2 == undefined && value.visible) {
if (found) {
origWidth += value.width;
col2 = value;
colSizeLimits(col2, widthDiff);
found = false;
}
if (value.origWidth != undefined && value.origWidth != value.width && col2 == undefined) {
found = true;
col1 = value;
widthDiff = value.width - value.origWidth;
origWidth = value.origWidth;
}
}
});
if (col2 == undefined) {
//this was the last visible column - don't allow resizing
col1.width = origWidth;
}
else {
//ensure limits haven't been blown to cope with reizing
if (col1.width + col2.width != origWidth) {
var diff = (col1.width + col2.width) - origWidth;
colSizeLimits(col1, diff);
}
}
col1.origWidth = col1.width;
col2.origWidth = col2.width;
}
There are 2 issues with this.
1 - if you resize and drag the column sizer outside of the grid (i.e. all the way over and out of the ng-grid viewable area) the isColumnResizing watch doesn't execute when you stop dragging and release the resizer. (I think this may be a bug in ng-grid because it does actually resize the column to where you have dragged the resizer, even if it is outside the grids viewable area, it just doesn't fire the watch code).
2 - if you avoid this issue and just drag within the viewable grid area then the columns will resize but only after you finish dragging the resizer, so the ui looks a little funny (i.e. if I expand a column then the adjacent column will not shrink until I click off the resizer and stop dragging).
I'll be working on these issues and will post any updates/fixes I find.
I have an ng-grid which has the Edit and Delete buttons at the bottom of the grid. Both buttons are disabled when no rows are selected.
I want to know what the correct way to delete a row for ng-Grid, when a row is selected.
I could not find any examples from their website or their wiki
I did a quick comparison of the original and the selected... something like this:
angular.forEach($scope.gridOptions.selectedItems, function(index) {
var deleteIndex = $scope.originalResource.indexOf(index);
if (deleteIndex > -1){
$scope.originalResource.splice(deleteIndex,1);
}
});
And then to unselect the rows I did this: $scope.selections.splice(0)
use this it works for both multiple rows or single row selection
$scope.mySelections = [];
$scope.gridOptions = {
data :'data',
selectedItems : $scope.mySelections,
showSelectionCheckbox : true
}
$scope.delItem = function() {
for (var i = 0; i < $scope.mySelections.length; i++) {
var index = $scope.data.indexOf($scope.mySelections[i]);
if (index != -1) {
$scope.data.splice(index, 1);
}
}
}
I have a problem with checkboxes. So these checkboxes are in columns, and the longer labels wrap under their checkboxes. Is there any sollution to setting the column width to the longest label? It must be dynamic width. Can you help me?
Here's something you can use to measure all the labels and apply the width of the widest one to all of them http://jsfiddle.net/Wr7Wr/1/
Ext.define('DynamicLabelFormPanel', {
extend: 'Ext.form.Panel',
initComponent: function() {
// Need to create a hidden field to measure the text
var field = new Ext.form.field.Text({fieldLabel: 'Testing', value: 'whateves', renderTo: Ext.getBody(), hidden: true});
var metrics = new Ext.util.TextMetrics(field.labelEl);
var widths = Ext.Array.map(this.items, function(item) {
// Need to acount for the :
return metrics.getWidth(item.fieldLabel + ":");
});
var maxWidth = Math.max.apply(Math, widths);
for (var i = 0; i < this.items.length; i++) {
this.items[i].labelWidth = maxWidth;
}
this.callParent();
}
}
This would probably be better as a plugin, but it shows you what needs to be done
In an ExtJS grid, I can get the index of the selected data item like this:
grid.getSelectionModel().on('rowselect', function(sm, index, rec){
changeMenuItemInfoArea(menuItemApplication, 'you are on row with index ' + index);
var row_number_parts = rec.id.split('-'); // rec.id = e.g. "ext-record-1"
var selected_index = row_number_parts[2] - 1;
alert(selected_index);
});
But how do I get the index of the selected data item on double click?
When I do this:
listeners: {
'rowdblclick': function(grid, rowindex, e){
console.log(...);
}
}
both grid and e don't seem to have the information I need and rowindex isn't useful since if the user resorts a column, then the index of the row double-clicked is not necessarily the index of the dataset which loaded the grid.
Addendum
Thanks #McStretch, I ultimately solved the issue at hand by putting the id in the item list, hiding the id column, then sending the id to the edit page, like this:
listeners: {
'rowdblclick': function(grid, index, rec){
var id = grid.getSelectionModel().getSelected().json[0];
go_to_page('edit_item', 'id=' + id);
}
}
Index actually refers to the record's index in the store according to the documentation for cellClick:
function(grid, rowIndex, columnIndex, e) {
// Get the Record, this is the point at which rowIndex references a
// record's index in the grid's store.
var record = grid.getStore().getAt(rowIndex);
// Get field name
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var data = record.get(fieldName);
}
If this is the case, then you shouldn't have to worry about grid reordering. I think you should get the index/record by using the above methodology in your 'rowdblclick' listener -- it's much more readable. Test it out and see what happens.
I found a way to do this:
listeners: {
'rowdblclick': function(grid, index, rec){
var row_label = grid.getSelectionModel().getSelected().id;
var row_label_parts = row_label.split('-');
var selected_index = row_label_parts[2] - 1;
alert(selected_index);
}
}