[brojgarParticipant]

Good day,
I am using jqx ListBox widget and the only way to have auto-wrapped items without horizontal scrollbar is to use

autoItemsHeight = false;

I know that this property is not documented and that will, as you stated in the forum posts, break the widget (first group name is newer shown) but without it auto wrapping won’t work no matter what I do in custom renderer function. Items with long text will always span all the way and cause horizontal scrolling to take effect. I can set the width of the item’s container (div) to some absolute value, but that won’t work for me as my control is resizable, hence I need something like width: 100%.

Is there some other solution for that? Thanks for your answer.

Regards,
Iztok

[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

[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%"
		});

	}

[brojgarParticipant]

And indeed it does. Thank you and sorry for asking something with a quite obvious answer. But maybe you should also add this test to your jsfiddle example.
iztok

[brojgarParticipant]

Thank you! That solved my problem.
Regards,
i.

[Author]

Posts