how to vary splitter height dynamically in kendoUI splitter - javascript

I am using kendoUI splitter.In the left side I have a panel bar and in the right side I have the tabs.I want to increase the splitter height dynamically with the tab content height ,can any one help me how to do this.
I have defined like
$("#splitter").kendoSplitter({ //To Display horizantal splitter
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }],
orientation: "horizontal",
resize: function () {
alert($("#splitter").find(".k-pane")[1].scrollHeight);
//$("#splitter").css("height", $("#splitter").find(".k-pane")[1].scrollHeight);
}
});
but I am gettting "0" in the alert.

You should try the following:
var splitter = $("#splitter").kendoSplitter({ //To Display horizantal splitter
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }],
orientation: "horizontal",
resize: function () {
if(splitter) {
alert(splitter.wrapper.height());
}
//you can also get the panes each on it's own.
//check: console.log(splitter); to see what options are available
}
}).data('kendoSplitter');
splitter.trigger('resize');
Also look at the docs.
JsFiddle

Related

Scrollbar location is wrong in layout : fit

I have a Panel and in that panel I am loading grid dynamically.
Here is code for panel
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
itemId: 'MyGrid',
reference: 'MyGrid',
layout: {
type: 'vbox',
align: 'stretch'
},
items: []
}
and Sample of grid.
Ext.define("MyApp.view.MYGrid", {
extend: 'Ext.grid.Panel',
alias: 'widget.MyGrid',
requires: [
'Ext.grid.filters.Filters',
'Ext.form.field.ComboBox',
],
emptyText: 'No data available.',
disableSelection: true,
margin: '3 3 0 3',
collapsible: true,
multiSelect: false,
closable: true,
columnLines: true,
uniqueFields: [],
});
initComponent: function() {
var me = this;
me.fields = me.prepareFields(me.headersXmlDoc);
me.columns = me.prepareColumns(me.headersXmlDoc);
me.store = me.prepareGridStore(me.headersXmlDoc);
this.callParent(arguments);
},
Now when Grid have enough data then both horizental and vertical scroll is coming correctly but When grid have less data with more columns scrollbar is coming down. I supposed just beow the last record but it comming in down.
All the grid is taking same height though it have a less record.
Example pic
https://i.stack.imgur.com/RKdTb.png
I want scrollbar just below the last data. By debugging I found layout : fit
But not sure how to overcome out from that.
Can anybody help me that. Thanks for help.
You need to apply overflowY as true for grid.I don't think there is some problem with fit layout.If above config doesn't work share some fiddle.

carouFredsel Responsive carousel with items:variable

I am trying to make a carouFredsel responsive carousel that should show a variable amount of elements depending on how many fit in the width. The problem I have is that whenever I set responsive to true, the elements get a 100% with and this is not what I need.
I managed to create a fiddle where I show:
1) a carousel with a 100% width that shows as many elements as they fit and when the browser window gets resized, more or less elements are shown
2) an item image that gets resized according to the size of the screen
I would like to combine 1 and 2 and have a carousel that behaves like 1 with elements that behave like 2.
It is not possible for me to know in advance how many items would fit (not even in percentage) since for each carousel the elements may have any width (though all of them have the same).
Is this possible ? What am I missing ?
http://jsfiddle.net/379zW/2/
var options = {
circular: true,
infinite: false,
auto : false,
responsive: false,
prev : {
button : "#p",
key : "left"
},
next : {
button : "#n",
key : "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);
This might solve your problem:
var options = {
circular: true,
infinite: false,
auto: false,
items: {
width: '100%',
height: 'variable',
visible: {
min: 1,
max: 999
}
},
responsive: false,
prev: {
button: "#p",
key: "left"
},
next: {
button: "#n",
key: "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);

panel not displayed sencha touch 2

I have a 'vbox' panel as below,
{xtype:'panel',
id:'srchResPanel',
layout:'vbox',
scrollable:false,
items:[
{
xtype:'toolbar',
docked:'top',
height:46,
style:'border-top-left-radius:10px;',
title:'some title'
}
]}
I am trying to add 2 panels dynamically to the above panel, they are as below
var header = Ext.create('Ext.Panel', {
height:40,
width:'100%',
scrollable: {
direction: 'horizontal',
directionLock: true
},
layout:'hbox',
});
header.setHtml('<div style="font-size:15px;>header</div>');
and
var grid = Ext.create('Ext.Panel', {
width:'100%',
scrollable: {
direction: 'horizontal',
directionLock: true
},
layout:'vbox',
});
Ext.getCmp('srchResPanel').add(header);
Ext.getCmp('srchResPanel').add(grid);
when i add the above 2 panels to the top panel, only the first panel(header) is displayed
the second panel(grid) is not getting displayed.
any help is appreciated.
thanks in advance.
You need to specify height for your second panel as well.

Auto Scroll is not working in viewport in Ext JS

I have to allow scrolling in the view port items. I tried the below code. But its not working.
var viewport = new Ext.Viewport({
layout :'column',
applyTo : 'divPanel',
items : [{
title: 'title',
collapsible: true,
autoScoll: true,
columnWidth: .57,
items: [grid],
width: 300
},{
columnWidth: .01,
},{
columnWidth: .42,
autoScoll: true,
collapsible: true,
items:[Panel],
width: 250
}]
});
Any help is must appreciated..thankz
In order to have a scroll, you must define a height on the components that are inside the ViewPort.

expand Ext JS GridPanel column width

I using Ext JS 2.3.0 and have a GridPanel that looks like this:
I want to expand the width of the column such that the scroll bar is pushed over the extreme right of the panel, thus eliminating the empty space to the right of the scroll bar.
The relevant code is shown below:
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
stripeRows: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
view: new Ext.grid.GridView(),
colModel: colModel,
selModel: selModel,
hidden: true,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
width: 50,
handler: function () {
}
},
{
text: locale["dialogSearch.button.cancel"],
width: 50,
handler: function () {
entitySearchWindow.close();
}
}
]
});
You should use the forceFit config for the grid view:
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
viewConfig: {
forceFit: true
}, ....
I'm not sure if this isn't redundant so you can remove this part view: new Ext.grid.GridView(),
The problem is not the column but the grid itself which does not stretch to fill the window body completely.
Put the layout: 'fit' property onto the window config instead of onto the grid config (where it needs to be removed). You should also remove the height property because the grid height will determined by the window's size.
Add
flex: 1,
to one of the the columns config

Categories