Hello,
We are using the IgniteUI 2013.1 Pivot Grid with a flat data source. The columns in measures are being displayed along the horizontal axis as expected. However, these measures columns are being rendered with lesser width and the data is getting truncated. The grid has area available but somehow rendering the measure columns with lesser width. We looked and could not find anything that allows us to resize the columns in a pivot grid. Is it possible to resize columns in a pivot grid. Or give a minimum width for a measures column?
A timely help is greatly appreciated.
Thanks in advance!
For custom column width you can use this:
$("#pivotgrid").igPivotGrid({
...
gridOptions:
{
defaultColumnWidth: 200
}
});
Resizing is also achievable, but you should provide us with some more information. Are you using ig.loader or not?
Thanks,
M.Yovchev
Thanks a lot for the timely reply. This resolved our issue. However, the best option would be to allow resizing. Yes, we are using ig.loader and have all the js files in place. Is there a feature from the supplied javascript files we can attach to the pivot grid to allow it to support resizing?
Please see below a sample I created to provide information on how we are using the grid. Let me know if you need further information.
$.ig.loader(function () { var datasource = new $.ig.OlapFlatDataSource({ dataSource: orders, metadata: { cube: { name: "Orders", caption: "Orders", measuresDimension: { caption: "Measures", measures: [ { caption: "Orders", name: "Order", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('Order') }, { caption: "Amount", name: "Amount", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('Amount', 2) } ] }, dimensions: [ { caption: "Item", name: "Item", hierarchies: [ { caption: "Item", name: "Item", levels: [ { name: "AllItems", caption: "All Items", memberProvider: function (item) { return "All Items"; } }, { name: "Item", caption: "Item", memberProvider: function (item) { return item.itemType; } } ] } }, { caption: "Customer", name: "Customer", hierarchies: [ { caption: "Customer", name: "Customer", levels: [ { name: "AllCustomers", caption: "AllCustomers", memberProvider: function (item) { return "All Customers"; } }, { name: "Customer", caption: "Customer", memberProvider: function (item) { return item.Customer; } } ] } ] } ] // dimensions }// cube }, // metadata rows: "[Item].[Item]", columns: "[Customer].[Customer]", measures: "[Measures].[Order],[Measures].[Amount]" }); // var datasource $("#pivotView").igPivotGrid({ dataSource: datasource, height: "580px", width: "737px", allowSorting: true, allowHeaderRowsSorting: true, allowHeaderColumnSorting: true, firstSortDirection: "ascending", firstLevelSortDirection: "ascending", gridOptions: { defaultColumnWidth: 75 } }); $("#dataSelector").igPivotDataSelector({ dataSource: datasource, width: "200px" });});
Hi again,
As you are using ig.loader first you should include igGrid.Resizing in the resources like this:
$.ig.loader({
scriptPath: '...',
cssPath: '...',
resources: 'igOlapFlatDataSource, igPivotGrid, igPivotDataSelector, igGrid.Resizing',
ready: function() {<your code here>}
And second thing you should do is to allow the resizing feature in pivot grid like this:
in your code where pivot grid widget options are set write this:
$("#pivotView").igPivotGrid({
.....
gridOptions: {
....
features: [ {name: "Resizing" }]
Hope this will help.
Hi
And what about rows resizing?
Hi, please someone can post a full example for resizing columns with a cube datasource?
$("#pivotGrid").igPivotView({ dataSourceOptions: { xmlaOptions: { serverUrl:.... }}});
thanks :)
J.