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"
}

这给了我需要的东西，还有许多其他图标可以放置在那里。

好。