Defining a custom template for a kendo ui network column

Question

I have a kendo ui grid and I want to link the 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>&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%; } 

For the next 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 get it . Built-in markup blocks cannot be nested. Only one level of built-in markup is allowed. .

What do I need to do to make my grid successful?

Thanks in advance,

Answer 1

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

Answer 2

This is because the razor sees several template blocks, it finds this for the tab:

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

and grid:

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

And the Razor doesn't like it. Try the @Samuel approach associated with it, which should use a helper method to render the grid and call this helper in your strip.