KendoComboBox normal autocomplete behavior not working when databound subscribed

Question

I have a project here that wasn't developed by me. The project technologies: ASP.NET MVC, jQuery, Bootstrap and KendoUI. And, it has a little problem.

The KendoComboBox autocompletes the text with the JSON datasource text while you are typing. This is perfect! But if you subscribe the DataBound event to handle it, this autocomplete doesn't work correctly. It erases what you're typing. And this cause some rage in users.

This Window is the same to create a New Resgister and also to Edit some existing register... So, the subscribed DataBound does the work to select one item in the ComboBox when editing.

And, the normal behavior of the ComboBox have to autocomplete when typing if we're creating a new one.

This is the New Window. The Autocomplete doesn't work with DataBound subscribed:

This is the Edit Window (the same, but, loaded).

If I remove the DataBound, the autocomplete of the ComboBox works fine:

This my HTML:

<div class="k-field">
    <div class="k-fieldlabel">Responsável:</div>
    <div style="float: left; width: calc(100% - 100px);">
        <input type="text" id="cboResponsavel" name="Responsavel.Id" style="width: 100%;" required validationmessage="Responsável é obrigatório" />
    </div>
</div>

In my document.ready function I have:

$("#cboResponsavel").kendoComboBox({
dataTextField: "Nome",
dataValueField: "Id",
dataSource: {
    type: "json",
    schema: {
        data: "data",
        total: "total"
    },
    transport: {
        read: {
            url: "/Projeto/Projetos/CarregarResponsaveis",
            dataType: "json"
        }
    }       
},
filter: "contains",
suggest: true,
dataBound:function(e){
    e.sender.value(@(Model == null ? "null" : Model.Responsavel.Id.ToString()))
}
});

My research:

KendoCombobox is not fetching Localsource jsondata

Kendo UI Demos - ComboBox / Basic Usage

Kendo UI Docs - ComboBox - Events - DataBound

KendoUI and json

kendo ui: how to remove a dataItem of a dataSource bound to some comboBox, inside combobox dataBound event

Selecting item in databound combobox

I looked some posts in Kendo UI Fórum too.

I've updated jQuery and KendoUI and still persists...

I am pretty new to KendoUI and I had just fixed some ASP.NET MVC projects, so, I don't know how to fix this issue for now. Please, if someone can help or give me a direction, I will be thankful.

Oh, yeah, I want to fix others Combos with the same problem...

P.S.: If I select a value clicking on it, I can work here, but this is not productive.

I hope I made myself clear enough. Thank you for any help.

Answer 1

Gotcha this error!

The solution is too idiot as me... haha

We, actually, doesn't need that event.

Here is the code that does the same:

$("#cboResponsavel").kendoComboBox({
dataTextField: "Nome",
dataValueField: "Id",
dataSource: {
    type: "json",
    schema: {
        data: "data",
        total: "total"
    },
    transport: {
        read: {
            url: "/Projeto/Projetos/CarregarResponsaveis",
            dataType: "json"
        }
    }
},
filter: "contains",
suggest: true,
value: @(Model == null ? "null" : Model.Responsavel.Id.ToString())
});

The behavior is working fine for New ones and it brings me the value in Edit mode.

The comment made by Onabai was useful to discover that the DataBound event was not the problem, but trying to set the Value on it.

The solution was change the DataBound for Value, and it works fine!

Hope this help someone else (even this is simple).