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?
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://ko.infragistics.com' target='_blank'>https://ko.infragistics.com</div>", itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://ko.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
Thank you for contacting us!
I am currently investigating the behavior you are seeing on your side and I will provide you with a proper solution next week.
Update information:
ignite-ui-full 18.0.72
IE 11
Please help me