Getting Value from DropDownList on DataBound event

[Sean Bintley]

I've found the documentation on how to get the selected value from a drop down list on the DataBound event to be non-existant. 

I eventually found the solution here: https://www.telerik.com/forums/dropdownlist-mvc---set-default-value-at-runtime

It is easy to get the selectedIndex in this event handler. Getting the value that this corresponds to so I can run some custom logic (show/hide fields, for example) when the document is being loaded (as opposed to a select event) was the tricky part.

I already had a generic function I called to obtain this value across the board. I was able to finally solve the issue of getting the selected value when not in the Select event (where the dataItem object is available) using the following code:

var GetValueFromKendoSelect = function (context, e) {
    // if this is from a select event then we'll get the dataitem
    var dataItem = GetDataItemFromKendoSelect(context, e);
    if (dataItem != undefined) {
        return dataItem.Value;
    } else {
        // if this is from a databound event we get it from the sender
        var sender = e.sender;
        if (sender == undefined) {
            console.log("Couldn't retrieve value from Kendo Select list");
            console.log(e);
            return undefined;
        } else {
            var defaultItem = sender.dataSource.at(sender.selectedIndex);
            return "" + defaultItem.Value;
        }
    }
}

 

I can then use this like this (you can see how it will then generate a usable result in the select and databound events):

var onPassportedBenefitInPaymentSelect = function (e) {
        var torPassport = GetValueFromKendoSelect(this, e);
        debugger;
        if (torPassport == undefined) {
            console.log("torPassport detected as undefined in torPassportBenefitSelectHandler");
            return false;
        }
        return ProcessTORPassport(torPassport);
    }

    var onPassportedBenefitInPaymentDataBound = function (e) {
        var torPassport = GetValueFromKendoSelect(this, e);
        if (torPassport == undefined) {
            console.log("torPassport detected as undefined in torPassportBenefitOnDataBoundHandler");
            return false;
        }
        return ProcessTORPassport(torPassport);
    }

    var ProcessTORPassport = function (torPassport) {
        var $passportedAnsweredGroup = $(".passported-answered-group");
        var $passportedNoGroup = $(".passported-no-group");
        var $passportedYesGroup = $(".passported-yes-group");
        if (torPassport == "" || torPassport == null) {
            $passportedAnsweredGroup.hide();
        } else {
            $passportedAnsweredGroup.show();
        }
        switch (torPassport) {
            case "True":
                $passportedYesGroup.show();
                $passportedNoGroup.hide();
                break;
            case "False":
                $passportedNoGroup.show();
                $passportedYesGroup.hide();
                break;
            default:
                $passportedNoGroup.hide();
                $passportedYesGroup.hide();
                break;
        }
    }

:

Perhaps the documentation could be clearer how this can be achieved, considering how simple it actually is in the end, yet  how difficult it is to find the solution.

[Sean Bintley]

edit: the code for the GetValueFromKendoSelect function should read:

var GetValueFromKendoSelect = function (context, e) {
    // if this is from a select event then we'll get the dataitem
    var dataItem = GetDataItemFromKendoSelect(context, e);
    if (dataItem != undefined) {
        return dataItem.Value;
    } else {
        // if this is from a databound event we get it from the sender
        var sender = e.sender;
        if (sender == undefined) {
            console.log("Couldn't retrieve value from Kendo Select list");
            console.log(e);
            return undefined;
        } else {
            var defaultItem = sender.dataSource.at(sender.selectedIndex - 1);
            return "" + defaultItem.Value;
        }
    }

note the " - 1" on the selectedIndex.- which I must actually question - surely selectedIndex should return a value corresponding to a 0-index array (https://www.w3schools.com/jsref/prop_select_selectedindex.asp)?

[Sean Bintley]

I'm wrong again. I knew it didn't feel right. I'm going to need some help here.

I've tried accessing the .data() array directly on the dataSource item. But this didn't work either.

Also, I forgot to include the following function (not relevant to this problem, but was referenced in the code above):

var GetDataItemFromKendoSelect = function(context, e) {
    if (e.item) {
        return context.dataItem(e.item);
    } else {
        return undefined;
    }
}

[Ivan Danchev]

Hello Sean,

Thank you for posting your approach. Surely it will be helpful to other members of the community.

I extracted the code snippets you posted to a dojo example. Note that I changed the following line:

var defaultItem = sender.dataSource.at(sender.selectedIndex - 1);

to:

var defaultItem = sender.dataSource.at(sender.selectedIndex);

Indeed the selectedIndex is 0 based so there is no need to subtract 1 from it. On page load the selectedIndex(0) and the selected item value(1) are displayed in a message.

Regards,
Ivan Danchev
Progress Telerik