ClientDetailTemplateId - when RTL open icon is heading the wrong direction

2 posts, 0 answers
  1. שחר
    שחר avatar
    2 posts
    Member since:
    Jan 2016

    Posted 27 Mar 2017 Link to this post

    Hi all

     

    I have built a grid which uses ClientDetailTemplateId to display details per order row.

    I am also using the RTL style to display the grid aligned to RTL languages.

    Yet the icon to open the details for each row is still displayed to the LTR direction.

     

    Any idea how to fix this?

    Here is a working (or not working) sample code

     

    Thanks

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

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 29 Mar 2017 Link to this post

    Hello,

    I am afraid that I am not able to replicate such behavior. Please refer to the http://dojo.telerik.com/eHULib example with Kendo UI Grid hierarchy and rtl applied. Could you please confirm that you are adding the rtl styles as mentioned in the description of the  Grid / RTL support demo?

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top