2016-04-06 5 views
2

私は剣道のUIをかなり新しくしています。剣道UIを条件付きでフォーマットする方法タブストリップに含まれるグリッド行?

私は、剣道のUIグリッド内で、剃刀の構文を使用して条件付きで行の色を付けようとしています。グリッドは、剣道のUIタブストリップに含まれています。ここで私が書いたコードは次のとおりです。

@(Html.Kendo().TabStrip() 
    .Name("tabstrip") 
    .Items(items => 
     { 
      items.Add().Text("Books") 
       .Selected(true) 
       .Content(
       @<text>@(Html.Kendo().Grid((IEnumerable<Library.Models.Books>)ViewBag.Books) 
          .Name("grid2") 
          .Columns(columns => 
          { 
           columns.Bound(books => books.BookID); 
           columns.Bound(books => books.BookName); 
          }) 
          .ClientRowTemplate(
           "<tr class= 'red' data-uid='#= uid #'>" + 
           "<td>#: BookID #</td>" + 
           "<td>#: BookName #</td>" + 
           "</tr>") 
          .Pageable() 
          .Sortable() 
       ) 
       </text> 
       ); 

     })) 

瞬間に、私はいくつかの条件に基づいて、それに色をしたいと思います、特定の値をチェックしないんだけど、着色のも、この単純な作業、が、赤色の行は機能しません。何か案は?

+0

あなたはこの記事をチェックすることができます。http://www.telerik.com/forums/conditionally-changing-the-row-color – calinaadi

+0

@calinaadiはご回答いただきありがとうございます。はい、私はすでにこのリンクと他のTelerikのリソースの束を通過しました。しかし、私のコードで何が間違っているかは分かりません。 – SJaka

答えて

2

私は、同じトピックに関する今後の検索について自分の質問に答えています。

グリッドの現在のバインディングはサーバーバインディングで、ClientRowTemplate()はAjaxバインディングが使用されている場合にのみ適用されるため、まったく適用されていないということが判明しました。データソースをAjaxに変更し、魅力的に機能しました。

私はTelerikとサポートチケットを開いて、次のことになったが、私が得た応答である:

を...行テンプレートについては、ClientRowTemplate()メソッドは、そう、Ajaxの結合が使用されている場合にのみ適用されます現在のケースではグリッドには適用されませんでした。ちょうどグリッドに以下を追加し、アヤックスに結合し、サーバからバインドを変更するためには

@(Html.Kendo().TabStrip() 
    .Name("tabstrip") 
    .Items(items => 
     { 
      items.Add().Text("Books") 
       .Selected(true) 
       .Content(@<text>@(Html.Kendo().Grid((IEnumerable<Library.Models.Books>)ViewBag.Books) 
          .Name("grid2") 
          .Columns(columns => 
          { 
           columns.Bound(books => books.BookID); 
           columns.Bound(books => books.BookName); 
          }) 
          .ClientRowTemplate(         
           "<tr data-uid='#= uid #'>"+ 
            "<td class='#= BookID == 1 ? \"red\" : BookID == 2 ? \"orange\" : BookID == 3 ? \"yellow\" : \"green\" #' style=\"text-align:center;\">#: BookID #</td>" + 
            "<td>#: BookName #</td>" + 
           "</tr>" 
           ) 
         .Pageable() 
         .Sortable() 
         .DataSource(datasource => datasource 
            .Ajax() 
            .PageSize(20) 
            .ServerOperation(false) 
         ) 
      ) 
      </text> 
      ); 
    })) 

:...ここで

は私のコードは、条件付き書式設定行となりました

.DataSource(datasource => datasource 
       .Ajax() 
       .PageSize(20) 
       .ServerOperation(false) 
) 

私がしたのは、BookIDの値に基づいて、さまざまな行/セルを条件付きでフォーマットすることでした。条件付きフォーマット(さまざまなクラスを適用する)を 'td'タグに適用することを終了しました。行全体がセルではなく条件付きでフォーマットされている必要がある場合は、同じことを 'tr'タグに適用できます。すなわち

.ClientRowTemplate("<tr class='#= BookID == 1 ? \"red\" : BookID == 2 ? \"orange\" : BookID == 3 ? \"yellow\" : \"green\" #' data-uid='#= uid #'>"+ 
    "<td>#: BookID #</td>" + 
    "<td>#: BookName #</td>" + 
    "</tr>" 
)