Defining custom template for kendo ui grid column

Question

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>&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 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,

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

It's because razor sees multiple templated blocks, it finds this for the tabstrip:

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

and the grid:

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

And Razor doesn't like that. Try the approach @Samuel linked to, which is to use the helper method to render the grid, and call that helper in your tabstrip.