Check box visible state not working consistantly

[spbroganMember]

Hi,

I have a pretty simple grid with four columns. One of the columns is a checkbox. When I sort my checkbox visible state gets out of whack (only going from checked to unchecked). Oddly enough the internal state is correct. The sorting works correctly and when editing (by clicking the checkbox) the correct value is sent to the updaterow function. The only issue is the visible state. For some reason the checkbox can’t go from Checked to unchecked. The css stays set as class=”jqx-checkbox-check-checked”.

Any ideas would be much appreciated.

I have been running jqwidgets 2.6.1 with jquery 1.9 and also updated to 2.7 with 1.91 and jquery ui 1.10. I get no errors in the console. I use jqx-all.js file.

I have tried in both chrome and firefox with the same result (haven’t tried IE).

var SiteData = {
“users”: [
{
“name”: “Test 1 – admin”,
“createDate”: “2013-01-23T02:53:20.723Z”,
“primaryEmail”: “test1@live.com”,
“userId”: 1,
“isUser”: true,
“isAdmin”: true
},
{
“name”: “Test 2”,
“createDate”: “2013-01-25T10:27:21.383Z”,
“primaryEmail”: “zTest2@gmail.com”,
“userId”: 2,
“isUser”: true,
“isAdmin”: false
},
{
“name”: “Test 3”,
“createDate”: “2013-01-30T19:20:51.487Z”,
“primaryEmail”: “aTest3@yahoo.com”,
“userId”: 3,
“isUser”: true,
“isAdmin”: false
}
]
};

$(document).ready(function () {
var source = {
datatype: “json”,
localdata: SiteData.users,
datafields: [
{name: ‘createDate’, type: ‘date’},
{name: ‘name’},
{name: ‘primaryEmail’},
{name: ‘isAdmin’, type: ‘bool’},
{name: ‘userId’, type: ‘int’}
],
updaterow: function(rowid, rowdata, commit) {
var data = “UserId=” + rowdata.userId.toString() + “&RoleName=Admin&Value=” + rowdata.isAdmin;
$.ajax({
type: “POST”,
url: “/AdminUser/UpdateRole”,
data: data,
cache: false,
error: function (XMLHttpRequest, textStatus, errorThrown) {
siteMsgError(“Http Error ” + textStatus + ” ” + errorThrown);
commit(false);
},
success: function (data) {
if (data.Status != “Success”) {
siteMsgError(“Error Updating User Roles: ” + data.Error);
commit(false);
} else { //success
siteMsg(data.Msg);
commit(true);
}
}
}); // ajax
}
}
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({
autoheight: true,
sortable: true,
width: ‘95%’,
editable: true,
selectionmode: ‘singlecell’,
source: dataAdapter,
columns: [
{ text: ‘Name’, dataField: ‘name’, editable: false},
{ text: ‘Email’, dataField: ‘primaryEmail’, editable: false },
{ text: ‘Create Date’, dataField: ‘createDate’, cellsformat: ‘D’, editable: false},
{ text: ‘Is Admin’, dataField: ‘isAdmin’, columntype: ‘checkbox’, width: ‘100’}
]
}); //close jqxGrid init
}); //close ready

[Peter StoevKeymaster]

Hi spbrogan,

Have you tried that without jQuery UI. There is known conflict between jQuery and jQuery UI which causes the removeClass to do not work. We use the jQuery’s addClass and removeClass methods for adding and removing the Checkbox’s visual states(checked and unchecked).

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[spbroganMember]

Yes that fixed it. Thanks for helping me identify the conflict I was hoping it was a known issue.

My next question is. So what is the recommended solution? Get rid of Jquery UI for pages using jqwidgets? Are there other widgets that conflict with jquery ui (other widgets using add/remove class)? Other ideas or suggestions?

Thanks again
Sean

[Peter StoevKeymaster]

Hi Sean,

I am not sure whether this is actually a bug in jQuery or in jQuery UI, but removeClass works correctly with jQuery 1.8.3. I think that the jQuery Team will resolve the issue for jQuery 1.9.2, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[spbroganMember]

I noticed jquery UI 1.10.1 was released and it is fixed. The change log is here http://jqueryui.com/changelog/1.10.1/ and it includes this

Effects
Fixed: Inclusion of jQuery UI breaks .removeClass(). (#9015, 2ca4d17)

Thanks for your help on identifying the issue.

[Author]

Posts