How to select Dropdownlist value and Text in kendo UI MVC

Question

I have Kendo DropDown list and I want to Select the value on Selection of DropDownList. I am getting the text of Selected Item but not value that should be ID.

function onSelect(e) {
        var item = e.item;
        var v = e.value;
        var text = item.text();
        alert(text);
        alert(v);
    };

Binding Data with Dropdownlist kendo

$("#FirstName").kendoDropDownList({
        dataTextField: "Fname",
        dataValueField: "Id",
        dataSource: dataSoucceAll,
    });

binding select function with kendo drop-down list.

    var dropdownlist = $("#FirstName").data("kendoDropDownList");
    dropdownlist.bind("select", onSelect);

Answer 1

Thanks All. I also got some Solutions.

  function onSelect(e) {
       //selecting ID from the dropdown list
        var dataItem = this.dataItem(e.item.index());
        var BId = dataItem.Id;


        //Binding with the grid.
        var alg = $("#allgrid").data("kendoGrid").dataSource;

        //Filtering gird with the Id
        if (BId) {
            alg.filter([
                 {
                    "logic": "eq",
                    "filters": [
                        {
                            "field": "Id",
                            "operator": "eq",
                            "value": BId
                        }
                    ]
                }
            ])
        }
        else {
            alg.filter({});
        } 
    };

    //Binding dropdownlist with database
    $("#FirstName").kendoDropDownList({
        dataTextField: "Fname",
        dataValueField: "Id",
        dataSource: dataSoucceAll,
    });

    //Bind Select function with kendo Dropdown list
    var dropdownlist = $("#FirstName").data("kendoDropDownList");
    dropdownlist.bind("select", onSelect);

Answer 2

Personally, I like having the code encapsulated by funcionallity. For this reason I prefer this approach:

$("#FirstName").kendoDropDownList({
    dataTextField: "Fname",
    dataValueField: "Id",
    dataSource: dataSoucceAll,
    /* Event select */
    select: function (e) {
       var item = e.item;    // item has selected value
       /* logic here*/
    }
});

check telerik docs here and here

Answer 3

In the select event, you can get the underlying dataItem of the selected item:

   var dataitem = e.sender.dataItem(e.item);
   alert(dataitem.Id);

In your case the value is the dataItem.Id.

DEMO