Problem with Custom ListBox Item Renderer

[aoccMember]

I am having an issue with html checkboxes added to listbox items with the custom renderer in IE7.

Hello, first some description about what we are trying to do, since it is somewhat complicated:

The page I am working on is an admin/configuration page where the user is defining the layout and appearance of fields on a different page. On the configurations page, one ListBox contains the list of available fields. The user can then drag these fields into other Listboxes, each of which represents a section that the user is configuring, thereby defining the order and position of the fields. **The ListBoxes representing sections are created dynamically; the user can add and delete sections. When a section is deleted, any fields it held are returned to the available fields ListBox, which is accomplished using the ListBox ‘insertAt’ method. Additionally, each field has two boolean settings which can be toggled, defining further settings for the field (and where the custom renderer for the ListBox comes in).

In order to capture these two boolean properties, I have set up a custom renderer which defines a table containing the label, and two checkboxes. In order to save the state of each checkbox as the item is moved around, and section ListBoxes are added and deleted, I track for each check box of each field in a separate object (since it seems the ‘insertAt’ method only allows you to create an item with a label, and not add in additional datafields), and render listBox items based on this global variable.

The issue shows up in IE7 where when you check a checkbox, and then click on a different item in the list (not neccessarily a different checkbox) the state of the checkbox you had just changed reverts to its original state. My question is if you guys have any suggestions for getting around this. The page needs to be IE 7,8, and 9 compatible. The solution need not necessarily use this checkbox method; in fact we are planning to use CSS to make them look like custom toggle buttons as it is. If there is another solution you could recommend, perhaps combining the jqxToggleButton widget with the ListBox’s custom renderer, that may even be better.

Sorry for the lengthy post, but thanks for the help!

I have mocked up a simple example below showing one listbox so you can see the problem with the checkboxes:

Insert title here

$(document).ready(function() {
var exampleSource = [
‘Item_1’,
‘Item_2’,
‘Item_3’
];

$(“#jqxListBox”).jqxListBox({
source: exampleSource,
width: 250,
height: 400,
allowDrag: true,
allowDrop: true,
renderer: function (index, label, value) {
var table = ” + label + ”;
return table;
}
});

});
var globalCheckboxes = {Item_1: {check1: true, check2: true},
Item_2: {check1: true, check2: false},
Item_3: {check1: false, check2: false}
};
function onclick1(label) {
globalCheckboxes[label].check1 = !globalCheckboxes[label].check1;
}
function onclick2(label) {
globalCheckboxes[label].check2 = !globalCheckboxes[label].check2;
}

[Peter StoevKeymaster]

Hi aocc,

Could you please post the code formatted with the button?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[aoccMember]

Sorry, looks like it got cut off. I have attached the script for the example below.

Problem is in IE 7 when you click on a checkbox, and then click on another listbox item, the state of the first checkbox reverts to what it was before.

$(document).ready(function() {
var exampleSource = [
‘Item_1’,
‘Item_2’,
‘Item_3’
];

$(“#jqxListBox”).jqxListBox({
source: exampleSource,
width: 250,
height: 400,
allowDrag: true,
allowDrop: true,
renderer: function (index, label, value) {
var table = ” + label +

‘
‘;
return table;

});
var globalCheckboxes = {Item_1: {check1: true, check2: true},
Item_2: {check1: true, check2: false},
Item_3: {check1: false, check2: false}
};
function onclick1(label) {
globalCheckboxes[label].check1 = !globalCheckboxes[label].check1;
}
function onclick2(label) {
globalCheckboxes[label].check2 = !globalCheckboxes[label].check2;
}

[aoccMember]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="../jqwidgets/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../jqwidgets/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqx-all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var exampleSource = [
	                    'Item_1',
	                    'Item_2',
	                    'Item_3'
			];
	
	
	
	$("#jqxListBox").jqxListBox({
		source: exampleSource,
		width: 250,
		height: 400,
		allowDrag: true,
		allowDrop: true,
		renderer: function (index, label, value) {
			var table = '<table><tr><td>' + label + '</td><td><input id="' + label + '_check1" type="checkbox"';
			if (globalCheckboxes[label].check1)
				table = table + ' checked="checked"';
			table = table + ' onclick="onclick1(\'' + label + '\')"/></td><td><input id="' + label + '_check2" type="checkbox"'
			if (globalCheckboxes[label].check2)
				table = table + ' checked="checked"';
			table = table + ' onclick="onclick2(\'' + label + '\')"/></td></tr></table>';
			return table;
		}
	});
	
	
	
	
});
var globalCheckboxes = {Item_1: {check1: true, check2: true},
		Item_2: {check1: true, check2: false},
		Item_3: {check1: false, check2: false}
		};
function onclick1(label) {
	globalCheckboxes[label].check1 = !globalCheckboxes[label].check1;
}
function onclick2(label) {
	globalCheckboxes[label].check2 = !globalCheckboxes[label].check2;
}
</script>
</head>
<body>
<div id="jqxListBox">		
</div>
</body>
</html>

[Peter StoevKeymaster]

Hi aocc,

The issue occurs from the fact that in the renderer function are rendered Input tags with dynamic states. The “renderer” function will not be capable for dealing with that scenario as it expects a static content for the list items. We will consider improving its behavior in the future versions. For displaying checkboxes, you might consider the built-in checkboxes functionality.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[aoccMember]

Thanks for your response, Peter. Sadly I need two checkboxes (otherwise trust me, I would take advantage of the built ones). I do like the drag and drop functionality, however. Is the drag and drop widget capable of handling elements with dynamic states, or could I expect similar issues?

[Author]

Posts