how i get select value from kendo comboBox

Question

i have implented Kendo ComboBox but struggling to get selected value ....

  $("#_FeeScheme_Input").kendoComboBox({
        minLength: 1,
        filter: 'contains',
        dataTextField: "FeeSchemeDescription",
        dataValueField: "FeeSchemeID",
        select: onSelect,
        dataSource: {
            type: "json",
            serverFiltering: false,
            transport: {
                read: "/Qualification/GetAllFeeScheme_JSON"
            },
        }
    });

...

 function onSelect(e) {

        var dataItem = this.dataItem(e.item.index());

        alert("value " + dataItem.text); //NOT WORKING... RETURN NULL VALUE            

    };

Razor code

 <div class="form-group">
                @Html.LabelFor(model => model._FeeScheme.FeeSchemeDescription, new { @class = "control-label col-md-3" })
                <div class="col-md-6">
                    @Html.TextBoxFor(model => model._FeeScheme.FeeSchemeDescription, new { id = "_FeeScheme_Input" })
                    @Html.ValidationMessageFor(model => model._FeeScheme.FeeSchemeDescription)
                </div>
 </div>

Solution 1

The getters/setters from the kendo comboBox are part of the kendoComboBox 'class'.

You can use this.value() or this.text() depending on what you need.

$("#_FeeScheme_Input").kendoComboBox({
    minLength: 1,
    filter: 'contains',
    dataTextField: "FeeSchemeDescription",
    dataValueField: "FeeSchemeID",        
    dataSource: {
        type: "json",
        serverFiltering: false,
        transport: {
            read: "/Qualification/GetAllFeeScheme_JSON"
        },
    },
    change: function(){
       alert("value " + this.value());
    }
});

Solution 2

var c = $('#MyCombo');

// to get selected id
c.val() // and also
c.data('kendoComboBox').value()

// to get selected text
c.data('kendoComboBox').text()

// to get selected item index
c.data('kendoComboBox').select()

// to set selected item e.g. 3
c.data('kendoComboBox').select(2)

Solution 3

You can use jquery too, If you try to take value out of events.

var CB= $("#_FeeScheme_Input").data("kendoComboBox");
var description= CB.dataItem(CB.select()).FeeSchemeDescription;   // for text field
alert(description);


var CB= $("#_FeeScheme_Input").data("kendoComboBox");
var Id= CB.dataItem(CB.select()).FeeSchemeID;   // for value field
alert(Id);

Solution 4

You can also use jquery to get the ID and value like so:

First off give your comboBox a name:

$("#_FeeScheme_Input").kendoComboBox({
    Name: 'MyComboBox',
    minLength: 1,
    ...

Then you can get the ID and Value like this:

var myId = $("#MyComboBox").val();
var myText = $("#MyComboBox").data('kendoComboBox').text();

Solution 5

This answer might help

Kendo combobox.value(x) not working correctly

And

Fiddle Example from the same answer

View more solutions

Comments

[John Washam]

FYI, this is not unique to ASP.NET MVC. This answer is just plain JavaScript code that uses jQuery to get the ComboBox element, get the Kendo ComboBox instance from the element, then call its functions.

[Zolfaghari]

Dear john-washam you right, but i has this problem and solved as above code. Thanks for your reminder.

[c-sharp-and-swiftui-devni]

is their no way of retrieving the value via a form post that is now i need it to work?