@tbettinazziaxioma-it
@tbettinazziaxioma-it
Forum Replies Created
-
AuthorPosts
-
tbettinazzi@axioma.it
ParticipantI already use dataSource but it seems a little better but is stil slow more than standard html select.
Tks
-
This reply was modified 2 years, 8 months ago by
tbettinazzi@axioma.it.
-
This reply was modified 2 years, 8 months ago by
tbettinazzi@axioma.it.
tbettinazzi@axioma.it
ParticipantMy problem is that when the dropdown has many elements (> 500) it’s slow (more than 1 sec to show).
I hoped that a simpler element like smart input was faster.
Isn’t it ?
Tks
tbettinazzi@axioma.it
ParticipantUnfortunately I can’t because my page is generated at runtime and I don’t know which kind of elements are in that page.
Anyway I did it in a simple testcase I created and it doesn’t change the page building time.
On the other hand the js file are cached and the loading time of the js doesn’t seem to be a problem.
Tks
tbettinazzi@axioma.it
ParticipantTested Your suggestion which improves the result from more thn 2 secs to 1.5 secs.
However is still quite long time when I’ve more than a dropdown list in my page.
Is there any way to improve further the performances ?
Tks
tbettinazzi@axioma.it
ParticipantWill that issue be resolved in the next release ?
Tks
tbettinazzi@axioma.it
ParticipantI 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
-
This reply was modified 2 years, 8 months ago by
tbettinazzi@axioma.it.
tbettinazzi@axioma.it
ParticipantTks, 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
-
This reply was modified 2 years, 8 months ago by
tbettinazzi@axioma.it.
-
This reply was modified 2 years, 8 months ago by
tbettinazzi@axioma.it.
tbettinazzi@axioma.it
ParticipantTks 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 ?
-
This reply was modified 2 years, 8 months ago by
tbettinazzi@axioma.it.
-
This reply was modified 2 years, 8 months ago by
tbettinazzi@axioma.it.
tbettinazzi@axioma.it
ParticipantAnother question
is it possible to set the classes of single items by dataSource ?
Could You provide an example ?
Tks
tbettinazzi@axioma.it
ParticipantAnyway 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
-
This reply was modified 2 years, 8 months ago by
tbettinazzi@axioma.it.
tbettinazzi@axioma.it
ParticipantName component was set but when appnd to is set to body it is not passed in my tests.
tbettinazzi@axioma.it
ParticipantTks for your help, I’ll try as soon as possible.
However I need to add, to each value, a class : is it possible with data-source ?
My classes (e.g. bg-1) are defined in this way
.bg-1 .smart-list-item-container {
background-color: blue
}should I change such definitions ?
Tks
tbettinazzi@axioma.it
ParticipantI tested Your solution and it seemed to work.
However it produces a dramatic effect : my dropdown are within a formĀ and, if i set dropDownAppendTo to body, values of the dropdownlist are not passed back.
I need a different solution.
Could You suggest it ?
Tks
Tullio
tbettinazzi@axioma.it
ParticipantTabs are not the main cause of the performance problem.
One, but not the only, problem seems to come out from dropdown lists having a lot of list-items.
I’ve a page with only one dropdown list in it with many (more than 100) list items : the page seems to freeze for 2 seconds before it’s shown correctely.
Is there a workaround for that ?
Tks
tbettinazzi@axioma.it
ParticipantTks but this is not a solution in my environment :
- my page is generated at runtime and then I can’t know a priori how many dropdown list I’ve, nor the id of each, nor how many items in each dropdown list, nor the color of each one and then I can’t use a js to do the job
- not all items should be colored and each one could have its own color
The best solution, if possible, shoud be
<smart-list-item style=”background-color : myCololor;”> or something like that I can generate in a single shot.
Tks
-
This reply was modified 2 years, 8 months ago by
-
AuthorPosts