kendo ui multiselect get selected values in jquery

kendo ui multiselect get selected values in jquery

Hello everyone,  I am going to share the code sample for get kendo ui multi selected value using MVC 5 and  jquery scripts.

Table of Contents

1. MultiSelect code sample using MVC 5 and HTML
2. jQuery code sample for get selected value using kendoMultiSelect


MVC 5 Code sample


<div class="multiselect-section">
    <label for="required">Notify me when excess usage reached over</label>
    @(Html.Kendo().MultiSelect()
       .Name("ExcessUsed")
       .BindTo(new List<string>() {
          "40%",
          "45%",
          "50%",
          "55%",
          "60%",
          "65%",
          "70%",
          "75%",
          "80%",
          "85%",
          "90%",
          "95%",
          "100%"
       })
       .Value(new string[] { "70%", "80%", "90%", "100%" })
       )
</div>
<div class="list-group-item" style="height: 50px;">
    <button class="btn btn-primary pull-right" id="btnSave">Save Setting</button>
</div>


jQuery code sample for get multi-selected value

<script type="text/javascript" >
    $(document).ready(function () {
        var used = $("#ExcessUsed").data("kendoMultiSelect");
        $("#btnSave").click(function () {
            var multiSelectedVal = $("#ExcessUsed").data("kendoMultiSelect").value();
            alert("Selected excess used:\n\n " + multiSelectedVal);
        });
    });
</script>




ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^