How to force Reload of Combobox in Grid

[Malcolm]

Dear Telerik Team!
I would really like to know how to make an ajax-bound combobox reload its items with a given filter value. In the attached example I've got a editortemplate for Country1

@(Html.Kendo().ComboBoxFor(m => m)
            .DataTextField("DisplayName")
            .DataValueField("Code")
            .AutoBind(true)
            .DataSource(ds => ds
                .Read(read => read.Action("CountryLoading", "Home"))
                .ServerFiltering(true)
            )
        )

When the Combobox gets focus, i want to reload it. I tried all this:

function CommidityFocus(e, upperE, elementName) {
    var combobox = $(elementName).find('span').children('input').data('kendoComboBox');
    Combobox.value("hurz"); // No Reload ?!
    combobox.search("hurz"); // No Reload ?!
    combobox.dataSource.read(); // No Reload ?!
}

but ... nothing happens. The CountryLoading function is not called...
How can I make it reload ?

brgds
Malcolm Howlett

[Alexander Valchev]

Hi Malcolm,

I was not able to run the provided project due to a compilation errors.

In case serverFiltering is enabled the search method will issue an Ajax request through the read transport to the server. Please make sure that the `combobox` variable holds a reference to the client side widget's object. Do you see any JavaScript errors in the browser's console that might give us a clue what exactly is going wrong?

Regards,
Alexander Valchev
Telerik

 

 

[Malcolm]

Hello Alexander
There is no javascript error and the 'combobox' object is filled. I attached a screenshot.
The compilation errors are probably due to limitations of upload size. Can you please fix them? You should find everything you need in the EnumerationEditing example provided by telerik. (Your colleague achieved to do this a few months ago and so found a localization bug)

BTW: Why does the initial call to the data-function (CountryLoading) not use the given value of the field edited with the combobox.

brgds
Malcolm

[Daniel]

Hello Malcolm,

If there are not any JavaScript errors then the most likely reason for the action method not be called when calling read is that the result is loaded from the browser cache. Please check if adding the OutputCache attribute to the action method result:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public JsonResult CountryLoading(string text)

resolves the problem. 

As for the project, I ran it but I am not sure if I understand correctly how should the value be passed. Should it be passed as "text"? If yes, then you can pass it with the read method:

combobox.dataSource.read({
    text: "hurz"
});

or just call the read method:

combobox.dataSource.read();

and pass the value with the request data function:

<script type="text/javascript">
    function additionalData() {
        return {
            text: "hurz"
        };
    }
</script>
@(Html.Kendo().ComboBoxFor(m => m)
    .DataTextField("DisplayName")
    .DataValueField("Code")
    .AutoBind(true)
    .DataSource(ds => ds
        .Read(read => read.Action("CountryLoading", "Home").Data("additionalData"))
        .ServerFiltering(true)
    )
)

The search method can also be used to trigger a request but you need to set the filter type:

Html.Kendo().ComboBoxFor(m => m)
    .Filter(FilterType.StartsWith)

In this case however, the value will be sent as a dataSource filter and not as "text".

As for the initial request - the combobox will pass the text parameter to the server only when the widget is filtered by typing in the text input. If you wish to send the initial value then you can use the data function to get the value from the grid and add it to the request data.

Regards,
Daniel
Telerik