I noticed that a user cannot hide all columns in a gridpanel. It seems that the grid must at least display one column. I can imagine this is a nice feature, but it doesn't work quite as I expected when dealing with both hideable and non-hideable columns. It seems that the rule is that at least one hideable column is required to display, even if there is a non-hideable column in the grid.
It doesn't make sense to me to not allow hiding of all hideable columns when at least one non-hideable column is displayed. Is this behaviour configurable?
I created a demo based on the Stateful Array Grid Example showing the problem:
http://jsfiddle.net/p9zqK/
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
hideable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
...
A simple hack is to allow all columns to be hidden unconditionally (in my application I don't bother about checking whether hideable columns exist, because I know they do...)
Ext.override(Ext.grid.header.Container,
{
updateMenuDisabledState: function()
{
var me = this,
result = me.getLeafMenuItems(),
total = result.checkedCount,
items = result.items,
len = items.length,
i = 0,
rootItem = me.getMenu().child('#columnItem');
//if (total <= 1)
if (total <= 0) /* Allow all columns to be hidden unconditionally */
{
me.disableMenuItems(rootItem, Ext.ComponentQuery.query('[checked=true]', items)[0]);
}
else
{
for (; i < len; ++i)
{
me.setMenuItemState(total, rootItem, items[i]);
}
}
}
});
Related
I have Implemented Nested Grid in Rowexpander Plugin.Now Issue is that when i am selecting any nth row of child grid then parent grid nth row also get selected . I think because both have same rowIndex.Even when i mouseover on the child grid row same mouseover effect display for parent also simultaneously.
Below is the code for Rowexpander
var expander = new Ext.ux.grid.RowExpander({
expandOnDblClick : false,
tpl : new Ext.Template('<div id="NestedGridRow-{id}"></div>'),
renderer: function(v, p, record) {
if (record.get('cmaStatus') == 'G') {
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"></div>';
}
},
});
expander.on('expand', expandedRow);
function expandedRow(obj, record, body, rowIndex){
//absId parameter for the http request to get the absence details.
//Use Id to give each grid a unique identifier. The Id is used in the row expander tpl.
//and in the grid.render("ID") method.
var row = "NestedGridRow-" + record.get("id");
var id2 = "mygrid-" +record.get("id");
sapid_para = record.get('sapid');
//Create the nested grid.
var gridX = new Ext.grid.GridPanel({
id:'nestedGrid',
store: storenested,
//stripeRows: true,
columns: [
{
header : "CMA Date",
width : 120,
sortable : true,
dataIndex : 'cmaDate',
},
{
header : "Source Model",
width : 120,
sortable : true,
dataIndex : 'sourceModel',
},
{
header : "Remarks",
width : 390,
sortable : true,
dataIndex : 'remarks',
}],
height: 120,
id: id2,
plugins : [editor],
renderTo: row,
stripeRows:true,
listeners: {
render: function(gridX) {
gridX.getView().el.select('.x-grid3-header').setStyle('display', 'none');
},
rowclick : function(grid,rowIndex,e) {
alert(rowIndex);
}
},
});
gridX.render(row);
//Ext.getCmp('grid_lineage').getStore().load({params:{start:0, limit:10}});
storenested.load({params:{start:0, limit:10}});
Please Help
I had the same issue. You will need to get a handle on the nested grid, and call this:
gridX.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
I think that what I'm trying to achieve is having a tree-like inside the ng-grid. I didn't found such an implementation but I'm wondering if I can use the grouping mechanism
I need to have the group header be editable in the same manner as the rows below it (see image above), with exactly the same editable cells, acting as a master row. When updating one cell from the header group should update all the cells beneath that group.
From ng-grid docs http://angular-ui.github.io/ng-grid/ :
default value for aggregateTemplate:
<div ng-click="row.toggleExpand()" ng-style="{'left': row.offsetleft}" class="ngAggregate">
<span class="ngAggregateText">{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})</span>
<div class="{{row.aggClass()}}"></div>
</div>
Is it possible to use this option in order to render the aggregate row as I described?
The below answer/comment is related to tree like structure and not related to making aggregate row editable...
If you are looking for tree-like structure in ng-grid, then you could achieve that with the combination of ng-if, ng-click and API(s) that updates the ng-grid data option on click of a particular row. Here is a sample plnkr.
On click of a parent row, a toggle function is called to add/remove child rows in to the ng-grid data. (Refer to my plunker code for complete details)
$scope.toggleDisplay = function(iType) {
$scope.displayItemDetails[iType] = $scope.displayItemDetails[iType] ? 0 : 1;
$scope.selItems = $scope.updateTable();
};
$scope.updateTable = function() {
var selItems = [];
for (var i in $scope.allItems) {
var iType = $scope.allItems[i]["Type"];
if (angular.isUndefined($scope.displayItemDetails[iType])) {
$scope.displayItemDetails[iType] = 0;
}
if (1 == $scope.displayItemDetails[iType]) {
$scope.allItems[i]["Summary"] = '-';
} else {
$scope.allItems[i]["Summary"] = '+';
}
selItems.push($scope.allItems[i]);
if ($scope.displayItemDetails[iType]) {
for (var j in $scope.allItems[i]["Details"]) {
$scope.allItems[i]["Details"][j]["Summary"] = "";
selItems.push($scope.allItems[i]["Details"][j]);
}
}
}
return selItems;
};
$scope.gridOptions = {
data: 'selItems',
columnDefs: [{
field: 'Summary',
displayName: '',
cellTemplate: summaryCellTemplate,
width: 30
}, {
field: 'Name',
displayName: 'Name',
}, {
field: 'Type',
displayName: 'Type',
}, {
field: 'Cost',
displayName: 'Cost',
}, {
field: 'Quantity',
displayName: 'Quantity',
}],
enableCellSelection: false,
enableColumnResize: true
};
I try to implement grid with grouping similar to this example:
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/groupgrid.html
Here data is grouped by column "Cuisine" and sorting by this column sort groups accordingly.
When I paste code of this example into a project, which uses 4.2.1, or in code editor at ExtJS 4.2.1 docs site, the view is exactly the same, sorting works for column "Name", but it doesn't work by column "Cuisine".
Did they remove sorting by grouping column in 4.2.1? If not, how to make it work?
The same example is present in 4.2.1 SDK, and indeed sorting by the grouped column doesn't work anymore. Sounds like a regression to me, you should notify Sencha.
Edit:
That's the code of the method Ext.data.Store#sort that has changed. Restoring the previous version fixes the behaviors (see my comments to find the modified lines):
Ext.define(null, {
override: 'Ext.data.Store'
,sort: function(sorters, direction, where, doSort) {
var me = this,
sorter,
newSorters;
if (Ext.isArray(sorters)) {
doSort = where;
where = direction;
newSorters = sorters;
}
else if (Ext.isObject(sorters)) {
doSort = where;
where = direction;
newSorters = [sorters];
}
else if (Ext.isString(sorters)) {
sorter = me.sorters.get(sorters);
if (!sorter) {
sorter = {
property : sorters,
direction: direction
};
newSorters = [sorter];
}
else if (direction === undefined) {
sorter.toggle();
}
else {
sorter.setDirection(direction);
}
}
if (newSorters && newSorters.length) {
newSorters = me.decodeSorters(newSorters);
if (Ext.isString(where)) {
if (where === 'prepend') {
// <code from 4.2.1>
// me.sorters.insert(0, newSorters);
// </code from 4.2.1>
// <code from 4.2.0>
sorters = me.sorters.clone().items;
me.sorters.clear();
me.sorters.addAll(newSorters);
me.sorters.addAll(sorters);
// </code from 4.2.0>
}
else {
me.sorters.addAll(newSorters);
}
}
else {
me.sorters.clear();
me.sorters.addAll(newSorters);
}
}
if (doSort !== false) {
me.fireEvent('beforesort', me, newSorters);
me.onBeforeSort(newSorters);
sorters = me.sorters.items;
if (sorters.length) {
me.doSort(me.generateComparator());
}
}
}
});
set sortable: true either on a defaults config for the grouping column or as a config on the child columns themselves. e.g.
{
// NOTE: these two are grouped columns
text: 'Close',
columns: [{
text: 'Value',
minWidth: 100,
flex: 100,
sortable: true,
dataIndex: 'ValueHeld_End'
}, {
text: 'Total',
minWidth: 110,
flex: 110,
sortable: true,
dataIndex: 'TotalPnL'
}]
}
How to group header like grid below in extjs:
|-------------- A1 header------------|--------------B1 Header---------------|
|----A2Header---|---A3Header---|----B2Header---|---B3Header------|
|-----A2Data------|----A3 Data------|-----B2 Data------|-----B3 Data-------|
|-----A2Data------|----A3 Data------|-----B2 Data------|-----B3 Data-------|
my code extjs:
plColModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{ header: "A2Header", dataIndex: 'A2Data' },
{ header: "A3Header", dataIndex: 'A3Data' },
{ header: "B2Header", dataIndex: 'B2Data' },
{ header: "B3Header", dataIndex: 'B3Data' }
]);
I remember how I've spend a lot of time trying to understand the code in the example Sencha provided for ColumnHeaderGroup. I've made a 6-level column group header several days ago and it is not that difficult.
Put all of your column headers in an object as object keys for the following headers. Last headers' followers will be the columns' properties:
var chstructure = {
'A1 header' : {
'A2Header' : {'A2Data' : {'A2Data' : {'dataIndex' : 'A2', 'width' : 100}}},
'A3Header' : {'A3Data' : {'A3Data' : {'dataIndex' : 'A3', 'width' : 100}}}
},
'B1 header' : {
'B2Header' : {'B2Data' : {'B2Data' : {'dataIndex' : 'B2', 'width' : 100}}},
'B3Header' : {'B3Data' : {'B3Data' : {'dataIndex' : 'B3', 'width' : 100}}}
}
};
You'll need some arrays to put the headers in: these arrays will be the rows in your column header group. You'll also need a fields array: it will contain the fields for your store. Don't forget to initialize some colspan variables (I'll name them len n ) that will keep count of the colspan for each column header (in this example 'A1 header' has 2 children and 'A2Header' has only 1), and some width variables (wid n ), for each header's width.
var Row1contents = [], Row2contents = [], Row3contents = [], Row4contents = [];
var len1 = 0, len2 = 0, len3=0, wid1 = 0, wid2 = 0, wid3 = 0;
var fields = [];
Now you may finally parse chstructure in order to retrieve the column headers. Use Ext.iterate for that:
Ext.iterate (chstructure, function(Row1, Row1structure){
Ext.iterate (Row1structure, function(Row2, Row2structure){
Ext.iterate (Row2structure, function(Row3, Row3structure){
Ext.iterate (Row3contents, function(Row4, Row4structure){
len1++;len2++;len3++;
wid1+=Row4structure['width'];
wid2+=Row4structure['width'];
wid3+=Row4structure['width'];
Row4contents.push({
dataIndex: Row4structure['dataIndex'],
header: Row4,
width: Row4structure['width']
});
fields.push({
type: 'int', // may be 'string'
name: Row4structure['dataIndex']
});
});
Row3contents.push({
header: Row3,
width: wid3,
colspan: len3
});
len3=wid3=0;
});
Row2contents.push({
header: Row2,
width: wid2,
colspan: len2
});
len2=wid2=0;
});
Row1contents.push({
header: Row1,
width: wid1,
colspan: len1
});
len1=wid1=0;
});
View the 4 arrays in your console and ensure they contain all data you set. The last step is to configure the grid width the ColumnHeaderGroup plugin. Use property
plugins: [new Ext.ux.grid.ColumnHeaderGroup({
rows: [Row1Group, Row2Group, Row3Group]
});
Set columns : Row4contents for your grid and fields : fields for your grid's store.
Happy coding!
refer this :
ColumnHeaderGroup
Here is one great example by Sencha
http://dev.sencha.com/deploy/ext-3.4.0/examples/pivotgrid/people.html
In an ExtJS GridPanel, is there a way to design a column whose sole purpose is to act as a serial number column? This column will not need a dataIndex property.
Right now, I am using a custom row numberer function, but this means the row numberer is defined in the grid.js file and all columns from grid.ui.js needs to be copied into grid.js.
I am using the Ext designer.
EDIT: The crux of my question is: Is there a way to define a row numberer using the Ext designer?
All you need is an Ext.grid.RowNumberer in your column definition.
var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Name", width: 80, sortable: true},
{header: "Code", width: 50, sortable: true},
{header: "Description", width: 200, sortable: true}
]);
Not an answer, but just want to share this:-
On top of the Ext.grid.RowNumberer, you can have this small nifty hack which will increments your numbers correctly according to the page number that you are viewing if you have implemented PagingToolbar in your grid.
Below is my working example. I extended the original Ext.grid.RowNumberer to avoid confliction.
Kore.ux.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer: function(v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
var st = record.store;
if (st.lastOptions.params && st.lastOptions.params.start != undefined && st.lastOptions.params.limit != undefined) {
var page = Math.floor(st.lastOptions.params.start/st.lastOptions.params.limit);
var limit = st.lastOptions.params.limit;
return limit*page + rowIndex+1;
}else{
return rowIndex+1;
}
}
});
And the code below is the original renderer from Ext.grid.RowNumberer, which, to me, pretty ugly because the numbers is fixed all the time no matter what page number it is.
renderer : function(v, p, record, rowIndex){
if(this.rowspan){
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
return rowIndex+1;
}
For version 4.2 very very easy:
Just add a new column like this:
{
xtype: 'rownumberer',
width: 40,
sortable: false,
locked: true
}
ExtJS 4.2.1 working code below:
// Row numberer correct increasing
Ext.override(Ext.grid.RowNumberer, {
renderer: function(v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
var st = record.store;
if (st.lastOptions.page != undefined && st.lastOptions.start != undefined && st.lastOptions.limit != undefined) {
var page = st.lastOptions.page - 1;
var limit = st.lastOptions.limit;
return limit*page + rowIndex+1;
} else {
return rowIndex+1;
}
}
});