Cannot get the sample to work - at all.

5 posts, 1 answers
  1. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 02 Aug 2013 Link to this post

    I am trying to get the multiselect to work as per the sample in demo's and it does not work at all.
    Not even the button will popup the alert. If I remove the MultiSelect widget from the source, then the button
    shows the alert.

    I have been fiddling with this all morning and my time is precious so getting frustrated now.

    Here is the HTML source from the browser. Am I missing something?
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Test Page</title>
        <script src="/Scripts/modernizr-2.5.3.js"></script>
     
            <link href="/Content/kendo.common.min.css" rel="stylesheet"/>
            <link href="/Content/kendo.default.min.css" rel="stylesheet"/>
            <script src="/Scripts/jquery-1.8.3.js"></script>
            <script src="/Scripts/kendo.web.min.js"></script>
            <script src="/Scripts/kendo.all.min.js"></script>
            <script src="/Scripts/kendo.aspnetmvc.min.js"></script>                                                    
            <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
            <script src="/Scripts/cultures/kendo.culture.en-ZA.min.js"></script>
    </head>
    <body>
        <div class="demo-section">
        <h2>Invite Attendees</h2>
        <label for="required">Required</label>
        <select id="required" multiple="multiple" name="required"></select><script>
        jQuery(function(){jQuery("#required").kendoMultiSelect({"dataSource":["Steven White","Nancy King","Anne King","Nancy Davolio","Robert Davolio","Michael Leverling","Andrew Callahan","Michael Suyama","Anne King","Laura Peacock","Robert Fuller","Janet White","Nancy Leverling","Robert Buchanan","Andrew Fuller","Anne Davolio","Andrew Suyama","Nige Buchanan","Laura Fuller"],"placeholder":"Select attendees...","value":["Anne King","Andrew Fuller"]});});
    </script>
        <label for="optional">Optional</label>
        <select id="optional" multiple="multiple" name="optional"></select><script>
        jQuery(function(){jQuery("#optional").kendoMultiSelect({"dataSource":["Steven White","Nancy King","Anne King","Nancy Davolio","Robert Davolio","Michael Leverling","Andrew Callahan","Michael Suyama","Anne King","Laura Peacock","Robert Fuller","Janet White","Nancy Leverling","Robert Buchanan","Andrew Fuller","Anne Davolio","Andrew Suyama","Nige Buchanan","Laura Fuller"],"placeholder":"Select attendees..."});});
    </script>
        <button class="k-button" id="get">Send Invitation</button>
    </div>
    <script>
        $(document).ready(function () {
            var required = $("#required").data("kendoMultiSelect");
            var optional = $("#optional").data("kendoMultiSelect");
     
            $("#get").click(function () {
                alert("Attendees:\n\nRequired: " + required.value() + "\nOptional: " + optional.value());
            });
        });
    </script>
    <style scoped>
        .demo-section {
            width: 350px;
            height: 200px;
            padding: 30px;
        }
        .demo-section h2 {
            font-weight: normal;
        }
        .demo-section label {
            display: inline-block;
            margin: 15px 0 5px 0;
        }
        .demo-section select {
            width: 350px;
        }
        #get {
            float: right;
            margin: 25px auto 0;
        }
    </style>
    </body>
    </html>
  2. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 02 Aug 2013 Link to this post

    And here is my source code from the .cshtml

    @using Kendo.Mvc.UI
    @{
        Layout = null;
    }
     
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Test Page</title>
        <script src="/Scripts/modernizr-2.5.3.js"></script>
     
            <link href="/Content/kendo.common.min.css" rel="stylesheet"/>
            <link href="/Content/kendo.default.min.css" rel="stylesheet"/>
            <script src="/Scripts/jquery-1.8.3.js"></script>
            <script src="/Scripts/kendo.web.min.js"></script>
            <script src="/Scripts/kendo.all.min.js"></script>
            <script src="/Scripts/kendo.aspnetmvc.min.js"></script>                                                    
            <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
            <script src="/Scripts/cultures/kendo.culture.en-ZA.min.js"></script>
    </head>
    <body>
        <div class="demo-section">
        <h2>Invite Attendees</h2>
        <label for="required">Required</label>
        @(Html.Kendo().MultiSelect()
              .Name("required")
              .Placeholder("Select attendees...")
              .BindTo(new List<string>() {
                  "Steven White",
                  "Nancy King",
                  "Anne King",
                  "Nancy Davolio",
                  "Robert Davolio",
                  "Michael Leverling",
                  "Andrew Callahan",
                  "Michael Suyama",
                  "Anne King",
                  "Laura Peacock",
                  "Robert Fuller",
                  "Janet White",
                  "Nancy Leverling",
                  "Robert Buchanan",
                  "Andrew Fuller",
                  "Anne Davolio",
                  "Andrew Suyama",
                  "Nige Buchanan",
                  "Laura Fuller"
              })
              .Value(new string[] { "Anne King", "Andrew Fuller" })
        )
        <label for="optional">Optional</label>
        @(Html.Kendo().MultiSelect()
              .Name("optional")
              .Placeholder("Select attendees...")
              .BindTo(new List<string>() {
                  "Steven White",
                  "Nancy King",
                  "Anne King",
                  "Nancy Davolio",
                  "Robert Davolio",
                  "Michael Leverling",
                  "Andrew Callahan",
                  "Michael Suyama",
                  "Anne King",
                  "Laura Peacock",
                  "Robert Fuller",
                  "Janet White",
                  "Nancy Leverling",
                  "Robert Buchanan",
                  "Andrew Fuller",
                  "Anne Davolio",
                  "Andrew Suyama",
                  "Nige Buchanan",
                  "Laura Fuller"
              })
        )
        <button class="k-button" id="get">Send Invitation</button>
    </div>
    <script>
        $(document).ready(function () {
            var required = $("#required").data("kendoMultiSelect");
            var optional = $("#optional").data("kendoMultiSelect");
     
            $("#get").click(function () {
                alert("Attendees:\n\nRequired: " + required.value() + "\nOptional: " + optional.value());
            });
        });
    </script>
    <style scoped>
        .demo-section {
            width: 350px;
            height: 200px;
            padding: 30px;
        }
        .demo-section h2 {
            font-weight: normal;
        }
        .demo-section label {
            display: inline-block;
            margin: 15px 0 5px 0;
        }
        .demo-section select {
            width: 350px;
        }
        #get {
            float: right;
            margin: 25px auto 0;
        }
    </style>
    </body>
    </html>
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 03 Aug 2013 Link to this post

    Hello... Is there anybody out there? :)
  5. Answer
    Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 06 Aug 2013 Link to this post

    Hello Michael,

    The code you have posted seems ok - it also works when put in a sample jsbin. Perhaps something goes wrong with the javascript references; You can check your page for javascript errors. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 06 Aug 2013 Link to this post

    Thanks Petyo. It was indeed the case.
    I removed all scripts, and added them again following your guide. No errors now and the multiselect works.
    I am having issues posting back the values though. Please check my latest thread I started about this issue. No-one has helped me as yet.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready