对于剑道UI网格列定义自定义模板 [英] Defining custom template for kendo ui grid column
本文介绍了对于剑道UI网格列定义自定义模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个剑道UI电网和我要绑定的图像。这里是我的code：
@model名单＆LT; NewHope.Model.Mt4_prices_instant＆GT;＆LT; DIV CLASS =TabContainer的＆GT;
@（Html.Kendo（）。TabStrip控件（）
。名称（tabstripMarketWatch）
.Items（标签栏=＆GT;
{
tabstrip.Add（）。文本（市场价格）
.Selected（真）
。内容（
@＆LT;文字和GT;
@if（型号！= NULL）
{
@（Html.Kendo（）。网格（模型）
。名称（网格）
.Columns（列=＆GT;
{
columns.Template（
@＆LT;文字和GT;
@if（item.direction == 1）
{
＆LT; IMG SRC =〜/图片/ up.pngALT =向上/＆GT;
}
否则，如果（item.direction == 0）
{
＆LT; IMG SRC =〜/图片/ down.pngALT =向下/＆GT;
}
＆LT; /文本＆GT;）标题（）。
columns.Bound（p值=＆GT; p.symbol）;
columns.Bound（p值=＆GT; p.bid）;
columns.Bound（p值=＆GT; p.ask）;
}）
//。Groupable（）
//。可分页（）
.Sortable（）
.Scrollable（）
//。可筛选（）
.DataSource（数据源=＆GT;数据源
阿贾克斯（）
.Read（读=＆GT; read.Action（Products_Read，市场观察））
）
）
}
＆LT; /文字和GT;
）; tabstrip.Add（）。文本（多维数据集）
.Content（@＆LT;文字和GT;
＆LT; DIV CLASS =天气＆GT;
＆所述; H2＆GT 18所述;跨度＆GT;＆放大器; ordm;℃下/跨度＆GT;＆下; / H2＆GT;
＆所述p为H.;立方体＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT;跨度类=梅雨＆GT;＆安培; NBSP;＆LT; / SPAN＆GT;
＆LT; /文本＆GT;）;
}）
）
＆LT; / DIV＆GT;
＆LT;风格＆GT;
＃tabstripMarketWatch-1，＃tabstripMarketWatch -2- {/ *标签栏元素* /
位置：绝对的;
顶部：41px;
底部：0;
左：0;
右：0;
宽度：汽车;
身高：汽车;
}#Grid {
顶部：0;
底部：0;
左：0;
右：0;
宽度：100％;
高度：100％;
}
有关以下部分：
columns.Template（
@＆LT;文字和GT;
@if（item.direction == 1）
{
＆LT; IMG SRC =〜/图片/ up.pngALT =向上/＆GT;
}
否则，如果（item.direction == 0）
{
＆LT; IMG SRC =〜/图片/ down.pngALT =向下/＆GT;
}
＆LT; /文本＆GT;）标题（）。
我得到的行内标记块不能嵌套。行内标记的只有一个级别是允许的。错误。
什么我必须做成功地使我的网格？
由于提前，
解决方案
columns.Bound（P =＆GT; p.bid）.ClientTemplate（＆LT;＃如果（方向== 1）{＃＆gt;中+
＆LT; IMG SRC =〜/图片/ up.png'ALT =向上/＆gt;中+
＆LT;＃}否则如果（方向== 0）{＃＆gt;中+
＆LT; IMG SRC =〜/图片/ down.png'ALT =向下/＆gt;中+
＆LT;＃}＃＆gt;中）
.title伪（结束）宽度（80）。
I have a kendo ui grid and I want to bind images. Here is my code:
@model List<NewHope.Model.Mt4_prices_instant>
<div class="tabContainer">
@(Html.Kendo().TabStrip()
.Name("tabstripMarketWatch")
.Items(tabstrip =>
{
tabstrip.Add().Text("Market Rates")
.Selected(true)
.Content(
@<text>
@if (Model != null)
{
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Template(
@<text>
@if (item.direction == 1)
{
<img src="~/Images/up.png" alt="up"/>
}
else if (item.direction == 0)
{
<img src="~/Images/down.png" alt="down"/>
}
</text>).Title("");
columns.Bound(p => p.symbol);
columns.Bound(p => p.bid);
columns.Bound(p => p.ask);
})
//.Groupable()
//.Pageable()
.Sortable()
.Scrollable()
//.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "MarketWatch"))
)
)
}
</text>
);
tabstrip.Add().Text("Cubes")
.Content(@<text>
<div class="weather">
<h2>18<span>ºC</span></h2>
<p>Cubes</p>
</div>
<span class="rainy"> </span>
</text>);
})
)
</div>
<style>
#tabstripMarketWatch-1, #tabstripMarketWatch-2 { /* tabstrip element */
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}
#Grid {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
For the following part:
columns.Template(
@<text>
@if (item.direction == 1)
{
<img src="~/Images/up.png" alt="up"/>
}
else if (item.direction == 0)
{
<img src="~/Images/down.png" alt="down"/>
}
</text>).Title("");
I'm getting "Inline markup blocks cannot be nested. Only one level of inline markup is allowed." error.
What do I have to do to render my grid succesfully?
Thanks in advance,
解决方案
columns.Bound(p => p.bid).ClientTemplate("<# if(direction == 1) {#>" +
"<img src='~/Images/up.png' alt='up'/>" +
"<#} else if(direction == 0) {#>" +
"<img src='~/Images/down.png' alt='down'/>" +
"<#}#>")
.Title("End").Width(80);
这篇关于对于剑道UI网格列定义自定义模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
