RTL "bugs" in Grid layout

[dani]

I've found 2 problems in the rtl mode of the grid:

a. the last column separator is missing (I can see it is missing on your example as well). This is probably something in the css that need to be fixed.

b. in Edit mode (which is not in your example) the cells location is shift and they not stay under the right header.

I'm attaching a picture of both problems. it occurs in all my rtl grid's (this one has an edit template to the first column, but it happens on every grid)

I've checked the grids without the t-rtl class. the 1st problem is gone (separator is back) but the 2nd problem stays.

Checked the site without my own css (only telerik's) and it still there.

Any ideas ?

(1st grid definition:

<%=
                Html.Telerik().Grid<ItemsInOrderPOCO>()
                    .Name("ItemsInOrderGrid")
                    .ClientEvents(events => events.OnSave("ItemsInOrderGrid_OnSave"))
                                    .DataKeys(dataKeys =>
                                    {
                                        dataKeys.Add(e => e.OrderID);
                                        dataKeys.Add(e => e.ItemID);
                                    })
                    .ToolBar(commands => commands.Insert())
 .DataBinding(dataBinding =>
                        {
                        dataBinding.Ajax()    //Ajax binding
                .Select("SelectItemGridAjax", "Orders", new { OrderID = Model.myOrder.OrderID })
                .Insert("InsertItemGridAjax", "Orders", new { OrderID = Model.myOrder.OrderID })
                .Update("UpdateItemGridAjax", "Orders")
                .Delete("DeleteItemGridAjax", "Orders");
                        })
                    .Columns(c =>
                        {
                            c.Bound(o => o.ItemID).Title("???").Width(100);
                            c.Bound(o => o.OrderID).Column.Visible = false;
                            c.Bound(o => o.ItemDescription).Title("???? ????").Width(200);
                            c.Bound(o => o.NumOfItems).Title("????").Width(50);
                            c.Bound(o => o.CostOfItem).Title("????").Width(50);
                            c.Bound(o => o.TotalCost).Title("???").Width(50);
                            c.Bound(o => o.SupplyDate).Title("????? ?????").Width(100);
                            c.Command(commands =>
                                {
                                    commands.Edit().ButtonType(GridButtonType.Image);
                                    commands.Delete().ButtonType(GridButtonType.Image);
                                }).Width(180).Title("?????");
                        })
        %>

Thanks,
Dani

[Alex Gyoshev]

Hi Dani,

Thank you for notifying us of these problems.

Regarding the missing border - we fixed it right away. Here's the fix (in telerik.rtl.css):

.t-rtl .t-grid .t-last
{
    border-left-width: 0;
    border-right-width: 1px;
}

Regarding the second problem, try leaving one of the columns without width, and increasing the widths of the different columns. This is a common problem in editing, since the row in edit mode is detached from the main table -- so the column widths are more strictly matched. Setting .Scrollable(true) while you match them might help, too.

Your Telerik points have been updated for the bug report.

Best wishes,
Alex Gyoshev
the Telerik team

[dani]

Hi,
Thanks for the answer. Setting the grid Scrollable() fixed the cell shifting issue,

but it made the Grid's height twice as it was before, leaving a lot of empty space under the last row. (UPDATE: the grid has a fixed height... checking documentation how to change it).


Dani

[Alex Gyoshev]

Hello dani,

Try .t-grid, .t-grid table { table-layout: fixed }.

All the best,
Alex Gyoshev
the Telerik team