I have a select box with exactyl 9 items and would like to adjust the hight in a manner that all items are shown. By default the ninth element ist hidden and the user needs to scroll down.
I have the following code:
var selectbox = new qx.ui.form.SelectBox());
var list = selectbox.getChildControl( 'list' );
list.setHeight( 600 );
This code has no effect to the child control list
The maxListHeight property should do what you need
http://www.qooxdoo.org/current/api/#qx.ui.form.AbstractSelectBox~maxListHeight
Related
I am trying to add a new empty row at the beginning of grid on external button click. Grid is showing perfectly fine.
<wj-flex-grid #flex
[itemsSource]="data"
[isReadOnly]="true"
[headersVisibility]="'Column'"
[selectionMode]="'ListBox'"
(selectionChanged)="gridSelectionChange($event, flex)"
(loadedRows)="onGridLoaded($event)">
</wj-flex-grid>
and data using collectionView:
this.data = new wjcCore.CollectionView(records);
Using [allowAddNew] = 'true', It adds new row in bottom by default.
But I want to add at beginning on button click.
Updated:
addNewRow(ctl) {
this.data.addNew();
}
where addNewRow working fine but adding in bottom:
<a (click)="addNewRow(flex)">add new</a>
Please help how I can achieve this.
Thanks
To set the new row at top, wijmo grid provides a property newRowAtTop.
Modify your code like below:
<wj-flex-grid #flex
[newRowAtTop] = "true"
[itemsSource]="data"
[isReadOnly]="true"
[headersVisibility]="'Column'"
[selectionMode]="'ListBox'"
(selectionChanged)="gridSelectionChange($event, flex)"
(loadedRows)="onGridLoaded($event)">
</wj-flex-grid>
Note the [newRowAtTop] = "true" part in above code.
Following description of newRowAtTop is copied from this link:
Gets or sets a value that indicates whether the new row template
should be located at the top of the grid or at the bottom.
If you set the newRowAtTop property to true, and you want the new row
template to remain visible at all times, set the frozenRows property
to one. This will freeze the new row template at the top so it won't
scroll off the view.
The new row template will be displayed only if the allowAddNew
property is set to true and if the itemsSource object supports adding
new items.
I am trying to bind a Kendo UI Grid to an object on $scope instead of to kendo.data.dataSource. The grid shows the data (which is in the object) but if I change the data or add new row, the changes are not reflected in the $scope object. Why is that?
My real problem is, I want to show two grids top & bottom and when the user selects a row from top grid, the bottom grid should be populated with the details. However, these details are already fetched and kept in the DataSource of the top grid (hence no transport section for bottom grid) because I want to be able to save any changes in batches.
This is how I am binding my grids
Top Grid
<div kendo-grid="mainGrid"
k-sortable="true"
k-editable="true"
k-selectable="'row'"
k-filterable="true"
k-resizable="true"
k-scrollable='{ "virtual":true }'
k-on-change="selected = dataItem"
k-options="mainGridOptions"
k-height="165">
</div>
Bottom Grid
<div kendo-grid="detailGrid"
k-editable="true"
k-selectable="'row'"
k-options="detailGridOptions"
k-data-source="selected.Details"
k-height="125"></div>
This is how I add record to bottom grid
$scope.detailGrid.dataSource.add();
So far, I didn't get how to bind Kendo UI grid to an object on $scope. However, for my real problem, I have found a work around.
I bound on-save event of the child grid, and explicitly marked the current row as dirty.
$scope.onDetailGridSave = function () {
$scope.selected.dirty = true;
};
and in HTML
k-on-save="onDetailGridSave()"
I have a dialog box with a dropdown (name="number", xtype="selection") widget in a tab. While loading the dialog, I need to fetch the value in this dropdown to display/hide another tab.
Both the tabs are in the same dialog (xtype="tabpanel")
I tried adding a ExtJS code as a 'listener' in the 2nd tab (which needs to be hidden/displayed) but it didn't work:
<listeners
jcr:primaryType="nt:unstructured"
render="function() {alert(this.findParentByType('tabpanel').getFieldValues('number')); }"/>
If you take a look at the OOB list component, it has the functionality you are after.
It implements two listeners for a drop-down selection that contains the different choices for which tab to show:
listeners
loadcontent ->
function(){
this.findParentByType('tabpanel').manageTabs(this.getValue(),true);
}
selectionchanged ->
function(box,value){
box.findParentByType('tabpanel').manageTabs(value);
}
Whenever the selection changes it will manage the tab with the selected value, also it will do this when the content
is loaded so you wont have to change the value all the time for the changes to take effect.
You will also see the actual tabs and that they are implementing a listener for rendering:
render ->
function() {
//The different panels will have to have the index corresponsing to their order in the node structure
this.findParentByType('tabpanel').hideTabStripItem( 'the index for the tab' );
}
Finally for this to work, the main tabpanel needs to have the function "manageTabs" defined as a property:
function(tab,noSwitch){
//Here you will have to specify the different node names for the panels
var tabs=['tab1','tab2','tab3',....,'tab n'];
var index=tabs.indexOf(tab);
if(index==-1) return;
for(var i=1;i<tabs.length;i++){
if(index==i){
this.unhideTabStripItem(i);
}else{
this.hideTabStripItem(i);
}
}
this.doLayout();if(!noSwitch)this.activate(index);
}
So this would be possible to just modify a little for your example to work :)
Hope it helps
/Johan
I have a Janus.Windows.GridEX.GridEX 3.5 control with up to 1000 rows. I am setting tooltips on all the cells after the data is bound:
grid.CellToolTip = CellToolTip.UseCellToolTipText;
grid.SetDataBinding(myDataSet.MyTable, "");
gridMain.RetrieveStructure();
//this loops through all the 1000 rows, .Length is correct
foreach (var gridExRow in grid.GetRows())
{
var cell = gridExRow.Cells[0];
cell.ToolTipText = "Foo";
}
However, when hovering over the cells, the tooltips are displayed only on rows which were originally in view (without scrolling). When I scroll down, the default tooltip is displayed on cells, showing the column name.
Is this a bug or is there other way how to set tooltips for cells which are shown only when scrolled down?
The only solution that I found will work is to attach to the Scroll event of the grid and re-set all the ToolTipTextproperties again.
It seems to perform well enough with my data set.
I'm developping with extjs4.
I have two grids as shown in the image, I want when I click on the line of Grid Panel 1 that contanis Number 1, the Grid Panel 2 will show only lines that contains Number 1.
That is pretty much straightforward; subscribe to the select event of the first grid and within that handler filter the store of the second grid. That's it.
grid1.on('select', function(grid,record) {
grid2.store.clearFilter(true); // see http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-clearFilter
grid2.store.filter('Number', record.get('Number');
},this);