Rank 1
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.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script></head><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: { 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
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
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