个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我使用了 Jquery Kendo Dropdownlist 来显示列表中的信息。在这里，我的要求是使用 JavaScript 添加以下提到的样式，即(.k-list-container 和 .k-list-scroller)到 Dropdownlist。
并使“.k-list-scroller”的高度动态化，即选择下拉列表区域时，它的高度应该超过屏幕高度或窗口高度。在这种情况下，我进行了硬编码(高度:500 像素!重要；)。
.k-list-container{
width: auto !important;
height: auto !important;
}
.k-list-scroller{
height: 500px !important;
overflow-y: scroll !important;
}
以下代码示例供引用-
<style>
.k-list
{
white-space: nowrap;
}
.k-list-container{
width: auto !important;
height: auto !important;
}
.k-list-scroller{
height: 500px !important;
overflow-y: scroll !important;
}
</style>
<div id="example">
<p>
data: <select id="local"></select>
</p>
</div>
<script>
$(function() {
var data = [
{ text: "Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey ", value: "13" },
{ text: "Black 1", value: "1" },
{ text: "Orange 2", value: "2" },
{ text: "Black 3", value: "3" },
{ text: "Orange 4", value: "4" },
{ text: "Black 5", value: "5" },
{ text: "Orange 6", value: "6" },
{ text: "Black 7", value: "7" },
{ text: "Orange 8", value: "8" },
{ text: "Black 9", value: "9" },
{ text: "Orange 10", value: "10" },
{ text: "Black 11", value: "11" },
{ text: "Orange 12", value: "12" }
];
$("#local").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
});
});
</script>
谢谢。
最佳答案
您可以向由 $("#local").kendoDropDownList({}) 创建的元素添加一个类。创建的元素有一个带有“-list”后缀的 id。
查看演示片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<style>
#dropdownlist-list.test-class .k-list {
white-space: nowrap;
}
#dropdownlist-list.test-class .k-list-container {
width: auto !important;
height: auto !important;
}
#dropdownlist-list.test-class .k-list-scroller {
//height: 500px !important; // Causes a UI glitch
overflow-y: scroll !important;
}
</style>
</head>
<body>
<button onclick="testFunction()">Test Button</button>
<br>
<input id="dropdownlist" />
<script>
var data = [
{ text: "Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey ", value: "13" },
{ text: "Black 1", value: "1" },
{ text: "Orange 2", value: "2" },
{ text: "Black 3", value: "3" },
{ text: "Orange 4", value: "4" },
{ text: "Black 5", value: "5" },
{ text: "Orange 6", value: "6" },
{ text: "Black 7", value: "7" },
{ text: "Orange 8", value: "8" },
{ text: "Black 9", value: "9" },
{ text: "Orange 10", value: "10" },
{ text: "Black 11", value: "11" },
{ text: "Orange 12", value: "12" }
];
$("#dropdownlist").kendoDropDownList({
dataSource: data,
dataTextField: "text",
dataValueField: "value"
});
function testFunction() {
$("#dropdownlist-list").addClass("test-class");
}
</script>
</body>
</html>关于javascript - Kendo Dropdownlist 使用 JavaScript 添加样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55426841/
25
4
0
我正在尝试在 Kendo 网格中获取 Kendo Tree 。 我可以实现获取数据，但不能实现树功能。 下面是相同的链接 http://dojo.telerik.com/oDakE 任何人都可以帮助我
我使用的是 Kendo Treeview ，在 Kendo Treeview 节点中，我嵌入了 Kendo 下拉菜单。 一切正常，下拉列表出现在 Treeview 节点上，但是当我展开 treevie
我在同一页面上有 TreeView 和 Grid，我需要从网格数据填充 TreeView。所以流程是这样的: 用户从下拉列表中选择某项内容并单击按钮 -> Web 服务调用 -> 使用来自 Web 服
我正在尝试在 Treeview 中嵌套一个窗口。我想要这样，当用户选择一个特定的节点时，它会打开一个 Kendo 窗口。有没有人做过这个？我在演示中没有看到太多类似的东西。 我正在使用 mvc 包装器
我想知道是否可以加载 kendo.View(...) 或 kendo.layout(...) 的内容一个单独的 html 文件？ 这是剑道的例子Hello World Single Page Appl
我有 Kendo HierarchicalDataSource绑定(bind)到 Kendo 的对象 treeview小部件。 HierarchicalDataSource只返回一个一级深度的 jso
我想为 kendo-grid-react-wrapper 引入类似 kendoDateRangePicker 的东西。有 kendoDatePicker 允许您只选择一个日期而不是两个: filter
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但我很难找到如何将数据从 draggable 对象中删除。 我的代码是这样的...... var viewMode
我正在尝试最新的 Kendo UI Web 版本，以便在我们的应用程序中使用它，特别是网格组件。 如图here网格能够在移动设备或任何浏览器中进行自适应渲染，如果 mobile属性设置为“手机”或“平
Kendo UI Web 和 Kendo UI Core 之间有什么区别 https://www.nuget.org/packages/KendoUIWeb http://www.nuget.org/
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但是我很难找到如何从 draggable 对象中删除数据。 我的代码是这样的…… var viewModel =
我正在尝试最新的 Kendo UI Web 版本，以便在我们的应用程序中使用它，特别是网格组件。 如图here网格能够在移动设备或任何浏览器中进行自适应渲染，如果 mobile属性设置为“手机”或“平
KendoUI 版本 2013.3.1119使用 Kendo MVVM 我有一个我构建的颜色选择器，它使用平面颜色选择器和使用调色板的颜色选择器。它们都可以正常运行，但平面颜色选择器的布局已关闭， s
我使用以下方法显示格式化为百分比的数值: columns.push( { field: key, hidden:
Hello 使用类似于此示例的复选框实现了自定义过滤器菜单: http://dojo.telerik.com/@SiliconSoul/oBoCu 我的问题是，如果用户选择/取消选择了一些复选框，但从
网格列可以调整大小。我想存储用户调整的列宽并在下一个 session 开始时恢复它们。 我发现存储列宽的最佳方法如下: var element = $('#grid').kendoGrid({
我有一个Kendo ui图表，该图表显示来自动态数据源的柱形图。但有时图表会打开可用空间大小的一半。当我单击某些链接或更改日期时，它会自动调整大小。知道为什么会导致它吗？ 在数据源更改事件中，当它显示
我发现 kendoui 图表有两种方法:refresh方法和redraw方法，有什么区别？我想他们俩都是再画一次图表。但是如果图表是根据 ajax 从远程数据绑定(bind)的，则请求不会再次触发。
我有一个包含太多列的剑道网格。最初我选择隐藏一些列，但后来我决定用水平滚动条显示所有列。 我通过为每一列分配宽度来做到这一点。当我这样做时，每列之间的行与标题行不同步。 我的意思是，网格数据部分的行相
enter image description here 我正在尝试使用带有复选框的 Treeview 来定义用户权限。 (2 个 Action - 启用/禁用正确) 如何从父节点获取值(id)？ K
我是一名优秀的程序员,十分优秀！