Products

[tbettinazzi@axioma.it]

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

• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

Tks for the example.

In the example, however, I don’t see, how to put the progressbar in a modal layer and how to stop ane eliminate it at the end of the loadinbg process.

Tks again

Tullio

[tbettinazzi@axioma.it]

I already use dataSource but it seems a little better but is stil slow more than standard html select.

Tks

• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.
• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

My 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]

Unfortunately 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]

Tested 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]

Will that issue be resolved in the next release ?

Tks

[tbettinazzi@axioma.it]

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

• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

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

 

• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.
• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

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 ?

• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.
• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

Another question

is it possible to set the classes of single items by dataSource ?

Could You provide an example ?

Tks

[tbettinazzi@axioma.it]

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

• This reply was modified 1 year, 6 months ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

Name component was set but when appnd to is set to body it is not passed in my tests.

[tbettinazzi@axioma.it]

Tks 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]

I 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

[Author]

Posts