我有这个道场:
我试图通过以下方法将附加参数传递给模板:
detailTemplate: kendo.template($("#detail-template").html())({someParam: 'someValue'})
但是,当我这样做时,我不能再使用来自数据源的变量了.当我取消注释这些变量时,它会出错(请参阅控制台输出)
<div>
Name: #: /*name*/ #
</div>
<div>
Age: #: /*age*/ #
</div>
如何在kendo模板中同时使用数据源变量和外部变量？
我在这里有一些代码,我试图根据数据项的值设置单元格的背景颜色:http://dojo.telerik.com/@solidus-flux/eHaMu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
attributes: function(e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
};
}
//attributes: {
//"class": "table-cell",
//style: "text-align: right; font-size: 14px"
//}
} ], …我正在尝试为我的网格创建一个工具提示,如下所示:
$("#grid").kendoTooltip({
autoHide: true,
showOn: "mouseenter",
width:125,
height:125,
position: "right",
filter: ".k-grid-content a.hasTooltip",
content: kendo.template($("#storeTerritory").html())
});
模板定义:
<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
#for(var i = 0; i < Territories.length; i++){#
#if (Territories != 'null' && Territories != '') {#
<p>#=Territories[i].TerritoryDescription#</p>
#} else{#
<p>Information not available</p>
#}#
#}#
</div>
</script>
我在这里设置了一个示例:http:
//jsbin.com/iJunOsa/21/edit
我得到了ReferenceError: Territories is not defined在控制台错误,当我鼠标移到"威尔顿"
假设我storeTerritory要用普通的HTML 替换模板的内容,然后出现工具提示:
<p>Wilton</p>
问题可能是什么？
我正在尝试DateTime在我的Kendo ListView模板中格式化我的对象,但建议的kendo.toString方法似乎对我不起作用.
我已经删除了许多与我的问题无关的代码,使其更容易理解.
我有一个Kendo DataSource看起来如下:
contactDataSource: new kendo.data.DataSource({
transport: {
read: {
url: "/baa/contact/getcontacts",
dataType: "json",
type: "GET"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false, nullable: true },
CompanyName: { type: "string" },
ContactName: { type: "string" },
ContactPhone: { type: "string" },
ContactEmail: { type: "string" },
ImageUrl: { type: "string" },
Website: { type: "string" },
RecentBaas: [
{
Name: { type: "string" …我使用 Kendo 分层网格在我的父（主）网格和产品中显示类别作为子行（详细信息网格）。
这是我的演示。
我正在使用自定义模板添加/编辑我的产品。
在弹出的表单中，我想在产品表单字段上方的标签中显示父类别名称及其一些详细信息。
现在在每个产品添加或编辑中，我想在表单中显示父类别的详细信息，并且还想通过产品创建/更新请求动态提交父 CategoryId
在我下面的 JS 代码中，我可以使用下面的代码访问当前的细节网格包装器，但不知道如何访问parent row model细节
.....
.......
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
....
......
//ON CLICK ADD/EDIT BUTTON FOR CHILD ROWS
edit: function(e) {
var detailGridWrapper = this.wrapper;
//Want to get Parent Category model
//Retrieve some attributes out of the Category model, so that I can display them in the popup Add / Edit Product form
........
.....
由于某种原因，我的 numericTextbox 在剑道模板中仍然显示小数和小数点后的数字。我按照其他答案设置了decimals =“0”和format =“#”的属性，但无济于事。
代码：
<table>
<tbody>
# for (var i = 0; i < data.length; i++) { #
<tr>
<td>
<input type="number" data-role="numerictextbox" value="#= data[i].Copies #"
decimals="0" format="\\#" min="1" class="copies" style="width:60px;"/>
</td>
</tr>
# } #
</tbody>
</table>
我使用Kendo UI网格，并使用自定义模板进行弹出式添加/编辑表单。这是我的演示。
仅在编辑记录时，我要在弹出表单中隐藏FirstName和LastName输入字段，而不要在“添加”上。
有谁知道该怎么做？谢谢。
下面是我的代码：
HTML：
<!-- grid element -->
<div id="grid" style="width: 700px; margin: 0 auto;"></div>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<p>Custom editor template</p>
<div class="k-edit-label">
<label for="FirstName">First Name</label>
</div>
<!-- autoComplete editor for field: "FirstName" -->
<input type="text" class="k-input k-textbox" data-bind="value:FirstName"/>
<div class="k-edit-label">
<label for="LastName" style="color: red;">Last Name</label>
</div>
<input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">
<div class="k-edit-label">
<label for="BirthDate">Birth Date</label>
</div>
<!-- datepicker editor for …将KendoUI Grid与列模板一起使用时,我遇到以下问题:
我的行数据看起来像这样(简化):
{ Name: 'name', Statuses: [ {Name: 'StatusA', Value: 'ValueA'} , {Name:'StatusB', Value: 'ValueB'}] }
因此,在每行数据上,我都有一个状态名称 - 值集合列表.我有一些以状态名称命名的列(每个状态一个):StatusA,StatusB等.
在列模板中,我想根据列名放置状态值.我可以访问模板中的data.Statuses并获取状态值,但模板不知道正在呈现哪个列.
有没有办法访问模板中的列名称或将其作为参数发送？
任何帮助表示赞赏!
我在http://jsbin.com/ifimadOw/11/edit创建了一个jsbin 进行说明。
我有这个listview对象：
<ul id="marketplace-categories-listview" data-bind="source: results"></ul>
我有这个数据集：
dsCats = new kendo.data.DataSource({
transport: {
read: {
url: myUrl,
data: {
key: myKey
}
}
}
});
$("#marketplace-categories-listview").kendoMobileListView({
dataSource: dsCats,
template: $("#marketplace-product-template").text()
});
从API返回的数据如下所示：
{"count": 3, "results": ["Acupuncture Therapy","Automobiles","Lawn Care"]}
这是我的模板：
<script type="text/x-kendo-tmpl" id="marketplace-categories-template">
<li data-bind="text: this"></li>
</script>
由于我的数据没有命名元素，因此无法在模板中使用“＃：category＃”之类的内容。我也尝试了数据绑定（如上所述），但是到目前为止没有任何效果。当然，有一种方法可以做到这一点。
我真的不知道这是对此的kendo ui支持.
我想JQuery在kendo ui模板中编写一个函数
这是一个例子
<script type="text/x-kendo-template" id="someId">
#
$(document).ready(function () {
$('#textfield1').attr('required');
});
#
<script>
事情是哈希("#")标记给我一个错误,因为剑道ui使用哈希标记来分隔剑道UI中的JavaScript和HTML.那么如何在上面的例子中添加哈希标记呢.有人能帮我吗 ？？
kendo-template ×10
kendo-ui ×10
javascript ×5
kendo-grid ×5
jquery ×3
telerik ×2
dojo ×1
telerik-grid ×1