Selected option ?

[n/a]

Hi,

I'm using your Listbox widget and i'm facing this issue:

Everythime that i use it with data, all the options show up selected.

Ex:
<select...>
<option value="1" selected>Item 1</option>
<option value="2" selected>Item 2</option>
<option value="3" selected>Item 3</option>
...

Example here:
https://docs.telerik.com/kendo-ui/api/javascript/ui/listbox/methods/dataitem

When i manually select an option and send that information by POST, in 
the server side i cant know the option selected.

Is there any way to solve this problem?

Thank you

[Georgi]

Hello Miguel,

Based on the provided information I assume that the issue is that when the ListBox is bound to a dataSource (not initialized from already populated select element) all items are initially selected. Please correct me if I am wrong.

I have tested the described behavior in the following demo where the widget is bound to a remote data service and initially the items are not selected:

• https://demos.telerik.com/kendo-ui/listbox/templates

Could you please provide us with the steps to reproduce the behavior?

Having said that, sharing a demo that clearly replicates the issue would definitely help us fully understand the case and we will be able to provide further assistance to the best of our knowledge.


Regards,
Georgi
Progress Telerik

[Kevin]

I have noticed this behavior as well. I think what Miguel is describing is that the markup used to back the widget, specifically the <select> element, is generated with <option> elements that all have the "selected" attribute applied.
The demo that you created, Georgi shows this as well if you look at the dev console:

<div class="k-widget k-listbox k-listbox-toolbar-right" deselectable="on" title="" data-role="draggable" style="">

...

<select id="optional" data-role="listbox" multiple="multiple" style="display: none;"><option value="ALFKI" selected="">Maria Anders</option><option value="ANATR" selected="">Ana Trujillo</option><option value="ANTON" selected="">Antonio Moreno</option><option value="AROUT" selected="">Thomas Hardy</option><option value="BERGS" selected="">Christina Berglund</option><option value="BLAUS" selected="">Hanna Moos</option><option value="BLONP" selected="">Frédérique Citeaux</option><option value="BOLID" selected="">Martín Sommer</option><option value="BONAP" selected="">Laurence Lebihan</option><option value="BOTTM" selected="">Elizabeth Lincoln</option><option value="BSBEV" selected="">Victoria Ashworth</option><option value="CACTU" selected="">Patricio Simpson</option><option value="CENTC" selected="">Francisco Chang</option><option value="CHOPS" selected="">Yang Wang</option><option value="COMMI" selected="">Pedro Afonso</option><option value="CONSH" selected="">Elizabeth Brown</option><option value="DRACD" selected="">Sven Ottlieb</option><option value="DUMON" selected="">Janine Labrune</option><option value="EASTC" selected="">Ann Devon</option><option value="ERNSH" selected="">Roland Mendel</option><option value="FAMIA" selected="">Aria Cruz</option><option value="FISSA" selected="">Diego Roel</option><option value="FOLIG" selected="">Martine Rancé</option><option value="FOLKO" selected="">Maria Larsson</option><option value="FRANK" selected="">Peter Franken</option><option value="FRANR" selected="">Carine Schmitt</option><option value="FRANS" selected="">Paolo Accorti</option><option value="FURIB" selected="">Lino Rodriguez</option><option value="GALED" selected="">Eduardo Saavedra</option><option value="GODOS" selected="">José Pedro Freyre</option><option value="GOURL" selected="">André Fonseca</option><option value="GREAL" selected="">Howard Snyder</option><option value="GROSR" selected="">Manuel Pereira</option><option value="HANAR" selected="">Mario Pontes</option><option value="HILAA" selected="">Carlos Hernández</option><option value="HUNGC" selected="">Yoshi Latimer</option><option value="HUNGO" selected="">Patricia McKenna</option><option value="ISLAT" selected="">Helen Bennett</option><option value="KOENE" selected="">Philip Cramer</option><option value="LACOR" selected="">Daniel Tonini</option><option value="LAMAI" selected="">Annette Roulet</option><option value="LAUGB" selected="">Yoshi Tannamuri</option><option value="LAZYK" selected="">John Steel</option><option value="LEHMS" selected="">Renate Messner</option><option value="LETSS" selected="">Jaime Yorres</option><option value="LILAS" selected="">Carlos González</option><option value="LINOD" selected="">Felipe Izquierdo</option><option value="LONEP" selected="">Fran Wilson</option><option value="MAGAA" selected="">Giovanni Rovelli</option><option value="MAISD" selected="">Catherine Dewey</option><option value="MEREP" selected="">Jean Fresnière</option><option value="MORGK" selected="">Alexander Feuer</option><option value="NORTS" selected="">Simon Crowther</option><option value="OCEAN" selected="">Yvonne Moncada</option><option value="OLDWO" selected="">Rene Phillips</option><option value="OTTIK" selected="">Henriette Pfalzheim</option><option value="PARIS" selected="">Marie Bertrand</option><option value="PERIC" selected="">Guillermo Fernández</option><option value="PICCO" selected="">Georg Pipps</option><option value="PRINI" selected="">Isabel de Castro</option><option value="QUEDE" selected="">Bernardo Batista</option><option value="QUEEN" selected="">Lúcia Carvalho</option><option value="QUICK" selected="">Horst Kloss</option><option value="RANCH" selected="">Sergio Gutiérrez</option><option value="RATTC" selected="">Paula Wilson</option><option value="REGGC" selected="">Maurizio Moroni</option><option value="RICAR" selected="">Janete Limeira</option><option value="RICSU" selected="">Michael Holz</option><option value="ROMEY" selected="">Alejandra Camino</option><option value="SANTG" selected="">Jonas Bergulfsen</option><option value="SAVEA" selected="">Jose Pavarotti</option><option value="SEVES" selected="">Hari Kumar</option><option value="SIMOB" selected="">Jytte Petersen</option><option value="SPECD" selected="">Dominique Perrier</option><option value="SPLIR" selected="">Art Braunschweiger</option><option value="SUPRD" selected="">Pascale Cartrain</option><option value="THEBI" selected="">Liz Nixon</option><option value="THECR" selected="">Liu Wong</option><option value="TOMSP" selected="">Karin Josephs</option><option value="TORTU" selected="">Miguel Angel Paolino</option><option value="TRADH" selected="">Anabela Domingues</option><option value="TRAIH" selected="">Helvetius Nagy</option><option value="VAFFE" selected="">Palle Ibsen</option><option value="VICTE" selected="">Mary Saveley</option><option value="VINET" selected="">Paul Henriot</option><option value="WANDK" selected="">Rita Müller</option><option value="WARTH" selected="">Pirkko Koskitalo</option><option value="WELLI" selected="">Paula Parente</option><option value="WHITC" selected="">Karl Jablonski</option><option value="WILMK" selected="">Matti Karttunen</option><option value="WOLZA" selected="">Zbyszek Piestrzeniewicz</option></select>
</div>

This causes problems when submitted the enclosing form via it's normal mechanisms and is frustrating in MVC applications where model binding bindings the first <option> element it encounters instead of the one selected by the user.

[Kevin]

Based the HTML living spec at https://html.spec.whatwg.org/multipage/form-elements.html#attr-option-selected:
"
The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute. Whenever an option element's selected attribute is added, if its dirtiness is false, its selectedness must be set to true. Whenever an optionelement's selected attribute is removed, if its dirtiness is false, its selectedness must be set to false.
"

Thus, even if the selected attribute is set to an empty string, it's mere existence on an <option> element signals to the user agent that the <option> is selected.

 

[Georgi]

Hi Kevin,

By default when a select element is submitted, only the items with selected attribute are sent to the server. However, the Kendo Listbox is designed to submit all of the items it contains - which requires all items to have the selected attributed.

The main purpose of the Kendo Listbox is the ability to use it in pairs and move the items between them. Then when submitted, on the server all items of both listboxes are received.


Regards,
Georgi
Progress Telerik