At the moment, RTL support for excel like filtering is not implemented. It displays the following issues
- menu position is wrong (tends to show up on the column to the left)
- controls alignment inside the menu is wrong (ltr)
You can find attached a sample and screenshots with the current behavior
I've managed to have workaround for most of the RTL problems.
For the header filter icon:
----------------------------
function graffiti_adjustRTL() = function() {
$(".RadGridRTL .rgOptions").each(function (index, value) {
$(this).parent().prepend(this);
});
}
<telerik:RadGrid.....>
<ClientSettings>
<ClientEvents OnGridCreated="graffiti_adjustRTL" />
</ClientSettings>
For the filter dialog use the following CSS style:
---------------------------------------------------
/* align the filter text to thee right */
.RadMenu_rtl .rgFilterListMenu .rlbItem, .RadMenu_rtl .rgFilterListMenu .rlbCheckAllItems {
text-align: right;
}
/* move filter icon to the left */
.RadMenu_rtl .rmGroup .rmImage, .RadMenu_rtl .rmGroup .rmLeftImage {
margin-left: 5px !important;
left: 0 !important;
right: inherit !important;
}
/* move the vertical grayer strip stop the left */
.RadMenu_rtl .rmGroup:before,
.RadMenu_rtl .rmMultiColumn:before,
.RadMenu_rtl .rmScrollWrap > .rmHorizontal:before,
.RadMenu_rtl .rmScrollWrap > .rmVertical:before {
border-width: 0 0 0 1px;
left: 0px !important;
right: auto !important;
}
/* move to the right the vertical border at the top */
.RadMenu_rtl .rmVertical > .rmSeparator {
margin-left: 32px !important;
margin-right: 0px !important;
}