如何创建具有不同字体大小的列表项的DropDownlist (Kendo UI for jquery
在Kendo UI for jQuery中创建具有不同字体大小的列表项的DropDownList，可以通过自定义模板来实现。
首先，需要引入Kendo UI for jQuery的相关资源文件，包括CSS和JavaScript文件。然后，在HTML页面中创建一个空的<select>元素作为DropDownList的容器。
接下来，使用JavaScript代码初始化DropDownList，并设置自定义模板。在模板中，可以使用#data#来引用每个列表项的数据，并通过CSS样式来设置不同的字体大小。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.511/styles/kendo.common.min.css" />
<<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.511/styles/kendo.default.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.511/js/kendo.all.min.js"></script>
</head>
<body>
<select id="dropdownlist"></select>
<script>
$(document).ready(function() {
$("#dropdownlist").kendoDropDownList({
dataSource: ["Option 1", "Option 2", "Option 3"],
template: '<span style="font-size: #= data.size #px;">#= data #</span>'
});
});
</script>
</body>
</html>在上述代码中，dataSource指定了DropDownList的数据源，可以是一个数组或远程数据源。template定义了自定义模板，其中data表示每个列表项的数据，size是列表项的字体大小。
通过以上代码，就可以创建具有不同字体大小的列表项的DropDownList。根据实际需求，可以进一步调整样式和功能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器CVM：https://cloud.tencent.com/product/cvm
- 云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
- 云存储COS：https://cloud.tencent.com/product/cos
- 人工智能AI：https://cloud.tencent.com/product/ai
- 物联网IoT Hub：https://cloud.tencent.com/product/iothub
- 区块链BCS：https://cloud.tencent.com/product/bcs
- 元宇宙Tencent XR：https://cloud.tencent.com/product/xr
相关·内容
我想创建一个Kendo UI (用于jquery) DropDownList，其中包含一些列表项，以便每个列表项的字体大小都不同。假设DropDownList中有3个项目，那么这3个项目中的每一个都必须以不同的字体大小显示。有可能吗？
浏览 6提问于2020-03-02得票数 0
回答已采纳
3回答
我正在应用程序中使用Kendo UI控件。最近，我在做FireFox的时候发现了Kendo控件的一个大问题。
我发现有些Kendo UI控件在firefox中不能正常工作。
类似:- KendoDatePicker，Kendo().Dropdownlist()。
1) KendoDatePicker() :-
当我使用$("#DatePicker").KendoDatePicker()时，KendoDatePicker日历就不会显示在火狐中。
我发现火狐并没有使用Kendo.default.min.css。但是当我检查IE或Chrome的类似功能时，它就起作用了。并采取上述CS
浏览 3提问于2014-03-19得票数 1
当使用Kendo UI小部件(例如Dropdownlist)时，有一些html代码附加到DOM的底部。为什么会这样呢？
查看演示站点：
问题:当使用AJAX重新加载某些内容时，这些html代码片段会再次被追加。因此，一些具有相同id的div被复制，这导致在使用jquery-id-selectors时出现一些错误。我能防止Kendo复制这些html片段吗？
浏览 2提问于2013-05-27得票数 3
回答已采纳
1回答
我想做的是：
在页面的前半部分，我有一个带有Kendo UI控件的表单，如DatePicker、Dropdownlist列表、NumericTextBox(s)。
下半部分有一个Kendo网格控件
- This Kendo UI Grid control has 8 columns in which 2 columns has a Kendo dropdownlist(EditorTemplate) and CheckBox(EditorTemplate).
- The Kendo UI Grid control is Ajax binding.
单击保存按钮时，Ken
浏览 3提问于2013-02-19得票数 1
回答已采纳
我们在cardView kendo.ui.Window项中使用了大约3个kendo.ui.Window组件。当窗口关闭时，我们将调用每个包含的DropDownList项的“破坏”方法。
问题是，下面的代码是，没有删除所有DropDownList的相关DIVS，这些DIVS都附加到文档正文中：
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.destroy();
经过一些搜索后，我们在销毁方法的文档中(来自Telerik)注意到了以下注释：重要:该方法没有从
浏览 8提问于2014-06-25得票数 7
回答已采纳
我一直在学vue + Kendo UI。
我今天又受了点苦。
我尝试了很多方法，但还是没能成功。
Kendo UI: 2018.2.516
vue: 2.5.2
<kendo-datasource ref="jobtitleData"
:schema-data="'data'"
:transport-read-url="jobTitleService">
</kendo-datasource>
<kendo-dropdownlist re
浏览 0提问于2018-06-08得票数 0
回答已采纳
问题是在使用Kendo UI Dropdownlist和dataBound方法来设置加载时的选定值。
在DataBound方法中设置该值的原因是为了确保传输已随下拉列表的数据项一起返回，以防止竞争条件失败。下面的静态示例中没有演示这一点，但我的数据集来自传输服务器端调用。
设置dropdownlist的选项过滤器："startswith“对于简单的客户端过滤效果很好，但是由于使用了dataBound，出现了一个问题。这方面的文档很少，但在初始化dropdownlist以及任何方法对其执行操作(包括过滤)时，都会调用dataBound。
通过在检查器工具中放置调试器，我能够观察到filt
浏览 40提问于2017-08-09得票数 3
回答已采纳
我第一次用Kendo Ui建立了一个项目，我正在尝试创建Kendo UI下拉列表，但是我得到了：
ArgumentNullException未被用户代码处理。-值不能为空。
我的代码是：
@(Html.Kendo().DropDownList()
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
浏览 2提问于2014-01-15得票数 1
回答已采纳
2回答
在这个中，我有一个字体大小设置为6px的角DDL的Kendo，但是它不工作。目标是更改弹出列表的字体大小。怎么解决这个问题？
@Component({
selector: 'my-app',
template: `
<kendo-dropdownlist
[data]="listItems"
[ngStyle]="{ 'font-size': '6px' }">
</kendo-dropdownlist>
`
})
export class AppCompon
浏览 3提问于2019-09-18得票数 1
回答已采纳
2回答
我有一个下拉列表与简单的自动完成从端粒UI.I，我只是想得到文本和价值从下拉列表由jQuery.But，它是不工作的。这是代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="htt
浏览 1提问于2016-04-24得票数 1
回答已采纳
我正在使用MVC局部视图创建一些动态内容，该视图作为字符串返回给AJAX调用。动态内容包括一些Kendo UI小部件(下拉列表、日期选择器等)。(它们是在局部视图中配置和创建的)，然后在页面上呈现。在使用jQuery、.html()或.append()时，这一切都运行得很好-一切加载正常，并且无需执行任何操作即可初始化Kendo小部件。
但是，考虑到要加载的动态内容的数量和所需的总时间，我考虑使用HTML DOM innerHTML属性作为更好的性能选项，但这不起作用。加载内容，但不初始化Kendo控件，即使部分视图包含用于初始化小部件的JS。
// this doesn't work
浏览 2提问于2015-09-18得票数 0
需要关于KENDO UI JQUERY和Kendo UI Angular的比较信息吗？目前正在使用Kendo UI Jquery计划将其移植到KENDO UI Angular上。
浏览 3提问于2017-11-13得票数 1
我们第一次使用Kendo UI DropDownList时没有使用knockout进行绑定。通过jquery，一个普通的html输入被转换成一个KendoUI DropDownList。但是，如何删除/编辑/添加项目到选项？
如果我通过jquery修改html input选项，它对kendoui下拉菜单没有任何影响--即使之后有一个刷新调用。
你知道该怎么做吗？谢谢
浏览 0提问于2012-04-26得票数 10
回答已采纳
1回答
我正在使用Kendo UI MVC，并尝试有一个在网格中显示所有项目的选项。
var pageSizes = [{ text: "5", value: 5 }, { text: "10", value: 10 }, { text: "25", value: 25 },{ text: "All", value: rowCount }];
$('.k-pager-sizes select[data-role="dropdownlist"]').data('kendoDropDownList&#
浏览 2提问于2016-12-07得票数 0
我在一个页面中有三个kendodropdownlist。我想知道用户当前操作的是哪个下拉列表。这样我就可以区分哪个dropdownlist，并将id发送到后端并进行不同的检查。 那么，如何在函数valueMapper中获得dropdownlist的id呢？ $(document).ready(function() {
$(".orders").kendoDropDownList({
template: '<span class="order-id">#= OrderID #</span>
浏览 24提问于2020-11-27得票数 0
1回答
我有一个Kendo UI网格，它有一个带有下拉列表的列，用于更改某些状态。它将生成网格，为下拉菜单和输入字段下的脚本生成输入，但不知何故它们将无法继续。
当我复制这些脚本并在控制台中运行它们时，dropdown将开始工作。
以下是包含下拉列表网格列：
columns.Bound(update => update.FlowStatus)
.Width(80)
.Title("Status")
.Encoded(true)
//.ClientTemplate("<input class='d
浏览 2提问于2015-06-16得票数 0
1回答
我想使用kendo ui编辑器，但是我有一个问题，我添加了这些脚本来查看：
jquery.js
kendo.core.js
kendo.data.js
kendo.popup.js
kendo.list.js
kendo.combobox.js
kendo.dropdownlist.js
kendo.userevents.js
kendo.draganddrop.js
kendo.window.js
kendo.slider.js
kendo.colorpicker.js
kendo.listview.js (图像浏览器功能)
kendo
浏览 3提问于2014-04-27得票数 0
回答已采纳
我正在尝试使用.NET MVC Kendo DropDownList (Razor)和过滤功能--正如官方Teleriks页面所描述的那样：
。
我的观点包括：
@(Html.Kendo().DropDownList()
.Name("Product")
.DataTextField("ProductName")
.DataValueField("Id")
.Filter("startswith")
.BindTo(Model.SchemataEnumerable)
.Value(M
浏览 1提问于2014-08-01得票数 1
我在Angular 6项目中有一个kendo-dropdownlist，它需要根据条件从两个不同的数据集填充。我很难弄清楚如何根据条件设置valueField和textField <kendo-dropdownlist id="UP_CM_IN" name="UP_CM_IN"
style="width:90%"
[(ngModel)]="SelectUP_CM_IN"
[defaultItem]="defaultUP_CM_IN"
浏览 19提问于2019-06-12得票数 1
我正在尝试显示带有自定义模板的Kendo UI下拉列表。每一项都应该显示一个具有动态最大值的评级。它在这一点上工作得很好，但是当选择一个项目时，选择项目不会显示评级控件，也不会将其呈现为评级，只是一个普通的输入。如果能帮上忙，我会很感激。 ? <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet&#
浏览 13提问于2020-09-27得票数 0
谁知道在kendo ui angular 2 dropDownlist中是否可以设置图像，就像在kendoui angularjs中一样？
在angularjs中：
我是否可以在kendoUi angular2中执行相同的操作？我试过了，但不起作用：
<kendo-dropdownlist class="form-control" id="choice"
[data]="list"
浏览 0提问于2016-12-11得票数 2
我不确定这是姜饼中的webkit渲染错误，还是我用来构建网站的框架(Kendo UI Mobile)的问题……
我在一个列表视图中有多个列表项。有一个2px的边框，将每个项目彼此分开。
奇怪的是，每个偶数边界都是模糊的，而每个奇数边界都是清晰的。当我滚动页面时，问题会在边框之间来回切换(偶数边框清晰，奇数边框模糊。滚动。偶数边界模糊，奇数边界清晰)。
有没有人知道这是一个渲染问题，是在安卓的2.3+默认浏览器使用的实际webkit核心中，还是在通过Kendo UI Mobile应用的css中？
我注意到在剑道列表项上，正在应用-webkit-translatez(0)规则。但我不知道这是否相关
浏览 0提问于2013-01-08得票数 0
回答已采纳
2回答
我正在尝试将浮动标签添加到本机kendo ui，如combobox、datepicker和dropdownlist。我的团队目前想要的方法是对文本框使用angular metarial，对任何其他输入使用kendo ui
我在某些部分遇到了问题：(这里是主要问题)
<input type="text" ng-model="testmodel" />
<script>
$("input").change(function(){
//i want this event to fire even when y
浏览 2提问于2016-05-26得票数 0
1回答
我正在使用像dropdownlist，datepicker等kendo ui控件。我想在按钮点击时动态设置控件的宽度。但这些变化并没有反映出来。我已经编写了如下代码
Html
<input id='Dropdownlist' type='text' style='width:150px;' />
<input type='text' id='width' style='width:100px;' />
<button id='changewidth'&g
浏览 0提问于2013-04-26得票数 0
回答已采纳
1回答
我在一个页面中有两个kendo窗口(添加和编辑)，都有同名的下拉列表。
@(Html.Kendo().DropDownList()
.Name("TypeId")
.DataTextField("TypeName")
.DataValueField("Id")
.datasource(source =>
{
source.Read(read =>
{
read.Action("Action", "Contr
浏览 1提问于2012-12-02得票数 3
回答已采纳
我是非常新的Kendo UI Grid，所以如果这是一个愚蠢的问题，请原谅我。我正在尝试在asp.net中实现基本的具有分页功能的Kendo UI Grid。但是我在kendo.web.min.js中遇到了错误。
http://localhost:63987/Scripts/kendo/2014.1.318/kendo.web.min.js中第13行、第15140列出现未处理的异常
0x800a01b6 - Microsoft运行时错误:对象不支持属性或方法‘JScript’。
这是线路
n._pristineData=e.slice(0)，这里的'e‘是具有'Count’和&
浏览 0提问于2014-06-02得票数 0
我真的不知道这是否是kendo ui的支持。
我想在JQuery模板中编写一个kendo ui函数
下面是一个例子
<script type="text/x-kendo-template" id="someId">
#
$(document).ready(function () {
$('#textfield1').attr('required');
});
#
<script>
问题是散列(“#”)标记给了我一个错误，因为kendo使用散列标记将kendo中的JavaScript和HTML分隔开
浏览 7提问于2015-08-11得票数 0
回答已采纳
1回答
VS '12 asp.net C# mvc网络应用程序+ Kendo UI，EF代码优先，Kendo UI
使用Kendo DDL
@(Html.Kendo().DropDownList()
.Name("dropdownlist")
.BindTo(new string[] { "Leasehold A", "Mineral Owner", "Prospect", "StrangerInTitleNote", "StrangerInTitleNoteInf
浏览 1提问于2013-09-09得票数 1
回答已采纳
我的html中有一个带有angularjs的kendo ui下拉列表：
<select kendo-drop-down-list="dropdownlistCatalogs" k-options="optionsDropDownListCatalogs" data-role="dropdownlist" style="display: none;">
<option value="2" selected="selected">Test1</option>
浏览 2提问于2015-04-09得票数 1
所以我正在使用Kendo UI网格，我想在列中添加数据优先级，这样我可以根据视口隐藏和显示列。我知道这在JQuery Mobile ()中是可能的，.But在Kendo UI中是可能的吗？
浏览 0提问于2016-02-18得票数 0
2回答
我正在使用selenium2和webdriver自动化Kendo UI，但我无法控制下拉菜单从下拉列表中选择一个模型值。如何使用webdriver命令从Kendo UI DropDownList中选择值？
浏览 8提问于2013-09-05得票数 0
我使用RequireJS来根据加载Kendo，它可以工作。首先加载jQuery，然后加载Kendo。但是我得到了一个错误"kendoButton不是一个函数“。这是我的app.js
require.config({
paths: {
"jquery": "lib/kendo-ui/jquery.min",
"jquery-ui": "lib/jquery-ui.min",
"kendo-ui": "lib/kendo-ui" // th
浏览 3提问于2016-06-03得票数 0
回答已采纳
我有一个kendo下拉列表，希望将textField属性分配给嵌套对象中的一个属性。
用户对象：
{
id: 123456 <--valueField
contact: {
name: Jane Doe <--textField
email:
...
}
}
问题是Kendo没有在选定的框中显示名称，也没有显示下拉列表，因为它似乎无法在contact对象中找到contact.name属性或任何其他属性。
下面是我如何配置它，并假设它是这样的，因为网格的kendo网格列field属性可以使用嵌套的对象属性名称：
<kendo
浏览 1提问于2019-09-17得票数 1
我遇到过这样的情况，我的下拉列表应该是基于我的userPropertyID=3显示来宾之家，但不知怎么的，它仍然没有显示正确的下拉列表值。需要你的帮助，谢谢你抽出时间。
var userPropertyID = 3;
var propertyTBL = [
{"propertyID":"1","propertyName":"HOTEL"},
{"propertyID":"2","propertyName":"RESORT"},
{"p
浏览 3提问于2019-03-21得票数 0
回答已采纳
1回答
我在Kendo UI中使用kendoWindow向Kendo UI中的数据表添加元素。我使用dropdownlist从其中的一组用户角色中选择用户角色。但是当我在Kendo UI kendoWindow中使用dropdownlist时，我得到的是一个文本框而不是dropdownlist。但是，当我在弹出窗口之外使用相同的下拉列表时，它就像我所期望的那样工作。要获得kendoWindow中的下拉列表，需要做些什么？
我已经在这里附加了代码。
在html页面中。
<div id="AddUserPopupTemplate">
<form class=
浏览 1提问于2016-05-04得票数 0
我正在使用Kendo UI dropdown和angular，但当我有大量数据时，它非常慢。为了克服这个问题，有没有可能动态地加载数据，比如当我们到达下拉列表中的最后一个元素时，组件应该加载下一个500条记录等。我的代码如下所示。
<kendo-dropdownlist [data]="issues" style="width: 100%;" [popupSettings]="{ width: 'auto' }">
</kendo-dropdownlist>
我期望的是本例中显示的相同行为：(使用无限滚动)
浏览 0提问于2017-11-21得票数 1
1回答
过滤和取消过滤kendo dropdownlist之后，视图模型将保留最初选择的值，但dropdownlist的值为空字符串。
这是dropdownlist的预期行为吗？我希望这个小部件与它的模型保持同步。如何“重新绑定”dropdownlist，使其在过滤后从视图模型中获取值？
var viewModel = kendo.observable({
selectedProduct: null,
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea"
浏览 1提问于2015-08-27得票数 0
如何使用jQuery orderBy属性获取Kendo UI网格数据属性？
例如，在telerik UI中，我可以这样做
jQuery("#name").data("tGrid").orderBy
这给了我所需的结果，即网格当前排序所依据的列。我在Kendo中找不到相应的属性。
同样，我还需要groupBy和filterBy属性。
浏览 1提问于2013-07-08得票数 1
我已经为此挣扎了几个小时，但我没有找到任何方法让它工作。
问题是，如果你把下拉列表放在一个窗口中，它就不能工作了。这里有一个示例。
<kendo-window :width="'300px'" :title="'Window title'" :visible="visible" style="display:none">
<kendo-datasource ref="datasource" :type="'odata'" :tr
浏览 13提问于2018-02-02得票数 0
回答已采纳
1回答
我使用Jquery Kendo Dropdownlist在列表中显示信息。这里，我的要求是使用JavaScript将下面提到的样式(.k-list-container和.k-list-scroller )添加到Dropdownlist中。
并使".k-list-scroller“的高度为动态，即下拉列表区域当被选中时，其高度应超过屏幕高度或窗口高度。在这种情况下，我使用了硬编码(height: 500px !important;)。
<code>A0</code>
下面的代码示例供参考：
<code>A1</code>
谢谢。
浏览 38提问于2019-03-30得票数 3
回答已采纳
我一直在我的asp.net MVC4项目中使用Kendo，它正常工作。
我使用过像DropDownList, Grid,这样的小部件，它没有问题。
最近我想把我的DropDownList换成MultiSelect，
因此，我尝试复制这个链接中的示例：
但是，将显示一条错误消息：
CS1061: 'Kendo.Mvc.UI.Fluent.WidgetFactory<XXX>' does not contain a definition for 'MultiSelect' and no extension method 'MultiSelect&
浏览 4提问于2014-08-20得票数 1
回答已采纳
没什么主意了，看有没有人能帮我。
这是我的代码的一部分，编辑函数在Kendo网格上下拉。在FireFox和Chrome上工作得很好，只有IE(我有11个版本)在编辑点击时给了我那个奇怪的错误。当用户单击“编辑”按钮时，将填充此代码。
$('#sleevegrid').data('kendoGrid').columns[5].editor = "<input id='SleeveSubProductID' name='SleeveSubProductID' style='width: 135px' ty
浏览 1提问于2016-03-28得票数 0
我正尝试在kendo UI中的treelist上创建一个列的锁。如果用户点击一个按钮，它将锁定treelist中的一个列，我尝试这样做：
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/frozen-columns">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</sty
浏览 2提问于2015-04-15得票数 0
我有绑定enterPress
// Custom keypress on ENTER event binding for input elements.
kendo.data.binders.enterPress = kendo.data.Binder.extend({
init: function (element, bindings, options) {
kendo.data.Binder.fn.init.call(this, element, bindings, options);
var binding = this.bindings.ente
浏览 3提问于2013-05-23得票数 1
1回答
这是我的剑道下降角2：
<kendo-dropdownlist
[defaultItem]="defaultItem"
[data] = "getYears"
[textField]="'YearText'"
[valueField]="'YearValue'"
[(ngModel)] = "selectedYear"
>
</kendo-dropdownlist>
clearFilters()是我的方法，当我单击UI上的clear时，它将被执行。
priv
浏览 2提问于2016-10-28得票数 0
1回答
我想设置差异。kendo的id下拉父<span>
以下是两个d-d的简单代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet
浏览 8提问于2013-09-10得票数 0
回答已采纳
在我们的项目中，我需要乘以表行。将要复制的行包含几个初始化的Kendo UI元素(AutoComplete、DropDownList、DatePicker)。当我克隆row并更改其子元素的I时，但是这些复制的Kendo UI元素不起作用。有没有解决这个问题的办法？
浏览 0提问于2015-07-13得票数 2
1回答
剑道更改事件未触发
、、、
我有一个Kendo窗口(模式)，我正在用各种元素填充它，以便在我的应用程序中收集“小部件”的不同属性。我有下拉列表，数字文本框，多选等。我已经连接了所有它们的change事件，比如下面的下拉列表：
@(Html.Kendo().DropDownList()
.Name("property-edit-" + @WidgetProperty.widget_property)
.HtmlAttributes(new { @class = "widget-property-value-edit andon-type-" + WidgetProperty.
浏览 23提问于2017-06-27得票数 1
我有一个MVC下拉列表，它被更改为一个Kendo列表，用于用户界面的外观和感觉。但是，虽然我已经为其中一个选择列表项将设置为true，但该项没有被选中。
我不确定Kendo是否正在创建这个问题，或者它是否与MVC有关。
@Html.DropDownList("Categories",(IEnumerable<SelectListItem>)ViewBag.Categories, new { @class = "jselect-control", id = "drp-risk-category" })
-以下简称javascript
浏览 0提问于2018-12-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
