ClientDetailTemplateId - 当 RTL（从右到左）打开图标指向错误方向时答案

【问题标题】：ClientDetailTemplateId - when RTL (right-to-left) open icon is heading the wrong directionClientDetailTemplateId - 当 RTL（从右到左）打开图标指向错误方向时
【发布时间】：2017-03-28 06:42:23
【问题描述】：

我已经建立了一个网格，它使用 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>

【问题讨论】：

标签： asp.net-mvc telerik grid right-to-left

【解决方案1】：

使用浏览器的调试工具结合谷歌搜索进行一些挖掘后，我发现我可以像这样编辑样式

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

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

不错。

【讨论】：