setDataSource not working

[Justin Lee]

I have a kendoComboBox that I have configured with Server filtering. (autocomplete like functionality)

When a certain action occurs, I want to have the combobox select an item that I supply in code.  i.e. I want to set the text AND the selected value of the combobox, and then disable the combobox.

I know I can set the text with widget.text("something").  However, the value function also sets the text.  (widget.value("1111");)

So my next attempt was to set the datasource of the combobox to the object, and then call widget.select(0).

widget.setDataSource(new kendo.data.DataSource({
  data: [{
    itemID: '1111',
    name: 'Some Item'
  }]
}));
widget.select(0);
widget.trigger("change");
widget.enable(false);

 

However, this doesn't seem to do anything.  (except disable the widget)  The dataSource is getting set, but underlying value and the text are not changing.  Also, the dropdown is empty. (if I don't disable it)   

dataTextField is set to "name", and dataValueField is set to "itemID".

Any help would be appreciated.  Thanks.

[Justin Lee]

Update - The new datasource is applied the next time I open the combobox.  However, the first item is never selected.  I want to change the datasource, select the first item in the new datasource, and then disable the combobox.

[Ivan Danchev]

Hello Justin,

At my end the described scenario works as expected. Check out this dojo example: https://dojo.telerik.com/OTAcOjeg

A ComboBox is configured with server filtering initially. On clicking the button next to it a new dataSource is set, the item is selected and the ComboBox is disabled. Its change event fires and the currently selected item's text and value are logged in the console.

Let me know in case I am missing something with regard to reproducing the issue.

Regards,
Ivan Danchev
Progress Telerik

[Justin Lee]

Hi Ivan,

Thanks for the post. I was able to reproduce the issue after playing around with your Dojo.

I am creating the ComboBox initially from a Select element, with an option selected.

<select id="products">
  <option selected="selected" value="2222">Original Selected Item</option>
</select>

 

To make that work correctly, I am setting autoBind to FALSE.  If you leave autoBind as true (the default), it doesn't show/select the original selected item.  With autoBind set to false, everything works correctly, EXCEPT changing the datasource.

In your dojo, change the "products" div to the select above, and run it.  You will see that it doesn't select the original selected item. ("Original Selected Item").  Then set autoBind: false, and notice that it DOES select the original selected item, however, your button no longer works.

Thanks!

 

 

[Ivan Danchev]

Hi Justin,

With autoBind set to false, call the ComboBox dataSource's read() method after setting it, then select the first item and disable the widget: https://dojo.telerik.com/EbErUQux

Regards,
Ivan Danchev
Progress Telerik

[Justin Lee]

Hi Ivan,
For some reason, your solution is still not working for me, even if I update the dojo to match my scenario.  However, I was able to solve the issue with this code:

widget.enable(false);
widget.text("Some Item");
widget.element.append("<option selected='selected' value='1111'></option>");

However, while we have this dojo created - there is some other odd behavior maybe you can help me with.

When you clear the text of the combobox, it behaves oddly.  So if you set the "filtering" event to cancel if the text is empty, there is more odd behavior.

I have created a dojo based on your dojo, with the filtering event set to cancel if the text is empty.

Hi Ivan,
For some reason, your solution is still not working for me, even if I update the dojo to match my scenario.  However, I was able to solve the issue with this code:

widget.enable(false);
widget.text("Some Item");
widget.element.append("<option selected='selected' value='1111'></option>");

However, while we have this dojo created - there is some other odd behavior maybe you can help me with.

I created a new dojo based off yours, and added a filtering event to cancel when the text is empty.

https://dojo.telerik.com/@[e-mail]/UyAGIZeY

1. Click Run

2. Click the "X" in the textbox of the combobox. (do NOT clear with backspace/delete)

3. Click the down-button to open the combobox dropdown.

Note that "2222" is displayed in the text area.  Is that a bug?  Is there a workaround?

[Justin Lee]

Sorry for the last post -- a copy/paste mistake.  Here is correct message:

For some reason, your solution is still not working for me, even if I update the dojo to match my scenario.  However, I was able to solve the issue with this code:

widget.enable(false);
widget.text("Some Item");
widget.element.append("<option selected='selected' value='1111'></option>");


However, while we have this dojo created - there is some other odd behavior maybe you can help me with.
I created a new dojo based off yours, and added a filtering event to cancel when the text is empty.
https://dojo.telerik.com/@[e-mail]/UyAGIZeY
1. Click Run
2. Click the "X" in the textbox of the combobox. (do NOT clear with backspace/delete)
3. Click the down-button to open the combobox dropdown.
Note that "2222" is displayed in the text area.  Is that a bug?  Is there a workaround?

[Ivan Danchev]

Hello Justin,

I've looked into the example and found that the ComboBox is initialized from a select element, but is bound to a remote dataSource. According to the documentation the ComboBox must be initialized from an input element when bound to remote data.

If you are using local data, you can use a select element, but if you set up a dataSource configuration in the ComboBox it will use the data in the dataSource, not the items declared in the select element. So with regard to initializing the ComboBox from a select element, the options are:

1. a select element with no items declared and a local dataSource (an array of objects), or

2. a select element with items declared and no dataSource set (otherwise you will get the

Mixing declared items with dataSource items seems counter-intuitive and could lead to unexpected behavior: https://dojo.telerik.com/eMeNOYUz

In this example "Original Selected Item" will be displayed as selected, but clearing the input will show "Product1" as selected, then subsequent clearing will actually clear the item and show the placeholder text. Then again, if there are no items declared in the select element, there won't be any benefit of using a select element over using an input element.

Regards,
Ivan Danchev
Progress Telerik

[Justin Lee]

Hi Ivan,

Thanks so much for all your help!  I was using a select because I am using unobtrusive validation (MVC), and assumed I would need to use the select for that to work correctly.  However, after your comments I tried with just a textbox, and see that the validation does work correctly.  Everything is now working correctly.

Thanks!

[Ivan Danchev]

Hi Justin,

Thank you for the follow up. I am glad switching from a select element to an input resolved the issue.

Regards,
Ivan Danchev
Progress Telerik