This is a migrated thread and some comments may be shown as answers.

grid buttons RTL

1 Answer 10 Views
This is a migrated thread and some comments may be shown as answers.
tg
Top achievements
Rank 1
tg asked on 16 Oct 2018, 08:38 AM

Hi,

for this demo:

https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

How can I make the buttons ("add new record" + "save changes" + "cancel changes") move from left side to right side of the table, and the start position of the focus (when the table have many cells so it get scrolled to one side at page load) to be on right side of the table instead of left side?

 

I tried several things that I saw in forums, but it didn't help:

1. adding:  Dir="RTL"  to MasterTableView properties, and to all the <div> i have on the page (also added a div like this right before  the "telerik:RadAjaxLoadingPanel" and before the "telerik:RadListBox").

2. adding to the css file:

.RadMenu_Context_rtl {
    direction: rtl !important;
}

3. adding rtl to the body tag:

<body dir="rtl">

4. I also didnt use any other css or other stuff, only the demo itself, so I can isolate the problem.

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 18 Oct 2018, 03:56 PM
Hello,

When the Right-to-Left functionality is enabled, the buttons in the Command menu are actually reordered to be compatible with the RTL direction. The buttons are just positioned on the left side of the grid. You can check the following knowledge base article which explains how to shift the items to the right and put the Refresh button on the left. 

https://www.telerik.com/support/kb/aspnet-ajax/grid/details/how-do-i-position-the-items-in-the-command-menu-on-the-right-side-of-the-grid

Regarding the horizontal scroll position on the grid, you can use the following JavaScript functions to put it below the last cell (in the context of RTL below the first one).

pageLoad event handler:

function pageLoad(sender, args) {
    var grid = $find("<%=RadGrid1.ClientID%>");  // Get the jQeuery object of the Grid
    var master = grid.get_masterTableView();     // Get the master table
 
    var items = master.get_dataItems();          // Get all items
    var lastItemIndex = items.length - 1;        // Get the last item
    var rowElement = items[0].get_element();     // Get the first row (it does not matter really which row is going to be selected)
 
    var offset = $(rowElement).find('td')[lastItemIndex].offsetLeft;  // Get the offset of the specific cell (in this case, the last one)
 
    setScroll(grid, offset);
}

function:

function setScroll(grid, scrollLeft) {
    var dataDiv = $telerik.findElement(grid.get_element(), grid.get_id() + "_GridData");
    dataDiv.scrollLeft = scrollLeft;  // Set the scroll offset
}

Let me know if you require further assistance.

Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
tg
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or