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');

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');

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'); 

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.

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'); 

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'); 

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'); 

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'); 

Appends an element to the panel's content.

Code examples

Invoke the append method.

$('#jqxPanel').jqxPanel('append', $('#elementId')[0]);

Prepends an element to the panel's content.

Code examples

Invoke the prepend method.

$('#jqxPanel').jqxPanel('prepend', $('#elementId')[0]);

Remove an element from the panel's content.

Code examples

Invoke the remove method.

$('#jqxPanel').jqxPanel('remove', $('#elementId')[0]);

Clears the panel's content.

Code examples

Invoke the clearcontent method.

$('#jqxPanel').jqxPanel('clearcontent');

Scroll to specific position.

Code examples

Invoke the scrollTo method.

$('#jqxPanel').jqxPanel('scrollTo', 10, 20);

Get the scrollable height. Returns a Number.

Code examples

Invoke the getScrollHeight method.

var height = $('#jqxPanel').jqxPanel('getScrollHeight');

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

Code examples

Invoke the getVScrollPosition method.

var position = $('#jqxPanel').jqxPanel('getVScrollPosition');

Get the scrollable width. Returns a Number.

Code examples

Invoke the getScrollWidth method.

var width = $('#jqxPanel').jqxPanel('getScrollWidth');

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

Code examples

Invoke the getHScrollPosition method.

var position = $('#jqxPanel').jqxPanel('getHScrollPosition');

Focuses the widget.

Code examples

Invoke the focus method.

$('#jqxPanel').jqxPanel('focus'); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxPanel').jqxPanel('destroy');