kendo ui dropdownlist set selected index

Hello everyone, I'm going to share the code sample for set the kendo ui dropdownlist using index.

Table of contents

• Java Script code sample
• Set index in kendo ui dropdownlist using MVC 4

JavaScript code sample

<script type="text/javascript">

   $(function () {

          var cancellationTypes = [

                     { 'ID': 'FXD', 'CancellationType': 'Fixed' },                                                                          { 'ID': 'Z', 'CancellationType': 'Zero' },                                                                              { 'ID': 'MRB', 'CancellationType': 'MRB' }, 

                     { ID: 'MAF', 'CancellationType': 'MAF' }];

          

       try {

           $.getJSON("~/api/Company/GetCompany/@session.CancelID",

               function (data) {

                   var index;

                   $.each(cancellationTypes, function (key, val) {

                       if (val.ID == "@Model.CancellationTypeID") {

                           index = key;

                       }

                   });

                   $('#CancellationTypeID').kendoDropDownList({

                       dataTextField: 'CancellationType',

                       dataValueField: 'ID',

                       dataSource: cancellationTypes,

                       index: index                       

                   });

               });

       }

       catch (ex) {

           //Log the exception and alert to the end user

           kendoDialogForEndUserAlert("Error", ex, "Error", ["OK"], null);

       }

   });

</script>

MVC 4 and Kendo ui DropDownList

@model PCX.Models.Contract

@{

   Layout = "~/Views/Shared/_Layout.cshtml";

   Models.UserSession session = (Models.UserSession)Session["userSession"];

}

@using (Html.BeginForm())

{

   @Html.AntiForgeryToken()

    <div class="form-group">

        @Html.LabelFor(model => model.CancellationType, new { @class = "control-label col-sm-4" })

        <div class="col-sm-8 col-md-6">

            @(Html.Kendo().DropDownListFor(model => model.CancellationType)

            .Name("CancellationTypeID")

            )

            @Html.ValidationMessage("Please select cancellation type")

        </div>

    </div>

}