I have a page with 3 tabs(dijit.layout.TabContainer) and each tab as 2-3 accordians(dijit.layout.AccordionContainer). From a single data store, I am trying to display different grids in each of the accordians.
I am able to display data in a single accordian, but the other grids show up blank, I cant even see headers. If I try to display multiple grids outside the tabs/accordians, it works fine. Not sure what is it that I am missing here.
var jsonStore = new dojo.data.ItemFileWriteStore({ data:{
"identifier": "rowIdentifier",
"label": "gridIdentifier",
"items": [
{
"rowIdentifier": 123,
"gridIdentifier": "labor",
"description": "Project Manager",
"hours": 100.0,
"rate": 100.0
},
{
"rowIdentifier": 234,
"gridIdentifier": "oem",
"description": "Developer",
"hours": 100.0,
"rate": 100.0
}
]
} });
var grid1 = null;
var grid2 = null;
var grid1Layout= [
{ field: "rowIdentifier", width: "auto", name: "Row Identifier",hidden:true },
{ field: "gridIdentifier", width: "auto", name: "Grid Identifier",hidden:true },
{ field: "description", width: "auto", name: "Tier/Description", editable:true },
{ field: "hours", width: "auto", name: "Hours" },
{ field: "rate", width: "auto", name: "Rate <br/>" }
];
grid1 = new dojox.grid.DataGrid({
query: { gridIdentifier: 'labor' },
store: jsonStore,
singleClickEdit: true,
structure: grid1Layout,
rowsPerPage: 6
}, 'grid1Node');
var grid2Layout= [
{ field: "rowIdentifier", width: "auto", name: "Row Identifier",hidden:true },
{ field: "gridIdentifier", width: "auto", name: "Grid Identifier",hidden:true },
{ field: "description", width: "auto", name: "Tier/Description", editable:true },
{ field: "hours", width: "auto", name: "Hours" },
{ field: "rate", width: "auto", name: "Rate <br/>" }
];
grid2 = new dojox.grid.DataGrid({
query: { gridIdentifier: 'oem' },
store: jsonStore,
singleClickEdit: true,
structure: grid2Layout,
rowsPerPage: 6
}, 'grid2Node');
// Call startup, in order to render the grid:
grid1.startup();
grid2.startup();
Below is my HTML
<div style="height: 105px;">
<div dojoType="dijit.layout.TabContainer" style="width: 100%;"
doLayout="false">
<div dojoType="dijit.layout.ContentPane" title="Labor" selected="true">
<div id="LaborAccordian" style="width:auto; height: 300px">
<div dojoType="dijit.layout.AccordionContainer" style="height: 300px;">
<div dojoType="dijit.layout.ContentPane" title="Tab1 Acc1" selected="true">
<div id="grid1Node"></div></div>
<div dojoType="dijit.layout.ContentPane" title="Tab1 Acc2"><div id="SubContractorLaborGridNode"></div></div>
<div dojoType="dijit.layout.ContentPane" title="Tab1 Acc3"><div id="VendedLaborGridNode"></div></div>
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" title="OEM products">
<div id="OEMAccordian" style="width:auto; height: 300px">
<div dojoType="dijit.layout.AccordionContainer" style="height: 300px;">
<div dojoType="dijit.layout.ContentPane" title="Tab2 Acc1"><div id="grid2Node"></div></div>
<div dojoType="dijit.layout.ContentPane" title="Tab2 Acc2" selected="true"></div>
</div>
</div>
</div>
</div>
<!-- end of the div -->
</div>
I have all the appropriate DOJO.requires() in the . Please let me know what I am missing to display the same data store, in different flavors in different accordian containers?
Thanks
SK
From your description, most likely the grid is created successfully, but doesn't show up because the dimension is 0 * 0. The could happen because when the grid is created in a hidden accordion pane, the size of the grid's containing DOM node is actually zero. So when the hidden accordion pane is made visible, the grid size is still zero. This also could happen due to dynamic height and width are specified in the grid's containing node using CSS, e.g. using height or width like 100%. Dynamic height or width may cause problem when calculating the actual height and width.
So my suggestion is to first check the DOM structure using Firebug to see whether the grid is created or not. Most likely you'll see the grid's DOM structure but it doesn't show up because the size is 0 * 0. You can use Firebug to verify it. If this is the case, you can manually instruct the grid to re-calculate its size again by using the resize function. You can use dojo.connect to connect to dijit.layout.AccordionPane's onSelected function and invoke the grid's resize function. Then when a accordion page is selected, the grid inside of it is automatically resized.
I think what Alex Cheng said is correct. And the following changes may slove the problem.
<div id="grid1Node" style="height:100%"></div>
<div id="grid2Node" style="height:100%"></div>
Applying heights for the container of the Grid dom node.
Another solution is to use absolute (not dynamic) height settings, eg:
<div id="grid1Node" style="height:100px"></div>
<div id="grid2Node" style="height:100px"></div>
Related
I am currently working on ag-grid-enterprise 17.1.0 version. My requirement is to display grid's side bar on a button click, kind of toggle. Also, the "Columns" and "Filters" bar orientation should be changed.
Is there any way to accomplish this?
The docs show an example for exactly this usecase:
sideBar = {
toolPanels: [
{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
},
{
id: 'filters',
labelDefault: 'Filters',
labelKey: 'filters',
iconKey: 'filter',
toolPanel: 'agFiltersToolPanel',
}
],
position: 'left', // <---- set position
defaultToolPanel: 'filters'
}
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-balham"
[modules]="modules"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[sideBar]="sideBar" // <----
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
also you can open / close the Sidebar like this:
gridApi.closeToolPanel();
gridApi.openToolPanel("columns");
See here: https://www.ag-grid.com/javascript-grid-side-bar/#side-bar-api
(yes, i know, these docs are for the current Version of ag-grid - but the api should also be similar to the one they used in v17)
I have a barebone React component that uses AG-Grid to render out a table. But I'm running into this issue where the height/top automatically keeps increasing, without any input from me.
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-material.css";
render () {
const colDef = [{
headerName: "Make", field: "make",
}, {
headerName: "Model", field: "model",
}, {
headerName: "Price", field: "price",
}];
const dataRows = [{
make: "Toyota", model: "Celica", price: 35000,
}, {
make: "Ford", model: "Mondeo", price: 32000,
}, {
make: "Porsche", model: "Boxter", price: 72000,
}];
return (
<div className={`ag-theme-material`}>
<AgGridReact
columnDefs={colDef}
rowData={dataRows}
/>
</div>
)
}
I inspected the elements that changes. It looks like Top keeps increasing automatically for this div:
<div class="ag-floating-bottom" role="presentation" style="height: 0px; top: 422px;">
and Height for this, and I have no idea why:
<div class="ag-body ag-row-no-animation" role="presentation" style="height: 516px; top: 56px;">
Note that I tried the other build in themes for ag-grid and ran into the same issue.
I have a layout that I need to put side by side.
Th code is in Extjs but I'm trying to style this container when a values gets selected in the combo box. As in the gif:
https://i.stack.imgur.com/dlgKC.gif
The container is moving upwards when any selection is been made. Is there any way in CSS I can control this behavior on select and make sure it stays still and does not move on selection?
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
}]
}); // end of filteritem
}
},
CSS:
.item div.qx-multi-select-combo-wrap{
position: absolute;
left: 320px;
}
Any idea ? Thanks!
I implemented angular ui-grid which should look like:
Angular ui-grid
But in some scenarios it is becoming like:
Shrinked grid
I need the solution so that the grid width remains intact like in the first image.
It generally shrinks when i hit F12 and then navigate for grid to some other page and then come back.
My grid options are:
$scope.gridOptions = {
enableRowSelection : true,
enableRowHeaderSelection : false,
multiSelect : false,
enableColumnMenus : false,
columnDefs : [ {
"field" : "title",
"displayName" : "Title",
"visible" : true,
"enableHiding" : false,
}, {
"field" : "description",
"displayName" : "Description",
"visible" : true,
"enableHiding" : false
}, {
"field" : "dueDate",
"displayName" : "Due Date (mm/dd/yyyy)",
"cellFilter" : "date:'MM-dd-yyyy HH:mm a'",
"visible" : true,
"enableHiding" : false
}, {
"field" : "status",
"displayName" : "Status",
"visible" : false,
"enableHiding" : false
}, ]
};
HTML:
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="panel panel-default">
<div ui-grid="gridOptions" ui-grid-selection class="grid height-250"></div>
</div>
</div>
Thanks
From looking at the documentation for angular ui grid : http://ui-grid.info/docs/#/tutorial/101_intro, I can make the following suggestions:
Do you have your css defined to something like :
.grid {
width: 500px;
height: 250px;
}
Do you have data in the right format in $scope.gridOptions.data? Are you overriding grid css using eg: float. Its hard to say without a sample plunker.
Have you included the grid css.
I saw the example plunker in the documentation for GridUI: http://plnkr.co/edit/?p=preview and I tried several things, but it was always showing the right width. So its likely to be your external css breaking the layout.
Inspect when its breaking and look for what css is being applied to the shrunk columns and then compare that to the working one. That's the best suggestion I can give here.
Hi i need little help with the scenario i am facing hard to get. i have a horizontal list view of images i want to show only three images on the screen and with center image highlighted.
I tried carousel but only the image highlighted will be scrollable, i want the horizontal kind of smooth scrolling.
Is something like using hbox panel on top of horizontal list view works?
var superpanel = new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
id: 'panel_1',
width: '100%',
layout: 'fit',
items: [
{
xtype: 'list',
flex:1,
id: 'list1',
store: 'samplestore1'
}
]
}
]
});
can someone help with the scenario how to achieve this.
Any help is much appreciated
You don't need carousel for this. Dataview will serve the purpose. Check out this dude:
Ext.define('Example.view.HorizontalList', {
extend: 'Ext.dataview.DataView',
xtype: 'horizontallist',
config: {
inline: {
wrap: false
},
scrollable: {
direction: 'horizontal'
},
//set the itemtpl to show the fields for the store
itemTpl: '{name} {image}',
//bind the store to this list
store: 'xyz'
}
});
You can also check this.