This is a migrated thread and some comments may be shown as answers.

Cannot get the sample to work - at all.

4 Answers 30 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
DominionZA
Top achievements
Rank 1
DominionZA asked on 02 Aug 2013, 11:27 AM
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>

4 Answers, 1 is accepted

Sort by
0
DominionZA
Top achievements
Rank 1
answered on 02 Aug 2013, 11:28 AM
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>
0
DominionZA
Top achievements
Rank 1
answered on 03 Aug 2013, 04:45 PM
Hello... Is there anybody out there? :)
0
Accepted
Petyo
Telerik team
answered on 06 Aug 2013, 09:16 AM
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!
0
DominionZA
Top achievements
Rank 1
answered on 06 Aug 2013, 09:59 AM
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.
Tags
MultiSelect
Asked by
DominionZA
Top achievements
Rank 1
Answers by
DominionZA
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or