Fix. Quickgrid PropertyColumn Align property doesn't work with Align.Right (#62707)

dariatiurina · web-flow · commit 292fe52757d7 · 2025-07-17T14:14:40.000+02:00
diff --git a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css
@@ -80,6 +80,23 @@ td.col-justify-end {
     text-align: right;
 }
 
+.col-justify-start .col-options {
+    left: 0;
+    right: unset;
+}
+
+td.col-justify-start {
+    text-align: left;
+}
+
+td.col-justify-right {
+    text-align: right;
+}
+
+td.col-justify-left {
+    text-align: left;
+}
+
 /* Unfortunately we can't use the :dir pseudoselector due to lack of browser support. Instead we have to rely on
     the developer setting <html dir="rtl"> to detect if we're in RTL mode. */
 html[dir=rtl] td.col-justify-end {
@@ -91,6 +108,10 @@ html[dir=rtl] .col-options {
     right: 0;
 }
 
+html[dir=rtl] td.col-justify-start {
+    text-align: right;
+}
+
 html[dir=rtl] .col-justify-end .col-options {
     right: unset;
     left: 0;
diff --git a/src/Components/test/E2ETest/Tests/QuickGridTest.cs b/src/Components/test/E2ETest/Tests/QuickGridTest.cs
@@ -8,6 +8,7 @@
 using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures;
 using Microsoft.AspNetCore.E2ETesting;
 using OpenQA.Selenium;
+using OpenQA.Selenium.Support.Extensions;
 using Xunit.Abstractions;
 
 namespace Microsoft.AspNetCore.Components.E2ETests.Tests;
@@ -149,6 +150,23 @@ public void RowClassApplied()
         }
     }
 
+    [Fact]
+    public void RowStyleApplied()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+        var birthDateColumn = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(4)"));
+        var ageColumn = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(5)"));
+
+        Assert.Contains("col-justify-center", birthDateColumn.GetAttribute("class"));
+        Assert.Contains("col-justify-right", ageColumn.GetAttribute("class"));
+        Assert.Equal("center", Browser.ExecuteJavaScript<string>(@"
+        const p = document.querySelector('tbody > tr:first-child > td:nth-child(4)');
+        return p ? getComputedStyle(p).textAlign : null;"));
+        Assert.Equal("right", Browser.ExecuteJavaScript<string>(@"
+        const p = document.querySelector('tbody > tr:first-child > td:nth-child(5)');
+        return p ? getComputedStyle(p).textAlign : null;"));
+    }
+    
     [Fact]
     public void CanOpenColumnOptions()
     {
diff --git a/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor b/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor
@@ -14,8 +14,8 @@
             </ColumnOptions>
         </PropertyColumn>
         <PropertyColumn Property="@(p => p.LastName)" Sortable="true" />
-        <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
-        <PropertyColumn Title="Age in years" Property="@(p => ComputeAge(p.BirthDate))" Sortable="true"/>
+        <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" Align="Align.Center" />
+        <PropertyColumn Title="Age in years" Property="@(p => ComputeAge(p.BirthDate))" Sortable="true" Align="Align.Right"/>
     </QuickGrid>
 </div>
 <Paginator State="@pagination" />
