La définition de modèle personnalisé pour kendo ui colonne de la grille

J'ai un kendo ui grille et je veux lier des images. Voici mon 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>&ordm;C</span></h2>
<p>Cubes</p>
</div>
<span class="rainy">&nbsp;</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%;
}

Pour la partie suivante:

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("");

Je suis "Inline balisage des blocs ne peuvent pas être imbriqués. Un seul niveau de inline balisage est permis." erreur.

Que dois-je faire pour rendre ma grille avec succès?

Merci d'avance,

Voir ce post : stackoverflow.com/questions/10684025/...

OriginalL'auteur anilca | 2013-04-16

  1. 6
    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);
    Si vous avez beaucoup de conditions dans votre modèle, il est préférable de passer la valeur à l'essai pour une fonction. columns.Bound(p => p.bid).ClientTemplate("#=getImage(direction)#") ...more code... <script type="text/javascript"> function getImage(direction){ if(direction == 1) { return "<img src='~/Images/up.png' alt='up'/>"; } else if(direction == 0) { return "<img src='~/Images/down.png' alt='down'/>" } else if(<some other condition) {} } </script>
    Quelqu'un peut-il recommander quelque chose que je peux lire pour comprendre comment tout cela syntaxe tient. J'ai du mal à comprendre. Merci

    OriginalL'auteur HaBo

  2. 1

    C'est à cause de rasoir voit de multiples basées sur des modèles de blocs, il le trouve pour le contrôle tabstrip:

     .Content(
@<text>
@if (Model != null)
{   ..

    et de la grille:

    columns.Template(
@<text>
@if (item.direction == 1)
{

    Et le Rasoir ne fonctionne pas comme ça. Essayez l'approche @Samuel liés à, qui consiste à utiliser la méthode d'assistance pour rendre la grille, et l'appeler helper dans votre tabstrip.

    OriginalL'auteur Brian Mains