Angular's UI-Grid in RTL Mode displays data in wrong order opposite to the order of columnDefs

Question

I have a css in _Layout.cshtml that assigns all ui controls to rtl direction, as below:

            * {
            direction: rtl;
        }

I'm using Angulars UI-Grid, where in RTL Localization the columnDefs appear in the right direction, however, the associated data appears in the opposite order to columnDefs as described in the attached image [Reversed-RTL][1]

Please advise, how can i change the order of data in RTL Localization to match the order of columnDefs. Note: In LTR Localization UI-Grid displays columnDefs and data in correct order.

Answer 1

Apparently, had to explicitly assign the dir="rtl" to the ui-grid inside the element, i think the *{direction=rtl;} in _Layout.cshtml was overriden bu ui-grid css.