Properties

Name Type Default
autoUpdate Boolean false

Automatically updates the panel, if its children size is changed.

Code examples

Set the autoUpdate property.

$('#jqxPanel').jqxPanel({autoUpdate: true});

Get the autoUpdate property.

var autoUpdate = $('#jqxPanel').jqxPanel('autoUpdate'); 
Try it: autoUpdate is set to true
disabled Boolean false

Sets or gets whether the panel is disabled.

Code examples

Set the disabled property.

$('#jqxPanel').jqxPanel({ disabled:true }); 

Get the disabled property.

var disabled = $('#jqxPanel').jqxPanel('disabled'); 
Try it: disabled is set to true
height Number/String null

Sets or gets the panel's height.

Code examples

Set the height property.

$('#jqxPanel').jqxPanel({height:"400px"});

Get the height property.

var height = $('#jqxPanel').jqxPanel('height');
Try it: height is set to 250
rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxPanel').jqxPanel({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxPanel').jqxPanel('rtl'); 
Try it: rtl is set to true
sizeMode String 'fixed'

Sets or gets the sizing mode. In the 'fixed' mode, the panel displays scrollbars, if its content requires it. In the wrap mode, the scrollbars are not displayed and the panel automatically changes its size.

Possible Values:
'fixed'
'wrap'

Code examples

Set the sizeMode property.

$('#jqxPanel').jqxPanel({sizeMode: "wrap"});

Get the sizeMode property.

var sizeMode = $('#jqxPanel').jqxPanel('sizeMode'); 
Try it: sizeMode is set to 'wrap'
scrollBarSize Number 17

Sets or gets the scrollbar's size.

Code examples

Set the scrollBarSize property.

$('#jqxPanel').jqxPanel({ scrollBarSize: 20 }); 

Get the scrollBarSize property.

var scrollBarSize = $('#jqxPanel').jqxPanel('scrollBarSize'); 
Try it: scrollBarSize is set to 20
theme String ''

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:
  • Include the theme's CSS file after jqx.base.css.
    The following code example adds the 'energyblue' theme.
    
    
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    
  • Set the widget's theme property to 'energyblue' when you initialize it.
Try it: theme is set to 'energyblue'
width Number/String null

Sets or gets the panel's width.

Code examples

Set the width property.

$('#jqxPanel').jqxPanel({width:"200px"});

Get the width property.

var width = $('#jqxPanel').jqxPanel('width');
Try it: width is set to 250

Methods

append Method

Appends an element to the panel's content.

Parameter Type Description
html element Object
Return Value
None

Code examples

Invoke the append method.

$('#jqxPanel').jqxPanel('append', $('#elementId')[0]);
Try it: appends an element in the jqxPanel.
clearcontent Method

Clears the panel's content.

Parameter Type Description
None
Return Value
None

Code examples

Invoke the clearcontent method.

$('#jqxPanel').jqxPanel('clearcontent');
Try it: clears the content of the jqxPanel.
destroy Method

Destroys the widget.

Parameter Type Description
None
Return Value
None

Code examples

Invoke the destroy method.

$('#jqxPanel').jqxPanel('destroy'); 
Try it: destroy the jqxPanel.
focus Method

Focuses the widget.

Parameter Type Description
None
Return Value
None

Code examples

Invoke the focus method.

$('#jqxPanel').jqxPanel('focus'); 
Try it: focuses the jqxPanel.
getScrollHeight Method

Get the scrollable height. Returns a Number.

Parameter Type Description
None
Return Value
Number

Code examples

Invoke the getScrollHeight method.

var height = $('#jqxPanel').jqxPanel('getScrollHeight');
Try it: gets the scroll's height in the jqxPanel.
getVScrollPosition Method

Get the vertical scrollbar's position. Returns a Number.

Parameter Type Description
None
Return Value
Number

Code examples

Invoke the getVScrollPosition method.

var position = $('#jqxPanel').jqxPanel('getVScrollPosition');
Try it: gets the scroll's position in the jqxPanel.
getScrollWidth Method

Get the scrollable width. Returns a Number.

Parameter Type Description
None
Return Value
Number

Code examples

Invoke the getScrollWidth method.

var width = $('#jqxPanel').jqxPanel('getScrollWidth');
Try it: gets the scroll's width in the jqxPanel.
getHScrollPosition Method

Get the horizontal scrollbar's position. Returns a Number.

Parameter Type Description
None
Return Value
Number

Code examples

Invoke the getHScrollPosition method.

var position = $('#jqxPanel').jqxPanel('getHScrollPosition');
Try it: gets the scroll's possition in the jqxPanel.
prepend Method

Prepends an element to the panel's content.

Parameter Type Description
html element Object
Return Value
None

Code examples

Invoke the prepend method.

$('#jqxPanel').jqxPanel('prepend', $('#elementId')[0]);
Try it: prepends an element in the jqxPanel.
remove Method

Remove an element from the panel's content.

Parameter Type Description
html element Object
Return Value
None

Code examples

Invoke the remove method.

$('#jqxPanel').jqxPanel('remove', $('#elementId')[0]);
Try it: removes an element in the jqxPanel.
scrollTo Method

Scroll to specific position.

Parameter Type Description
top Number
left Number
Return Value
None

Code examples

Invoke the scrollTo method.

$('#jqxPanel').jqxPanel('scrollTo', 10, 20);
Try it: scrolls to a specific position in the jqxPanel.