Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
Problem with case ig-combobox in ig-dialog
posted

I have problem when generate combobox (about 100 combobox) in ig-dialog
- HTML DOM initialization lost more 5 sec.
- After initialization, event click to combobox - drag drop very slowexample-igdialog-igcombobox.zip

Please check attach example

What is solution for issue?

Parents Reply
  • 140
    Offline posted in reply to Hieu Nguyen

    Hello,

    Thank you for your patience!

    The behavior, that you are seeing on your side is caused due to a big load of elements in the browser, which IE 11 cannot handle very softly. 

    So the solution for this is to load on demand the combos. You can load 20 combos initially and with the help of igScroll you can implement a logic to load combos based on some behavior(E.g. igScroll height, combo height, wheel step etc.). This will make the initial load of the dialog content faster.

    The drag issue can be prevented with the following approach:

     - add a div wrapper to the combos:

    <div id="combo-content">
    					<div id="comboIG1"></div>
    					<div id="comboIG2"></div>
    					<div id="comboIG3"></div>
    					<div id="comboIG4"></div>
    					<div id="comboIG5"></div>
    					....
    					
    </div>					

    - add a comboState Map during combo initialization to have a reference to the combo state:

            	var comboState = new Map();
    			$("#openDialog").on({
    				click: function (e) {
    					// Open the igDialog
    					$("#dialog").igDialog("open");
    
    					for (var i = 1; i <= 100; i++) {
    						$("#comboIG" + i).igCombo({
    							highlightMatchesMode: "contains",
    							responseDataKey: "d.results",
    							valueKey: "Name",
    							width: "325px",
    							closeDropDownOnBlur: true,
    							visibleItemsCount: 3,
    							dataSource: "https://igniteui.com/api/employees?callback=?",
    							headerTemplate: "<div id='comboHeaderTemplate' class='comboTemplates'>Employees</div>",
    							footerTemplate: "<div id='comboFooterTemplate' class='comboTemplates'>More information at <a href='https://www.infragistics.com' target='_blank'>https://www.infragistics.com</div>",
    							itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://www.infragistics.com' target='_blank'></a></div><div class='empInfo'><span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"
    						});
    						comboState.set(i, $("#comboIG" + i));
    					}
    				}
    			});

    - add an event listener to the dialog  dragstart event, where you will remove the combo wrapper from the DOM with all the combos in it

    $( "#dialog" ).on( "dragstart", function( event, ui ) {
    		document.getElementById("combo-content").remove();
    });

    - add an event listener to the dialog dragstop event, where you will render the combos again with the help of the comboState Map, which will render the combo with their last modified state:

    $( "#dialog" ).on( "dragstop", function( event, ui ) {
    	var $div = $("<div id= 'combo-content'></div>");
    	$(".ui-igdialog-content").append( $div );
    	for (let index = 1; index <= 100; index++) {
    		$("#combo-content").append(comboState.get(index)[0]);	
    	}
    });

    This way on drag start there will be no combos in the DOM and the drag (in IE 11) will be smooth, after the drag the combos will render with their last modified state.

    This configuration is if the closeDropDownOnBlur is set to true. If you set this property to false, you have to add

     

    $(".ui-igcombo-dropdown").hide();
    to the dragstart event handler and 

    	$(".ui-igcombo-dropdown").show();
    

    to the dragstop event handler.

    Please, let me know if you have any questions.

    Best Regards,
    Hristo Popov

Children
No Data