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

Cannot get the sample to work - at all.

4 Answers 66 Views

MultiSelect

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

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

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>

Accepted