DropDownlist virtual mode using binding seems to ignore the Value property

[Andrea]

Hello, i have a dropdownlist, virtual mode (the real one is bound to 120K records).

The dropdownlist is bound to a property on a viewmodel.

After selecting an item in the dropdownlist the bound property value became "[object Object]" instead that being set to the value property of the dropdownlist's datasource item.

An example here: https://dojo.telerik.com/EbIbe

1) Looking at the example you'd see that initially the textbox and the dropdownlist are bound to the correct initial value that is "11" for the value property and "T11" for the text property.

2) After selecting an item on the dropdownlist the textbox value became "[object Object]" instead of having the text that is corresponding to the Value property of the selected dataitem.

tried with firefox 58.0.1, chrome 64.0.3282.140 and Microsoft Edge 41.16299.15.0

Any Idea what could be wrong with my case?

 

 

 

 

[Andrea]

Looks like that the problem is not at all related with the "virtual" datasource, the problem is indeed identical when using local datasource, seems that the problem is due to the form binding, if the bound property was undefined at the time the form were bound that is not going to work.

 

the following demonstrate this: if before to call kendo.bind the property "selected.a" exists in the model then it works. the problem is when binding an object that is initially empty. https://dojo.telerik.com/EbIbe/7

Best Regards

Andrea

[Dimitar]

Hello Andrea,

When the selected field is set after the binding of the ViewModel, a dataItem is being returned for selected.a, thus leading to displaying [object Object] in the simple input.

Since the virtualization feature relies on using the dataItem's index internally, I would suggest to use the DropDownList's select event and always update the selected field of the ViewModel as follows:

select: function(e) {
  viewModel.set("selected", e.dataItem);
}

Then, the inputs for displaying the related data can be bound to the Text or Value properties:

<input type="text" id="bb" name="bb" data-bind="value: selected.Text"/>
<input type="text" id="cc" name="cc" data-bind="value: selected.Value"/>

The above is also demonstrated on the following Dojo example.

Regards,
Dimitar
Progress Telerik

[Andrea]

Hi, looks promising but that defeats the purpose of modifying my underlying model, if you look at this, https://dojo.telerik.com/EbIbe/17  initially the dropdown should display "T11" then after selecting an item the modeldata.data[0].a should hold the selected value on the dropdownlist, but as you can see on the div this way the model is not updated correctly.

 

Best Regards

Andrea

 

 

[Andrea]

I created a sligthly more complex dojo example to display the real situation i'm facing, and also please note that the issue is not related to the virtual datasource, it is not working for non virtual dropdownlist. About the example you sent, I do not need to display the value on the nearest textbox, i need to keep a recordset in sync with the dropdownlist, so here is the problem:

https://dojo.telerik.com/EbIbe/19  <- that works but, it is useless because i don't always have an actual object available at the time i'm binding the form.

https://dojo.telerik.com/Uqunic <- that don't and in my opinion it should work the same as the above, the only difference between the two is that in the first case the data has already been downloaded from the remote API at the time the form has been bound, in the second example the data is received after the form has been bound .

https://dojo.telerik.com/OyUpAw  <-that is the worst: the first record still does not exist at the time we bound the form, so that is not going to work in any case.

Why does the dropdownlist act differently if at the time it were bound the bound value exists or not? What are the "dataValueField" and the "dataTextField" supposed to be here for then? What do I have to do if the bounded record is initially empty or if I receive it from the server after the form has been bound?

Note that this is not working neither when bound to a kendo datasource with a full model and schema, so I think there is something wrong either on the binding library or in the dropdownlist library.

 

Best Regards

Andrea

 

[Andrea]

A little addendum:

on the last example https://dojo.telerik.com/OyUpAw/2 after one select a value from the dropdownlist, it gets that stringified value from viewModel

 

{
   "data":[
      {
         "a":{
            "Text":"T2",
            "Value":2
         }
      }
   ],
   "current":{
      "a":{
         "Text":"T2",
         "Value":2
      }
   },
   "currentIndex":0,
   "currentRecord":1,
   "recordCount":1
}

 

 

but i'd expect

{
   "data":[
      {
         "a":2
      }
   ],
   "current":{
      "a":2
   },
   "currentIndex":0,
   "currentRecord":1,
   "recordCount":1
}

 

because the dropdownlist property "dataValueField" is "Value" thus only the Value property of the selected dataItem should be bound to the "current.a" property of the viewModel object.

 

 

[Dimitar]

Hello Andrea,

The DataValueField option simply points to the field in the data item that contains the value of the widget. It cannot be associated with the ViewModel bound to the DOM element. Once the DropDownList is bound to the current.a field of the ViewModel, it has to be updated with the desired value (in this case this is the value of the DropDownList's data item). Achieving this behavior is possible through the select event of the widget, as demonstrated on the following Dojo example:

select: function (e) {
  viewModel.set("current.a", e.dataItem.Value);
  setTimeout(dumpModel, 100);
}

Also, I have modified the ViewModel definition to use a simple array instead of an observableArray for the ViewModel.data field. This is the case, as nesting observable objects is not a supported scenario and might lead to unexpected behavior:

var modeldata = {
  data: [],
  current: {},
  currentIndex: 0,
  currentRecord: -1,
  recordCount: 0
};

With the above modifications, you will notice that new records can be created, and upon choosing a value from the DropDownList, the respective ViewModel.data.a field will be updated with the value of the data item accordingly. 

Regards,
Dimitar
Progress Telerik

[Andrea]

Hi Dimitar, thank you for your reply.

I could be ok with your answer , even if that is not the behavior i'd expect from a dropdownlist, but...

if the DataValueField only points to the fields of the widget that contain the value of the widget, so you mean there is not a relation to the value to be bound on the model, the dropdownlist still have a bug, because if those are the hypothesis then the example https://dojo.telerik.com/EbIbe/19 should either work in the same consistent way, but instead , on the pointed example the DataValueField seems to work as I expected and not as per your thesis.

So one of the two cases is broken as the Dropdownlist having a DataValueField option is behaving differently on the following cases:

1) when at the time of call kendo.bind () the current.a field on the model contains a valid value then the DataValueField is working as I expect, so it seems to exists a relation between the DataValueField and the bound model field.
2) when at the time you call kendo.bind () the current.a field is undefined or is null, then DataValueField is not working as I expect, even after at some point in time the current field became defined, the DataValueField of the selected dataitem is not bound to the model but instead the entire dataitem is bound to the model field.

I can of course use the select event to workaround the issue but on virtual mode, setting the field "current.a" value on the observable object is causing the dropdownlist to raise 2 requests to the server (valuemapper then eventually download the list) that is not necessary to do.

Best Regards

Andrea

[Andrea]

Following up on this.

If I manually set the viemodel "current.PORTOFLOAD" on my real scenario, as suggested here, on virtual mode I get at least 10 requests and , after that, the selection is completely messed up: I manually selected port "NINGBO" on China and the dropdownlist select "MIRFA" (ABU DHABI , Emrates), attached images:

(the dropdown mess is unpredictable and happens about 2 out of 3 manual tests).

1) after the search server side has been made i got 2 requests

2) after i select "NINGBO" with the mouse on the dropdownlist , the event "select" is raised, i then set the viewmode.set("current.PORTOFLOAD") to be equals to the value on the dataitem ("CNNBO") and after that an chain reaction of randome events internally execute in a long iteration between jquery and kendo , the result is that i got 10 requests and at the end the user selection is gone and it got replaced by a random selection.

[Andrea]

After having spent some hour into the stack trace of the kendo source codes, looking at the function widget.change, I think that the solution is to add to the dropdownlist valuePrimitive option and set it to true:

that can be shown comparing those 2 different versions

https://dojo.telerik.com/OyUpAw/2 <- does not work as expected

https://dojo.telerik.com/OyUpAw/5 <- works as expected (the only difference is the valuePrimitive option set to true)

Thank you for the time you spent on this

[Dimitar]

Hello Andrea,

I am glad to hear that you have managed to successfully resolve the issue faced.

You are indeed correct that the DropDownList's valuePrimitive option will force the ViewModel field to be updated with the selected item's value field. With this change there will be no need to set the ViewModel field explicitly in the select event of the widget.

Regards,
Dimitar
Progress Telerik