Excessive rendering in ListBox

[brojgarParticipant]

Hello, I have a data adapter driven ListBox with a custom renderer. Every time ListBox is initialized all items on the list (not just visible) are rendered multiple times. This also happens when the ListBox container is resized. I know that ListBox only renders visible items so all that surplus rendering seems strange and it is slow.

Is this normal behavior? Is there a way to prevent that?

(I am not calling invalidate, render or refresh from within my code)

Thanks for your answer.

Regards.

Iztok

[HristoParticipant]

Hello brojgar,

Please, provide us an example with this scenario if it is possible. (better in https://www.jseditor.io/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[brojgarParticipant]

Thanks for your answer. Code is below. Are there circumstances when all the items on the list must be (re)rendered? Or always just the visible ones?

function createListBox() {

		var arr = getArray();

		var source = {
			datatype: "array",
			datafields: [{
				name: 'text',
				type: 'string'
			}, {
				name: 'line',
				type: 'string'
			}],
			id: '_id',
			localdata: arr
		};

		var settings = {
			async: false
		};
		var dataAdapter = new $.jqx.dataAdapter(source, settings);
		dataAdapter.dataBind();

		$("#jumps_list").jqxListBox({
			theme: "metro",
			selectedIndex: 0,
			autoItemsHeight: false,
			equalItemsWidth: true,
			enableSelection: true,
			enableHover: true,
			filterable: true,
			filterDelay: 100,
			filterHeight: 25,
			filterPlaceHolder: "<filter>",
			searchMode: "containsignorecase",
			checkboxes: false,
			incrementalSearch: false,
			multiple: false,
			multipleextended: false,
			scrollBarSize: 4,
			itemHeight: -1,
			autoHeight: false,
			allowDrop: false,
			allowDrag: false,
			source: dataAdapter,
			displayMember: "text",
			valueMember: "line",
			renderer: function(index, label, value) {
				var height = "14";
				console.log("Rendering item");
				return '<div style = "height: ' + height + 'px; max-width: 180px; font-size: .9em; overflow: hidden;">' + label + '</div>';
			},
			width: "100%",
			height: "100%"
		});

	}

[HristoParticipant]

Hello brojgar,

Unfortunately, this rendering callback work on that way.
I would like to suggest you to create one work around with Grid.
It is possible to create Grid to looks like ListBox.
(Only with one coulmn, with filter field etc.)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[brojgarParticipant]

Thanks for the tip, I am giving grid a try. There is one very strange thing, though. I am using the same html setup as before with the listBox, where I used height: "100%" property and it worked perfectly. Substituting listbox with a grid and also using height: "100%", something very strange happens: The grid is not visible at all, but clicking on the empty space does invoke cellselect event correctly, so the grid must be there, with correct height (100%), but just not visible / mot rendered. The div element I use for a grid is part of flex css setup.

Is this something you know about?

Thanks,
Iztok

[HristoParticipant]

Hello Iztok,

It is possible this happen from css style.
Please, provide us example with this issue in jseditor/fiddle for better analyze.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts