Hi,
I made Multi select dropdown with check box using custom template. Following is the code for the same. Issue with this is that it allows multiple selection but displays only the last selected value.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style >
#titles-list .k-item {
overflow: hidden; /* clear floated images */
}
#titles-list img {
box-shadow: 0 0 4px rgba(255,255,255,.7);
float: left;
margin: 5px;
}
#titles-list dl {
margin-left: 85px;
}
#titles-list dt,
#titles-list dd {
margin: 0;
padding: 0;
}
#titles-list dt {
font-weight: bold;
padding-top: .5em;
}
#titles-list dd {
padding-bottom: .3em;
}
</style>
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript" ></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js" type="text/javascript" ></script>
<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
<input type="checkbox" name="${ data.Name }" value="${ data.Name }" ${ data.IsSelected ?"checked" : "" } />
<span>${ data.Name }</span>
</script>
<!-- ComboBox initialization -->
<script>
$(document).ready(function () {
$("#comboBox").kendoComboBox({
autoBind: false,
dataTextField: "Name",
dataValueField: "Id",
template: $("#scriptTemplate").html(),
dataSource: {
type: "odata",
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
}
});
var dropdownlist = $("#comboBox").data("kendoDropDownList");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="comboBox" />
</div>
</form>
</body>
</html>
I made Multi select dropdown with check box using custom template. Following is the code for the same. Issue with this is that it allows multiple selection but displays only the last selected value.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style >
#titles-list .k-item {
overflow: hidden; /* clear floated images */
}
#titles-list img {
box-shadow: 0 0 4px rgba(255,255,255,.7);
float: left;
margin: 5px;
}
#titles-list dl {
margin-left: 85px;
}
#titles-list dt,
#titles-list dd {
margin: 0;
padding: 0;
}
#titles-list dt {
font-weight: bold;
padding-top: .5em;
}
#titles-list dd {
padding-bottom: .3em;
}
</style>
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript" ></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js" type="text/javascript" ></script>
<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
<input type="checkbox" name="${ data.Name }" value="${ data.Name }" ${ data.IsSelected ?"checked" : "" } />
<span>${ data.Name }</span>
</script>
<!-- ComboBox initialization -->
<script>
$(document).ready(function () {
$("#comboBox").kendoComboBox({
autoBind: false,
dataTextField: "Name",
dataValueField: "Id",
template: $("#scriptTemplate").html(),
dataSource: {
type: "odata",
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
}
});
var dropdownlist = $("#comboBox").data("kendoDropDownList");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="comboBox" />
</div>
</form>
</body>
</html>
4 Answers, 1 is accepted
0
Gary
Top achievements
Rank 2
Rank 2
answered on 16 Feb 2012, 03:24 AM
I would also like to do this with the DropDownList. Is it possible to customize the displayed text of the selected value? I would like to show something like "n selected", where n is the number of items checked in the dropdown.
0
Gary
Top achievements
Rank 2
Rank 2
answered on 16 Feb 2012, 03:26 AM
I just came across this post, which seems to offer a solution:
http://www.kendoui.com/forums/ui/dropdownlist/drop-down-display-text.aspx
http://www.kendoui.com/forums/ui/dropdownlist/drop-down-display-text.aspx
0
Bruno
Top achievements
Rank 1
Rank 1
answered on 04 May 2012, 08:40 AM
How do you retrieve the checked checkboxes?
0
Bruno
Top achievements
Rank 1
Rank 1
answered on 04 May 2012, 03:49 PM
And how can you keep the dropdown opened? when I click a checkbox it selects the line and close the dropdown list....