jQuery UI Widgets Forums Lists ListBox Excessive rendering in ListBox

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 6 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Excessive rendering in ListBox #86230

    brojgar
    Participant

    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

    Excessive rendering in ListBox #86241

    Hristo
    Participant

    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

    Excessive rendering in ListBox #86281

    brojgar
    Participant

    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%"
    		});
    
    	}
    Excessive rendering in ListBox #86312

    Hristo
    Participant

    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

    Excessive rendering in ListBox #86343

    brojgar
    Participant

    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

    Excessive rendering in ListBox #86353

    Hristo
    Participant

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.