This is a migrated thread and some comments may be shown as answers.

DropDownList with value bound to property not showing item when datasource is refreshed.

2 Answers 159 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Odd Veibust
Top achievements
Rank 1
Odd Veibust asked on 28 Oct 2019, 03:00 PM

Hi,

I'm having a problem with a dropdownlist not showing the item that is returned when datasource is refreshed. It can be tested to see what I mean in the following dojo sample. Can anyone point me in the right direction on how to get the dropdownlist to show the returned item when the "Click me" button is returned.

Dojo

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
<body>
  <div id="registrationForm">
    <input id="vessel" class="grid-class" data-value-primitive="true" data-role="dropdownlist" data-auto-bind="true" data-text-field="dn" data-value-field="id" data-bind="source: Vessels, value: VesselId" data-filter="contains" />
    <button data-role="button"
                    data-icon="edit"
                    data-bind="events: { click: onClick }"
                    style="width: 180px">Click me</button>
  </div>
  <script type="text/javascript">
  $(document).ready(function () {
        viewModel = kendo.observable({
            VesselId: 36844,
        onClick: function() {
            viewModel.set('VesselId', 32638);
            viewModel.Vessels.read();
        },
                Vessels: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "https://srfapi.scarp.no/basedata/vessels",
                        dataType: "json",
                        type: 'GET'
                    },
                    parameterMap: function (data, type) {
                        if (type === 'read') {
                            var value = '';
                            if (data.filter !== undefined) {
                                var filter = data.filter.filters[0];
                                if (filter !== undefined) {
                                    value = data.filter.filters[0].value;
                                }
                            }
                            return { text: value, id: viewModel.get('VesselId') };
                        }
                    }
                },
                serverFiltering: true
            }),
 
    });
     
    kendo.bind($("#registrationForm"), viewModel);
  });
  </script>
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 30 Oct 2019, 02:51 PM

Hello Odd,

Thank you for the sample prepared, where the issue in question could be observed. I believe that the described would lead to a bug in the DropDownList MVVM implementation being unable to update its value accordingly when its source also changes. I will need a bit more time to further investigate the case. I will get back to you as soon as I know something more on that matter.

Regards,
Veselin Tsvetanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Veselin Tsvetanov
Telerik team
answered on 31 Oct 2019, 10:58 AM

Hello Odd,

Here is what I can share after further troubleshooting of the case and review of the source code logic. At the time when it is executed, the set on the value of the DropDownList will attempt to change the value in the widget. As the data is retrieved from the remote with a later read() call, at this moment the source of the DropDownList does not have an item corresponding to the Id in question. As a result, the selected item is cleared. After the read() returns the new data, it is already present in the widget source. Nevertheless, in order for the value to be changed, a new set on the value field should be triggered. Otherwise, the DropDownList would not know that an update of its value is pending. Here is what I would suggest to you in order to force that:

onClick: function() {
  viewModel.set('VesselId', 32638);
  viewModel.Vessels.one("requestEnd", function() {
    setTimeout(function() {
        viewModel.set('VesselId', 0);
    	viewModel.set('VesselId', 32638);
    });
  });
  viewModel.Vessels.read();
},

With the above, you will wait until the request from the remote has returned and will trigger a ViewModel value set. As a final result, the required item will be selected in the widget. Here you could find a modified version of the Dojo sample implementing the above.

Regards,
Veselin Tsvetanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MVVM
Asked by
Odd Veibust
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or