Navigation with jqxSplitter and jqxTree

[shaliniMember]

Hi,

In demos under jqxSplitter, there is a sample for ‘Integartion with jqxTree (navigation.html)’. This program works fine.
I tried to modify this program like instead showing the elements name, i had tried to create different buttons on tree item click/selection.
Like for example, On selection of ‘Today’ it should display ‘save’ button and on selection of ‘Contacts’ it should display ‘quit’ button. It displays the buttons. But it is not considereing the theme set for it. i.e. it does not include the id. Can you please help me resolve this issue. Below is the code.

In this sample is demonstrated how to create a basic navigation
with jqxTree and jqxSplitter.

$(document).ready(function () {
var theme = ‘ui-redmond’;
// Create jqxTree
$(‘#jqxTree’).jqxTree({ theme: theme, height: ‘100%’, width: ‘100%’ });
$(“#splitter”).jqxSplitter({ theme: theme, width: 650, height: 400, panels: [{ size: 250}] });

$(‘#jqxTree’).bind(‘select’, function (event) {

var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);

if(item.label == ‘Today’)
{
alert(item.label);
//create buttons
$(‘#saveButton’).jqxButton({ theme: theme, width: ’70px’ });
$(“#ContentPanel”).html(” Today “);

}

if(item.label == ‘Contacts’)
{
alert(item.label);
//create buttons
$(‘#quitButton’).jqxButton({ theme: ‘ui-redmond’, width: ’70px’ });
$(“#ContentPanel”).html(“”);
}
//$(“#ContentPanel”).html(“

” + event.args.element.id + “

“);

});
});

Mail

Calendar

Contacts

Inbox (3)

jQWidgets

Admin

Corporate

Finance

Other

Personal

Deleted Items (10)

Today

Last Week

Last Month

Notes

Settings

Favorites

Regards,
Shalini S.

[shaliniMember]

$(document).ready(function () {
var theme = ‘ui-redmond’;
// Create jqxTree
$(‘#jqxTree’).jqxTree({ theme: theme, height: ‘100%’, width: ‘100%’ });
$(“#splitter”).jqxSplitter({ theme: theme, width: 650, height: 400, panels: [{ size: 250}] });

$(‘#jqxTree’).bind(‘select’, function (event) {

var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);

if(item.label == ‘Today’)
{
alert(item.label);
//create buttons
$(‘#saveButton’).jqxButton({ theme: theme, width: ’70px’ });
$(“#ContentPanel”).html(” Today “);

}

if(item.label == ‘Contacts’)
{
alert(item.label);
//create buttons
$(‘#quitButton’).jqxButton({ theme: ‘ui-redmond’, width: ’70px’ });
$(“#ContentPanel”).html(“”);
}
//$(“#ContentPanel”).html(“

” + event.args.element.id + “

“);

});
});

[Peter StoevKeymaster]

Hi shalini,

Did you include the jqx.ui-redmond.css in your project?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts