title: Defining custom template for kendo ui grid column
body: <p>I have a kendo ui grid and I want to bind images. Here is my code:</p>
  
  <pre><code>@model List&lt;NewHope.Model.Mt4_prices_instant&gt;
  
  &lt;div class="tabContainer"&gt;
  @(Html.Kendo().TabStrip()
            .Name("tabstripMarketWatch")
            .Items(tabstrip =&gt;
            {
                tabstrip.Add().Text("Market Rates")
                    .Selected(true)
                    .Content(
                          @&lt;text&gt;
                              @if (Model != null)
                              {   
                                  @(Html.Kendo().Grid(Model)    
                                      .Name("Grid")
                                      .Columns(columns =&gt;
                                      {
                                          columns.Template(
                                              @&lt;text&gt;
                                                  @if (item.direction == 1)
                                                  {   
                                                      &lt;img src="~/Images/up.png" alt="up"/&gt;
                                                  }
                                                  else if (item.direction == 0)
                                                  {
                                                      &lt;img src="~/Images/down.png" alt="down"/&gt;
                                                  }
                                              &lt;/text&gt;).Title("");
                                          columns.Bound(p =&gt; p.symbol);
                                          columns.Bound(p =&gt; p.bid);
                                          columns.Bound(p =&gt; p.ask);
                                      })
                                      //.Groupable()
                                      //.Pageable()
                                      .Sortable()
                                      .Scrollable()
                                      //.Filterable()
                                      .DataSource(dataSource =&gt; dataSource
                                          .Ajax()
                                          .Read(read =&gt; read.Action("Products_Read", "MarketWatch"))
                                      )
                                  )    
                              }
                          &lt;/text&gt;
                    );
  
                tabstrip.Add().Text("Cubes")
                    .Content(@&lt;text&gt;
                      &lt;div class="weather"&gt;
                          &lt;h2&gt;18&lt;span&gt;&amp;ordm;C&lt;/span&gt;&lt;/h2&gt;
                          &lt;p&gt;Cubes&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;span class="rainy"&gt;&amp;nbsp;&lt;/span&gt;
                    &lt;/text&gt;);
            })
      )
  &lt;/div&gt;
  &lt;style&gt;
  #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%;
  }
  </code></pre>
  
  <p></p>
  
  <p>For the following part:</p>
  
  <pre><code>columns.Template(
      @&lt;text&gt;
          @if (item.direction == 1)
          {   
              &lt;img src="~/Images/up.png" alt="up"/&gt;
          }
          else if (item.direction == 0)
          {
              &lt;img src="~/Images/down.png" alt="down"/&gt;
          }
       &lt;/text&gt;).Title("");
  </code></pre>
  
  <p>I'm getting <strong>"Inline markup blocks cannot be nested.  Only one level of inline markup is allowed."</strong> error.</p>
  
  <p>What do I have to do to render my grid succesfully?</p>
  
  <p>Thanks in advance,</p>