ClientDetailTemplateId - 當RTL（從右到左）打開圖標朝着錯誤的方向時

Question

我已經構建了一個使用ClientDetailTemplateId顯示每個訂單行詳細信息的網格。

我也使用RTL風格來顯示與RTL語言對齊的網格。

然而，打開每行細節的圖標仍顯示爲LTR方向。

任何想法如何解決這個問題？

這裏是工作（或不工作）的示例代碼

感謝

<div class="k-rtl"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-18 col-md-12"> 

       <script type="text/x-kendo-template" id="rowTemplate"> 
        <div class="orderRow"> 
         <tr> 
          <td> 
           #:OrderID# 
          </td> 
          <td> 
           #:Freight# 
          </td> 
          <td> 
           #:OrderDate# 
          </td> 
          <td> 
           #:ShipName# 
          </td> 
          <td> 
           #:ShipCity# 
          </td> 
         </tr> 
        </div> 
       </script> 

       <script> 
        var rowTemplate = kendo.template($('#rowTemplate').html()); 
       </script> 

       @(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>() 
       .Name("grid") 
       .Columns(columns => 
       { 
        columns.Bound(p => p.Freight).Title("מספר ספינה"); 
        columns.Bound(p => p.OrderDate).Title("תאריך הזמנה").Format("{0:MM/dd/yyyy}"); 
        columns.Bound(p => p.ShipName).Title("שם משלוח"); 
        columns.Bound(p => p.ShipCity).Title("עיר משלוח"); 
       }) 
       .Pageable() 
       .Sortable() 
       .Scrollable() 
       .Filterable() 
       .ClientDetailTemplateId("template") 
       .HtmlAttributes(new { style = "height:550px;" }) 
       .DataSource(dataSource => dataSource 
        .Ajax() 
        .PageSize(20) 
        .Read(read => read.Action("Orders_Read", "Grid")) 
       ) 
       .Events(events => events.DataBound("dataBound")) 
       ) 

       @(Html.Kendo().ContextMenu() 
       .Name("menu") 
       .Target("#grid") 
       .Filter(".orderRow") 
       .Orientation(ContextMenuOrientation.Horizontal) 
       .Items(items => 
       { 
        items.Add() 
         .Text("Forward"); 
       }) 
       ) 
      </div> 
     </div> 

     <script id="template" type="text/kendo-tmpl"> 
      @(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>() 
      .Name("grid_#=OrderID#") 
      .Columns(columns => 
      { 
       columns.Bound(o => o.OrderID).Title("מספר הזמנה").Width(110); 
       columns.Bound(o => o.ShipCountry).Title("ארץ משלוח").Width(110); 
       columns.Bound(o => o.ShipAddress).Title("כתובת משלוח").ClientTemplate("\\#= ShipAddress \\#").Width(110); 
       columns.Bound(o => o.ShipName).Title("שם משלוח").Width(300); 
      }) 
      .DataSource(dataSource => dataSource 
       .Ajax() 
       .PageSize(10) 
       .Read(read => read.Action("Orders_Read", "Grid", new { employeeID = "#=OrderID#" })) 
      ) 
      .Pageable() 
      .Sortable() 
      .ToClientTemplate() 
      ) 
     </script> 
     <script> 
      function dataBound() { 
       this.expandRow(this.tbody.find("tr.k-master-row").first()); 
      } 
     </script> 
    </div> 
</div> 

Answer 1

使用的瀏覽器與谷歌搜索相結合的調試工具一些挖後，我發現我可以編輯這樣的風格

.k-i-expand:before{ 
    content: "\e007" 
} 
.k-i-collapse:before{ 
    content: "\e002" 
} 

這給了我我需要的東西加上還有很多其他的圖標可以放在那裏。

不錯。