jqx Tree checkbox issue

[gmarrufoMember]

I have created a jqxTree with checkboxes, the checkboxes can be seen no problem besides each node however when I click in any of them I can’t get them checked (selected).

Code Extract:

function Tool(data, parent) {
var s = data.text;
var theme = getDemoTheme();
var records = s.split(“\|”);
$(‘#jqxTree’).jqxTree( {
source : records, height : ‘500px’, width : ‘500px’, checkboxes: true, theme: theme
});
$(“#jqxBtnGoBack”).jqxButton( {
width : ‘150’, height : ’25’
});
$(“#jqxBtnSelectCC”).jqxButton( {
width : ‘150’, height : ’25’
});

$(“#jqxBtnGoBack”).bind(‘click’, function () {
parent.getTreeData(“Cost Center”);
});

$(“#jqxBtnSelectCC”).bind(‘click’, function () {

});

$(‘#jqxTree’).on(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
var label = item.label;
parent.getTreeData(label);
});
}

Thanks for your help,

GM

[Peter StoevKeymaster]

Hi gmarrufo,

Do you have any other frameworks on your page – like jQuery UI with jQuery 1.9?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gmarrufoMember]

Hi Peter,

Thanks for the reply, I’m glad this forum replies to the issues not like some others that I have to deal with

I actually load jquery-1.7.1 here is the snippet of code I use for such:

yepnope({
load : [‘resources/js/jquery-1.7.1.js’, ‘resources/img/splitter.png’, ‘resources/js/knockout-2.1.0.js’, ‘resources/js/sammy-0.7.1.js’, ‘resources/js/xdate-0.7.0.js’, ‘resources/js/jquery.form.js’, ‘resources/js/gettheme.js’, ‘resources/js/jqxcore.js’, ‘resources/js/jqxdata.js’, ‘resources/js/jqxbuttons.js’,’resources/js/jqxscrollbar.js’,’resources/js/jqxpanel.js’, ‘resources/js/jqxtree.js’, ‘resources/js/jqxcheckbox.js’],
complete: function() {
yepnope({
load : [‘resources/js/PIE-1.0.0.js’ ],
complete: function() {
yepnope({
load : [‘resources/js/posts-0.0.1.js’ ],
complete: function() {
$(‘.init’).each(function() {
$(this).removeClass(“init”);
});
}
});
}
});
}
});

I wanted to use a more updated version of the jquery however I don’t know the impact on my existing code.

Again thanks for the reply.

G

[gmarrufoMember]

Hi Peter,

I decided to bite the bullet and move to jquery-1.9.1 and knockout-2.2.1, I’ve got to implement jquery-migrate-1.1.1.js but for the best part my site is working fine, just a little bit more information for you.

Thanks,

G

[krishna476Member]

Hi Peter,

I too encountered the same problem. I am using JqueryUI dialogue. I ahve to implement this tree inside that dialogue. It is using jquery-1.9.1.js. Can you suggest me how I can go further. Thanks in advance.

[Peter StoevKeymaster]

Hi krishna476,

If you use jQuery UI, then update to its latest version. I believe they should have resolved the issue with the “removeClass” function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[krishna476Member]

jQuery UI Dialog – Modal form

<!—->

body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }

$(function () {
var Development_Activity = $(“#Development_Activity”),

tips = $(“.validateTips”);
function updateTips(t) {
tips.text(t).addClass(“ui-state-highlight”);
setTimeout(function () { tips.removeClass(“ui-state-highlight”, 1500); }, 500);
}

$(“#dialog-form”).dialog({
autoOpen: false,
height: 600,
width: 700,
resizable: false,
modal: true,
buttons: {
“save & close”: function () {

},
“save”: function () {

},
Close: function () {

}
},
close: function () {
// allFields.val(“”).removeClass(“ui-state-error”);
}
});

// $(“#dialog-form”).load(“CreateActivity.html “);

var source = [
{
icon: “images/mailIcon.png”, label: “Mail”, expanded: true, items: [
{ icon: “images/calendarIcon.png”, label: “Calendar” },
{ icon: “images/contactsIcon.png”, label: “Contacts”, selected: true }
]
},
{
icon: “images/folder.png”, label: “Inbox”, expanded: true, items: [
{ icon: “images/folder.png”, label: “Admin” },
{ icon: “images/folder.png”, label: “Corporate” },
{ icon: “images/folder.png”, label: “Finance” },
{ icon: “images/folder.png”, label: “Other” },
]
},
{ icon: “images/recycle.png”, label: “Deleted Items” },
{ icon: “images/notesIcon.png”, label: “Notes” },
{ iconsize: 14, icon: “images/settings.png”, label: “Settings” },
{ icon: “images/favorites.png”, label: “Favorites” },
];

// create jqxTree
$(‘#tree’).jqxTree({ source: source, checkboxes: true, width: ‘250px’ });

$(“#create-user”)
.button()
.click(function () {
$(“#dialog-form”).dialog(“open”);
});
});

Development Activity

Activity Code

Activity Url

Created Activities:

Classifier
SubClassifier
Development Activity

Create Activity

This is the code I am using.

[krishna476Member]

Do you mean JQWidgets2.8..?

[Peter StoevKeymaster]

Hi krishna476,

Please, take a look at my post and also make sure that your question is relevant to this Forum topic, too. If it is not, please create a new topic and describe your issue in details. The issue in this topic is related to a conflict between jQuery UI, jQuery and jQWidgets and especially the “removeClass” function of the jQuery Framework.

No, I did not mean jQWidgets 2.8.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[krishna476Member]

Thanks it’s working fine now…

[Author]

Posts