@tbettinazziaxioma-it
@tbettinazziaxioma-it
Forum Replies Created
-
I created a testcase to reproduce the problem.
Is quite huge because I copied it from my real world.
Please provide me a way to send You the code.
Not all the code is needed but if I can’t clean up the unneeded parts.
The examples shows that the page buid up time is quite long (6 seconds) and it depends entierely from a large dropdown list.
Please suggest a solution to improve significantely the response time.
Tks
I reproduced at least aprtially the problem on Your example (but I was not able to save it).
I simply added a new class.
This is the modified css
html, body { padding: 10px; }
.bg-red .smart-list-item-container {
background-color: red;
}smart-drop-down-list {
min-height: 35px;
height: auto;
width: 300px;
}
.elemento_list_item {
height: 20px;
}.elemento_list_item .smart-content {
height: 20px;
}And this is the modified js
window.onload = () => {
const dropDownList = document.querySelector(‘smart-drop-down-list’);
dropDownList.dataSource = [
{ label: “WAM ROMANIA”, value: “AF”, class: ‘bg-red’ },
{ label: “WAM PRODUCT”, value: “AA” }
]dropDownList.dataSource.forEach(element => {
const item = dropDownList.getItem(element.value)
console.log(item);
item.classList.add(“elemento_list_item”);
item.classList.add(element.class);
});}
Tks
Tks, more or less solved.
I still have a problem, when the dropdown list opens I see the following effects :
- all elements have the correct height (setted by a class) but the last one which is larger (eg 50px vs 20px)
- down of the last element I’ve a lot of white space (more or less 50px)
Here my css definitions :
smart-drop-down-list {
min-height: 35px;
height: auto;
}.smart-list-item-container img {
width: 100%;
height: 100%;
}smart-list-item .smart-content,
smart-list-item .smart-overlay,
smart-list-item,
smart-drop-down-list {
height: 100px;
}.smart-list-item-container .image-description {
display: block;
position: absolute;
z-index: 99999;
top: 0;
left: 70%;
}I can provide You a printScreen of the noisy effects.
Tks
Tks for your answer, however it seems that loading data from a dataSource is faster than create many <smart-list-items> and than I’m in an impasse :
- if I use a dataSource I loose the coloration features I need
- if I use <smart-list-items> I get poor preformances when I’ve large dropdown list
Could You suggest a way to solve that problem ?
Tks
P.S. : Is there some url location where I can see what’s allowed in dataSource and what’s not ?
Anyway I tested
<smart-drop-down-list filterable=”true” filter-mode=”containsIgnoreCase” id=”e47522256″ min-length=”1″ selectionMode=”zeroOrOne” class=”elemento_combobox_valore” name=”e47522256″ selected-indexes=”[4]” required=”” onchange=”mostraAlertMsgOption(this); eseguiRefresh(this);” onfocus=”on_focus(this)”
data-source=[{label: ‘WAM ROMANIA’, value: ‘AF’}, {label: ‘WAM PRODUCT’, value: ‘AA’}]>
</smart-drop-down-list>And I allways get an error :
expected property name or ‘}’ at line 1 column 3 of the JSON data
What’s wrong ?
Tks
