Update information:

ignite-ui-full 18.0.72

IE 11

Please help me

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();

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

to the dragstop event handler.

Please, let me know if you have any questions.

Best Regards,
Hristo Popov