diff --git a/blazor-toc.html b/blazor-toc.html index 57a92e691f..0ae4b600fa 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -5171,7 +5171,20 @@
  • Clipboard
  • Accessibility
  • Context Menu
    • -
  • Styling and Appearance
    • +
  • + Style and Appearance + +
  • Events
  • How To
    • - diff --git a/blazor/treegrid/custom-style.md b/blazor/treegrid/custom-style.md deleted file mode 100644 index e2638134c6..0000000000 --- a/blazor/treegrid/custom-style.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Styling and Appearance in Blazor TreeGrid Component | Syncfusion -description: Checkout and learn here all about Styling and Appearance in Syncfusion Blazor TreeGrid component and more. -platform: Blazor -control: Tree Grid -documentation: ug ---- - -# Styling and Appearance in Blazor TreeGrid Component - -To modify the Tree Grid appearance, override the default CSS of Tree Grid. Find the list of CSS classes and its corresponding section in Tree Grid. - -| Section |CSS class | Purpose of CSS class | -| ----- | ----- | ----- | -| **Root** | e-treegrid | This classes are in this root element div of the Tree Grid control. | -| **Header** | e-gridheader | This class is added in the root element of header element. In this class, thin line between header and content of the Tree Grid can be overridden. | -| | e-table | This class is added at the **table** of the Tree Grid header. This CSS class makes table width as 100 %. | -| | e-columnheader | This class is added at **tr** of the Tree Grid header. | -| | e-headercell | This class is added in **th** element of Tree Grid header. The background color of header and border color can be overridden. | -| | e-headercelldiv | This class is added in div which is present in **th** element in the header. Use the e-headercelldiv to override skeleton of header. | -| **Body** | e-gridcontent | This class is added at root of the body content. This is to override background color of the body. | -| | e-table | This class is added to table of the content. This CSS class makes table width as 100 %. | -| | e-altrow | This class is added to the alternate rows of Tree Grid. This is to override alternate row color of the Tree Grid. | -| | e-rowcell | This class is added to all cells in the Tree Grid. This is to override cells appearance and styling. | -| | e-groupcaption | This class is added to the **td** of group caption which is to change the background color of caption cell. | -| | e-selectionbackground | This class is added to rowcell's of the Tree Grid. This is override selection. | -| | e-hover | This class adds to row of Tree Grid, while hovering the Tree Grid rows. | -| **Pager** | e-pager | This class is added to root element of the pager. This is to change appearance of the background color and color of font. | -| | e-pagercontainer | This class is added to numeric items of the pager. | -| | e-parentmsgbar | This class is added to pager info of the pager. | -| **Summary** | e-gridfooter | This class is added to root of the summary div. | -| | e-summaryrow | This class is added to rows of Tree Grid summary. | -| | e-summarycell | This class is added to cells of summary row. This to override background color of summary. | \ No newline at end of file diff --git a/blazor/treegrid/images/style-and-appearance/aggregate-cell-element.webp b/blazor/treegrid/images/style-and-appearance/aggregate-cell-element.webp new file mode 100644 index 0000000000..5eef6914f4 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/aggregate-cell-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/aggregate-root-element.webp b/blazor/treegrid/images/style-and-appearance/aggregate-root-element.webp new file mode 100644 index 0000000000..1edd54d106 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/aggregate-root-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/cell-selection.webp b/blazor/treegrid/images/style-and-appearance/cell-selection.webp new file mode 100644 index 0000000000..cf0fecb368 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/cell-selection.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/collapse-custom-icon.webp b/blazor/treegrid/images/style-and-appearance/collapse-custom-icon.webp new file mode 100644 index 0000000000..4b65bf3628 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/collapse-custom-icon.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/commandbutton-1.webp b/blazor/treegrid/images/style-and-appearance/commandbutton-1.webp new file mode 100644 index 0000000000..4dbf2109cd Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/commandbutton-1.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/commandbutton-2.webp b/blazor/treegrid/images/style-and-appearance/commandbutton-2.webp new file mode 100644 index 0000000000..d6fe8ee03f Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/commandbutton-2.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/edit-dialog-header-element.webp b/blazor/treegrid/images/style-and-appearance/edit-dialog-header-element.webp new file mode 100644 index 0000000000..5503a97599 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/edit-dialog-header-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/edited-added-row-element.webp b/blazor/treegrid/images/style-and-appearance/edited-added-row-element.webp new file mode 100644 index 0000000000..aa1b2d0dd4 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/edited-added-row-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/edited-row-input-element.webp b/blazor/treegrid/images/style-and-appearance/edited-row-input-element.webp new file mode 100644 index 0000000000..c787e9b984 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/edited-row-input-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/excel-filter-dialog-number-filters-element.webp b/blazor/treegrid/images/style-and-appearance/excel-filter-dialog-number-filters-element.webp new file mode 100644 index 0000000000..4d219cc945 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/excel-filter-dialog-number-filters-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/expand-collapse-icon.webp b/blazor/treegrid/images/style-and-appearance/expand-collapse-icon.webp new file mode 100644 index 0000000000..0974aefa3d Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/expand-collapse-icon.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/expand-custom-icon.webp b/blazor/treegrid/images/style-and-appearance/expand-custom-icon.webp new file mode 100644 index 0000000000..26610eb078 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/expand-custom-icon.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/filter-bar-cell-element.webp b/blazor/treegrid/images/style-and-appearance/filter-bar-cell-element.webp new file mode 100644 index 0000000000..c4ff29da59 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-bar-cell-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/filter-bar-input-clear-icon.webp b/blazor/treegrid/images/style-and-appearance/filter-bar-input-clear-icon.webp new file mode 100644 index 0000000000..e1f0d5bb03 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-bar-input-clear-icon.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/filter-bar-input-element-focus.webp b/blazor/treegrid/images/style-and-appearance/filter-bar-input-element-focus.webp new file mode 100644 index 0000000000..0f83aaba65 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-bar-input-element-focus.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/filter-bar-input-element.webp b/blazor/treegrid/images/style-and-appearance/filter-bar-input-element.webp new file mode 100644 index 0000000000..4e5cedb2d4 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-bar-input-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/filter-dialog-button-element.webp b/blazor/treegrid/images/style-and-appearance/filter-dialog-button-element.webp new file mode 100644 index 0000000000..098f29f30e Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-dialog-button-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/filter-dialog-content.webp b/blazor/treegrid/images/style-and-appearance/filter-dialog-content.webp new file mode 100644 index 0000000000..55ee23bc59 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-dialog-content.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/filter-dialog-footer.webp b/blazor/treegrid/images/style-and-appearance/filter-dialog-footer.webp new file mode 100644 index 0000000000..afa3a10b66 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-dialog-footer.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/filter-dialog-input-element.webp b/blazor/treegrid/images/style-and-appearance/filter-dialog-input-element.webp new file mode 100644 index 0000000000..8361da8a59 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-dialog-input-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/grid-filtering-icon.webp b/blazor/treegrid/images/style-and-appearance/grid-filtering-icon.webp new file mode 100644 index 0000000000..6dcba4a64a Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-filtering-icon.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/grid-header-cell-div-element.webp b/blazor/treegrid/images/style-and-appearance/grid-header-cell-div-element.webp new file mode 100644 index 0000000000..cfdb46a135 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-header-cell-div-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/grid-header-cell.webp b/blazor/treegrid/images/style-and-appearance/grid-header-cell.webp new file mode 100644 index 0000000000..769a70159a Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-header-cell.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/grid-header.webp b/blazor/treegrid/images/style-and-appearance/grid-header.webp new file mode 100644 index 0000000000..6d3093d3a0 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-header.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/grid-line.webp b/blazor/treegrid/images/style-and-appearance/grid-line.webp new file mode 100644 index 0000000000..543d1aa5a6 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-line.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/grid-pager-current-page-numeric-element.webp b/blazor/treegrid/images/style-and-appearance/grid-pager-current-page-numeric-element.webp new file mode 100644 index 0000000000..71a3834ac6 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-pager-current-page-numeric-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/header-background.webp b/blazor/treegrid/images/style-and-appearance/header-background.webp new file mode 100644 index 0000000000..cfee2368ea Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/header-background.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/pager-page-numeric-link-elements.webp b/blazor/treegrid/images/style-and-appearance/pager-page-numeric-link-elements.webp new file mode 100644 index 0000000000..ceb4758f37 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/pager-page-numeric-link-elements.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/row-selection.webp b/blazor/treegrid/images/style-and-appearance/row-selection.webp new file mode 100644 index 0000000000..f69d27ade6 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/row-selection.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/sort1.webp b/blazor/treegrid/images/style-and-appearance/sort1.webp new file mode 100644 index 0000000000..e74ad7fdb9 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/sort1.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/sort2.webp b/blazor/treegrid/images/style-and-appearance/sort2.webp new file mode 100644 index 0000000000..722ae226b9 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/sort2.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/style-font-family.webp b/blazor/treegrid/images/style-and-appearance/style-font-family.webp new file mode 100644 index 0000000000..5bfabb668d Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/style-font-family.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/style-frozen.webp b/blazor/treegrid/images/style-and-appearance/style-frozen.webp new file mode 100644 index 0000000000..adf53a2e9a Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/style-frozen.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/toolbar1.webp b/blazor/treegrid/images/style-and-appearance/toolbar1.webp new file mode 100644 index 0000000000..a86085d091 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/toolbar1.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/toolbar2.webp b/blazor/treegrid/images/style-and-appearance/toolbar2.webp new file mode 100644 index 0000000000..827e28ccc2 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/toolbar2.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/treegrid-pager-container-element.webp b/blazor/treegrid/images/style-and-appearance/treegrid-pager-container-element.webp new file mode 100644 index 0000000000..6e30471127 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/treegrid-pager-container-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/treegrid-pager-navigation-element.webp b/blazor/treegrid/images/style-and-appearance/treegrid-pager-navigation-element.webp new file mode 100644 index 0000000000..0193eeeea3 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/treegrid-pager-navigation-element.webp differ diff --git a/blazor/treegrid/images/style-and-appearance/treegrid-pager-root-element.webp b/blazor/treegrid/images/style-and-appearance/treegrid-pager-root-element.webp new file mode 100644 index 0000000000..0f82941344 Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/treegrid-pager-root-element.webp differ diff --git a/blazor/treegrid/style-and-appearance/aggregate.md b/blazor/treegrid/style-and-appearance/aggregate.md new file mode 100644 index 0000000000..5641f99840 --- /dev/null +++ b/blazor/treegrid/style-and-appearance/aggregate.md @@ -0,0 +1,219 @@ +--- +layout: post +title: Customize aggregates in Blazor TreeGrid | Syncfusion +description: Learn how to customize aggregate rows in the Syncfusion Blazor TreeGrid using CSS, including footer containers and summary cells. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Aggregate customization in Syncfusion Blazor TreeGrid + +Aggregates are displayed as summary rows in the TreeGrid footer, providing a consolidated view of totals, averages, or counts. These rows can be styled using CSS to match the layout and design of the TreeGrid. Styling options are available for: + +- **Aggregate root container:** The outer wrapper of the footer row. +- **Aggregate summary row and cells:** The row that shows summary values, and the cells that display each result. + +## Customize the aggregate root element +The **.e-gridfooter** class styles the root container of the aggregate footer row. Use CSS to adjust its appearance: + +```css +.e-treegrid .e-gridfooter { + font-family: cursive; +} +``` + +Properties like **font-family**, **font-size**, and **padding** can be changed to fit the TreeGrid layout design. + +![Aggregate footer root with custom font](../images/style-and-appearance/aggregate-root-element.webp) + +## Customize the aggregate cell elements + +The **.e-summaryrow** and **.e-summarycell** classes define the appearance of the summary row and its individual cells in the Blazor TreeGrid. Apply CSS to modify their look: + +```css +.e-treegrid .e-summaryrow .e-summarycell { + background-color: #deecf9; +} +``` + +Properties such as **background-color**, **color**, and **text-align** can be adjusted to improve clarity and interaction. + +![Aggregate summary cell with custom background color](../images/style-and-appearance/aggregate-cell-element.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + + + + @{ + var sumvalue = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext); +
    + Sum: @sumvalue.Sum +
    + } +     +     +     +     + + + + + @{ + var sumvalue = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext); +
    + Max: @sumvalue.Max +
    + } +     +     +     +     +     +     + + + +@code { + private List TreeGridData { get; set; } = new List(); + private List PageSizes { get; set; } = new List(); + protected override void OnInitialized() + { + TreeGridData = ShipmentData.GetData(); + PageSizes = new List() { "2", "4", "5", "10", "15", "20", "All" }; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="ShipmentData.cs" %} + +public class ShipmentData +{ + public int? ID { get; set; } + public int? ShipID { get; set; } + public string? Name { get; set; } + public int? Units { get; set; } + public string? Category { get; set; } + public int? UnitPrice { get; set; } + public int? Price { get; set; } + public int? TotalPrice { get; set; } // Added for total price calculation (sum for parents, individual for items) + public string? ShipmentCategory { get; set; } + public DateTime? ShippedDate { get; set; } = null; + public DateTime? OrderDate { get; set; } = null; + public string? OrderReached { get; set; } = null; + public int? ParentID { get; set; } + private static void CalculateTotalPrices(List data) + { + // For items (non-parents), TotalPrice = Price + // For parents, TotalPrice = sum of children's TotalPrice + var parents = data.Where(d => d.ParentID == null).ToList(); + foreach (var parent in parents) + { + var children = data.Where(d => d.ParentID == parent.ID).ToList(); + parent.TotalPrice = children.Sum(c => c.Price ?? 0); + // Recursively set for children if nested, but here it's flat tree + } + // Set for items + foreach (var item in data.Where(d => d.ParentID != null)) + { + item.TotalPrice = item.Price; + } + } + public static List GetData() + { + var data = new List(capacity: 150); + var rnd = new Random(42); // deterministic + var baseOrderDate = new DateTime(2025, 1, 1); + // pools for categories/items - standardized to Title Case + var categories = new[] + { + ("Seafood", new[] { "Mackerel", "Herrings", "Tilapias", "White Shrimp", "Yellowfin Tuna" }), + ("Dairy", new[] { "Fresh Cheese", "Blue Veined Cheese", "Butter", "Milk", "Yogurt" }), + ("Edible", new[] { "Preserved Olives", "Sweet corn", "Pickles", "Tomato Puree", "Olive Oil" }), + ("Crystals", new[] { "Lead glassware", "Pharmaceutical glass", "Glass beads", "Crystal vials", "Borosilicate glass" }), + ("Fresh Vegetables", new[] { "Broccoli", "Spinach", "Carrots", "Lettuce", "Cabbage" }), + ("Leafy Greens", new[] { "Kale", "Arugula", "Chard", "Collards", "Mustard Greens" }), + ("Root Vegetables", new[] { "Beets", "Radish", "Parsnip", "Turnip", "Rutabaga" }), + ("Paper", new[] { "Printer Paper", "Photo Paper", "Sticky Notes", "Card Stock", "Plotter Rolls" }), + ("Consumables", new[] { "Ink Cartridges", "Toner", "Markers", "Glue Sticks", "Tape Rolls" }), + ("Tools", new[] { "Staplers", "Hole Punch", "Cutters", "Rulers", "Scissors" }), + ("Stationery", new[] { "Notebooks", "Pens", "Pencils", "Folders", "Envelopes" }) + }; + int id = 0; + int shipSeed = 4500; + for (int p = 1; p <= 40; p++) + { + int parentId = id++; + data.Add(new ShipmentData + { + ID = parentId, + Name = $"Order {p}", + ParentID = null + }); + for (int c = 0; c < 4; c++) + { + // pick a category and item name + var (cat, items) = categories[(p + c) % categories.Length]; + var itemName = items[(p * 3 + c) % items.Length]; + // numbers + int units = 20 + rnd.Next(11); // 20..30 + int unitPrice = 5 + rnd.Next(20); // 5..24 + int price = units * unitPrice; + // dates + var orderDate = baseOrderDate.AddDays(p * 7 + c * 3); + var shipLag = 3 + rnd.Next(10); // 3..12 days + var shippedDate = orderDate.AddDays(shipLag); + // reached? + var reached = shippedDate >= orderDate.AddDays(7) && rnd.Next(100) > 30 ? "Yes" : "No"; + data.Add(new ShipmentData + { + ID = id, + ShipID = shipSeed + id, + Name = itemName, + Category = cat, + Units = units, + UnitPrice = unitPrice, + Price = price, + OrderDate = orderDate, + ShippedDate = shippedDate, + ShipmentCategory = cat, + OrderReached = reached, + ParentID = parentId + }); + id++; + } + } + CalculateTotalPrices(data); + return data; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrxtJrVJUhwQJZe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/treegrid/style-and-appearance/editing.md b/blazor/treegrid/style-and-appearance/editing.md new file mode 100644 index 0000000000..c55a0cb61e --- /dev/null +++ b/blazor/treegrid/style-and-appearance/editing.md @@ -0,0 +1,299 @@ +--- +layout: post +title: Customize editing in Blazor TreeGrid | Syncfusion +description: Learn how to style and customize edited and added rows, input fields, the edit dialog header, and command buttons in the Syncfusion Blazor TreeGrid using CSS. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Editing customization in Syncfusion Blazor TreeGrid + +The appearance of editing elements in the Syncfusion® Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the editing interface: + +- **Edited and newly added rows:** Highlights rows that are being modified or newly inserted. +- **Edit form input fields:** Displays text boxes used to enter or update values during editing. +- **Edit dialog header:** Shows the title or context of the current editing operation. +- **Command column buttons:** Displays action buttons such as Edit, Delete, Update, and Cancel. + +## Customize edited and added row elements + +The **.e-editedrow** and **.e-addedrow** classes style edited and newly added rows. Apply CSS to make these rows stand out: + +```css +.e-treegrid .e-editedrow table, .e-treegrid .e-addedrow table { + background-color: #62b2eb; +} +``` + +Adjust properties such as **background-color** or **border** styles to highlight rows that are in edit mode. + +![Edited and added rows](../images/style-and-appearance/edited-added-row-element.webp) + +## Customize edited row input elements + +The **.e-treegridform** and **.e-input** classes style inputs inside the inline edit form in the Blazor TreeGrid. Use CSS to adjust their appearance: + +```css + +.e-treegrid .e-rowcell .e-input-group .e-input { + font-family: cursive; + color:rgb(214, 33, 123) +} + +``` + +Modify properties such as **font-family**, **color**, or **padding** to improve readability. + +![Edited row inputs with custom font and text color](../images/style-and-appearance/edited-row-input-element.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } + protected override void OnInitialized() + { + TreeGridData = TreeData.GetSelfDataSource().ToList(); + } +} + +{% highlight c# tabtitle="TreeData.cs" %} + +namespace TreeGridComponent.Data +{ + public class TreeData + { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public int? Duration { get; set; } + public int? Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + internal static List GetSelfDataSource() + { + List BusinessObjectCollection = new List(); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 }); + return BusinessObjectCollection; + } + } +} + +{% highlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrxDphpWvpEiDsX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Customize the edit dialog header + +The **.e-edit-dialog** and **.e-dlg-header-content** classes style the dialog header when dialog editing is enabled. Apply CSS to differentiate the header: + +```css + +.e-edit-dialog .e-dlg-header-content { + background-color: #deecf9; +} + +``` + +Change properties such as **background-color** to visually separate the header from the rest of the dialog content. + +![Edit dialog header with custom background color](../images/style-and-appearance/edit-dialog-header-element.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } + + protected override void OnInitialized() + { + TreeGridData = TreeData.GetSelfDataSource().ToList(); + } +} + +{% highlight c# tabtitle="TreeData.cs" %} + +namespace TreeGridComponent.Data +{ + public class TreeData + { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public int? Duration { get; set; } + public int? Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + internal static List GetSelfDataSource() + { + List BusinessObjectCollection = new List(); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 }); + return BusinessObjectCollection; + } + } +} + +{% highlight %} +{% endtabs %} + +## Customize command column buttons + +The **.e-edit**, **.e-delete**, **.e-update**, and **.e-cancel-icon** classes style the command column buttons in the Blazor TreeGrid. Use CSS to adjust their appearance: + +```css + +.e-treegrid .e-unboundcelldiv .e-delete::before, +.e-treegrid .e-unboundcelldiv .e-cancel-icon::before { + color: #f51717; +} + +.e-treegrid .e-unboundcelldiv .e-edit::before, +.e-treegrid .e-unboundcelldiv .e-update::before { + color: #077005; +} + +``` + +Style properties like **color**, **font-size**, and **font-weight** can be adjusted to differentiate action icons and enhance visibility during interaction. + +![Command buttons with custom delete and cancel icon colors](../images/style-and-appearance/commandbutton-1.webp) +![Command buttons with custom edit and save icon colors](../images/style-and-appearance/commandbutton-2.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid + + + + + + + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } + protected override void OnInitialized() + { + TreeGridData = TreeData.GetSelfDataSource().ToList(); + } +} + +{% highlight c# tabtitle="TreeData.cs" %} + +namespace TreeGridComponent.Data +{ + public class TreeData + { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public int? Duration { get; set; } + public int? Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + internal static List GetSelfDataSource() + { + List BusinessObjectCollection = new List(); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 }); + return BusinessObjectCollection; + } + } +} + +{% highlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrnjJrTBZixrfzY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/treegrid/style-and-appearance/expand-collapse.md b/blazor/treegrid/style-and-appearance/expand-collapse.md new file mode 100644 index 0000000000..e31d1dbe9f --- /dev/null +++ b/blazor/treegrid/style-and-appearance/expand-collapse.md @@ -0,0 +1,142 @@ +--- +layout: post +title: Expand and collapse icon styling in Blazor TreeGrid | Syncfusion +description: Learn how to customize the expand and collapse icons in the Syncfusion Blazor TreeGrid using CSS, including changing icon appearance, colors, and sizes. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Expand and collapse icon customization in Syncfusion Blazor TreeGrid + +The appearance of expand and collapse icons in the Syncfusion® Blazor TreeGrid can be customized using CSS. Styling options are available for different aspects of the expand/collapse interface: + +- **Expand/collapse icon element:** The icon used to indicate expand or collapse state. +- **Icon size and color:** Properties to modify icon dimensions and visual appearance. + +## Customize the expand/collapse icon element + +The **.e-icons** class combined with **.e-treegridexpand** or **.e-treegridcollapse** class styles the expand and collapse icons in the Blazor TreeGrid. Apply CSS to customize the icon appearance: + +```css +.e-treegrid .e-icons.e-treegridexpand::before, +.e-treegrid .e-icons.e-treegridcollapse::before { + color: #1ea8bd; + font-size: 18px; +} +``` + +Properties such as **color**, **font-size**, **width**, and **height** can be adjusted to match the TreeGrid design. Ensure that custom icons remain clearly visible and maintain adequate contrast for accessibility. + +![TreeGrid expand/collapse icon](../images/style-and-appearance/expand-collapse-icon.webp) + +## Change the expand and collapse icon + +The expand and collapse icons can be customized by changing the icon glyph using the `::before` pseudo-element content property: + +```css +.e-treegrid .e-icons.e-treegridexpand::before { + content: '\e7c9'; +} + +.e-treegrid .e-icons.e-treegridcollapse::before { + content: '\e80f'; +} +``` + +Modify the `content` value to use different glyphs from the icon font. Confirm that the appropriate icon font family is available so glyphs render correctly. Refer to the [Syncfusion icons](https://blazor.syncfusion.com/documentation/appearance/icons) documentation to choose glyphs for your theme. + +![TreeGrid custom expand icons](../images/style-and-appearance/expand-custom-icon.webp) + +![TreeGrid custom collapse icons](../images/style-and-appearance/collapse-custom-icon.webp) + +## Customize the expand/collapse icon on hover + +Apply hover styles to expand/collapse icons for better user interaction: + +```css +.e-treegrid .e-icons.e-treegridexpand:hover::before, +.e-treegrid .e-icons.e-treegridcollapse:hover::before { + color: #ff6b6b; + font-weight: bold; +} +``` + +This allows users to see visual feedback when interacting with expand/collapse controls. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid; + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } + protected override void OnInitialized() + { + TreeGridData = TreeData.GetSelfDataSource().ToList(); + } + public class TreeData + { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public int? Duration { get; set; } + public int? Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + internal static List GetSelfDataSource() + { + List BusinessObjectCollection = new List(); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 }); + return BusinessObjectCollection; + } + } +} + +{% endhighlight %} + +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVnDzAtBLxPJJYP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} diff --git a/blazor/treegrid/style-and-appearance/filtering.md b/blazor/treegrid/style-and-appearance/filtering.md new file mode 100644 index 0000000000..0c5518b4f8 --- /dev/null +++ b/blazor/treegrid/style-and-appearance/filtering.md @@ -0,0 +1,347 @@ +--- +layout: post +title: Customize filtering in Blazor TreeGrid | Syncfusion +description: Learn how to style and customize the Syncfusion Blazor TreeGrid filter UI using CSS—filter bar, dialog, icons, buttons, and menus. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Filtering customization in Syncfusion Blazor TreeGrid + +The appearance of filtering elements in the Syncfusion® Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the filtering interface: + +- **Filter bar cell and input elements:** Used to enter filter values directly in the header row. +- **Input focus styles:** Visual highlight applied when the filter input field is focused. +- **Clear and filter icons:** Icons for clearing filter values and indicating active filters in column headers. +- **Filter dialog content and footer:** Sections of the filter popup used for entering filter criteria and confirming actions. +- **Input fields and buttons within the filter dialog:** Controls used to specify filter values and apply or cancel filtering. +- **Excel-style number filter visuals:** Menu-style interface for selecting numeric filter conditions in Excel-like filtering mode. + +## Customize the filter bar cell element + +The **.e-filterbarcell** class styles the filter bar cells in the header row. Use CSS to adjust its appearance: + +```css +.e-treegrid .e-filterbarcell { + background-color: #045fb4; +} +``` + +Properties like **background-color**, **padding**, and **border** can be changed to visually distinguish the filter row from header cells. + +![Filter bar cell with custom background](../images/style-and-appearance/filter-bar-cell-element.webp) + +## Customize the filter bar input element + +The **.e-input** class inside **.e-filterbarcell** styles the input field in the filter bar. Apply CSS to modify its look: + +```css +.e-treegrid .e-filterbarcell .e-input-group input.e-input { + font-family: cursive; +} +``` + +Adjust properties such as **font-family**, **font-size**, and **border** can be adjusted to improve readability and match the TreeGrid design. + +![Filter bar input with custom font](../images/style-and-appearance/filter-bar-input-element.webp) + +## Customize the input focus + +The **.e-input-focus** class styles the filter bar input group when focused. Apply CSS to change its appearance: + +```css +.e-treegrid .e-filterbarcell .e-input-group.e-input-focus { + background-color: #deecf9; +} +``` + +Change properties like **background-color** and **border** to enhance focus visibility and support keyboard navigation. + +![Filter bar input focus](../images/style-and-appearance/filter-bar-input-element-focus.webp) + +## Customize the filter bar input clear icon + +The **.e-clear-icon::before** class defines the clear icon in the filter bar input. Apply CSS to change its appearance: + +```css +.e-treegrid .e-filterbarcell .e-input-group .e-clear-icon::before { + content: '\e72c'; +} +``` + +The `content` property can be updated to use a different glyph from the icon set. + +![Filter bar input with customized clear icon](../images/style-and-appearance/filter-bar-input-clear-icon.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } + + protected override void OnInitialized() + { + TreeGridData = TreeData.GetSelfDataSource().ToList(); + } +} + +{% highlight c# tabtitle="TreeData.cs" %} + +namespace TreeGridComponent.Data +{ + public class TreeData + { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public int? Duration { get; set; } + public int? Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + internal static List GetSelfDataSource() + { + List BusinessObjectCollection = new List(); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 }); + return BusinessObjectCollection; + } + } +} + +{% highlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrnDzrfVMyBtkVY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Customize the filtering icon in the header + +The **.e-icon-filter::before** class styles the filter icon in column headers. Apply CSS to modify its look: + +```css +.e-treegrid .e-icon-filter::before { + content: '\e81e'; +} +``` + +Update the `content` value to match the desired icon glyph. + +![Header filter icon](../images/style-and-appearance/grid-filtering-icon.webp) + +## Customize the filter dialog content + +The **.e-filter-popup .e-dlg-content** class styles the content area of the filter dialog. Apply CSS to change its appearance: + +```css +.e-treegrid .e-filter-popup .e-dlg-content { + background-color: #deecf9; +} +``` + +Modify properties such as **background-color**, **padding**, and **border** to match the application theme. + +![Filter dialog content](../images/style-and-appearance/filter-dialog-content.webp) + +## Customize the filter dialog footer + +The **.e-filter-popup .e-footer-content** class styles the footer section of the filter dialog. Apply CSS to adjust its appearance: + +```css +.e-treegrid .e-filter-popup .e-footer-content { + background-color: #deecf9; +} +``` + +Properties like **background-color**, **text-align**, and **border** can be changed to align with the layout design. + +![Filter dialog footer](../images/style-and-appearance/filter-dialog-footer.webp) + +## Customize the filter dialog input field + +The **.e-input** class inside **.e-filter-popup** targets input fields in the filter dialog. Use CSS to adjust its appearance: + +```css +.e-treegrid .e-filter-popup .e-input-group input.e-input { + font-family: cursive; +} +``` + +Adjust properties such as **font-family**, **color**, and **border** to improve clarity and consistency. + +![Filter dialog input](../images/style-and-appearance/filter-dialog-input-element.webp) + +## Customize the filter dialog button element + +The **.e-filter-popup .e-btn** class styles buttons inside the filter dialog. Apply CSS to modify their appearance: + +```css +.e-treegrid .e-filter-popup .e-btn { + font-family: cursive; +} +``` + +Change properties like **font-family**, **background-color**, and **border** to match the design. + +![Filter dialog buttons](../images/style-and-appearance/filter-dialog-button-element.webp) + +## Customize the Excel-style filter menu + +The **.e-contextmenu-container ul** class inside **.e-filter-popup** styles the filter list in the Excel-style filter dialog. Apply CSS to change its appearance: + +```css +.e-treegrid .e-filter-popup .e-contextmenu-container ul { + background-color: #deecf9; +} +``` + +Properties such as **background-color**, **color**, and **text-align** can be adjusted to match the required design. + +![Excel-style filter menu](../images/style-and-appearance/excel-filter-dialog-number-filters-element.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid + + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } + + protected override void OnInitialized() + { + TreeGridData = TreeData.GetSelfDataSource().ToList(); + } +} + +{% highlight c# tabtitle="TreeData.cs" %} + +namespace TreeGridComponent.Data +{ + public class TreeData + { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public int? Duration { get; set; } + public int? Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + internal static List GetSelfDataSource() + { + List BusinessObjectCollection = new List(); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 }); + BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 }); + return BusinessObjectCollection; + } + } +} + +{% highlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLntfVJBBQMQeiU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/treegrid/style-and-appearance/header.md b/blazor/treegrid/style-and-appearance/header.md new file mode 100644 index 0000000000..03e9fcf98d --- /dev/null +++ b/blazor/treegrid/style-and-appearance/header.md @@ -0,0 +1,191 @@ +--- +layout: post +title: Header styling and visibility in Blazor TreeGrid | Syncfusion +description: Learn how to style and hide the Syncfusion Blazor TreeGrid header using CSS—customize header bar, cells, text, with CSS isolation tips. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Header customization in Syncfusion Blazor TreeGrid + +The appearance of header elements in the Syncfusion® Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the header interface: + +- **Header container**: The outer wrapper that holds all column headers. +- **Header cells**: Individual containers for each column title and associated icons. +- **Header text container**: The inner element that holds the header text content. + +## Customize the Blazor TreeGrid header + +The **.e-gridheader** class styles the header container in the Blazor TreeGrid. Use CSS to adjust its appearance: + +```css +.e-treegrid .e-gridheader { + border: 2px solid green; +} +``` + +Style Properties like **border**, **padding**, and **background-color** can be changed to fit the TreeGrid layout design. + +![TreeGrid header](../images/style-and-appearance/grid-header.webp) + +## Customize the Blazor TreeGrid header cell + +The **.e-headercell** class styles individual header cells in the Blazor TreeGrid. Apply CSS to modify its look: + +```css +.e-treegrid .e-headercell { + color: #ffffff; + background-color: #1ea8bd; +} +``` + +Properties such as **color**, **background-color**, **font**, and alignment can be adjusted to align with the TreeGrid design. + +![TreeGrid header cell](../images/style-and-appearance/grid-header-cell.webp) + +## Customize the Blazor TreeGrid header cell div element + +The **.e-headercelldiv** class styles the text container inside each header cell. Apply CSS to change its appearance: + +```css +.e-treegrid .e-headercelldiv { + font-size: 15px; + font-weight: bold; + color: darkblue; +} +``` + +Change properties like **font-size**, **font-weight**, and **color** to highlight the header text and improve clarity. + +![Grid header cell div element](../images/style-and-appearance/grid-header-cell-div-element.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid; + + + + + + + + + + + + +@code { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + public List TreeData = new List(); + + protected override void OnInitialized() + { + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrxjTVrfnMFtzVT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Hide the Blazor TreeGrid header + +The **.e-gridheader .e-columnheader** class combination targets the column header row in the Blazor TreeGrid. Use CSS to hide the header: + +```css +.e-treegrid .e-gridheader .e-columnheader { + display: none; +} +``` + +To hide the header for a specific TreeGrid only, apply the style using the grid's ID: + +```css +#TreeGrid.e-treegrid .e-gridheader .e-columnheader { + display: none; +} +``` + +> Hiding headers also removes visual elements such as sorting arrows, filter icons, and column menu buttons. This may affect accessibility. If headers are hidden, ensure alternative labels are provided using attributes like `aria-label` or `aria-labelledby`. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid; + + + + + + + + + + + + +@code { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + public List TreeData = new List(); + + protected override void OnInitialized() + { + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXroMtixVyHRNvjg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/treegrid/style-and-appearance/paging.md b/blazor/treegrid/style-and-appearance/paging.md new file mode 100644 index 0000000000..1bf4887da9 --- /dev/null +++ b/blazor/treegrid/style-and-appearance/paging.md @@ -0,0 +1,250 @@ +--- +layout: post +title: Pager styling and customization in Blazor TreeGrid | Syncfusion +description: Learn how to style the Syncfusion Blazor TreeGrid pager using CSS—customize container, buttons, numeric items, and page indicator. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Paging customization in Syncfusion Blazor TreeGrid + +The appearance of paging elements in the Syncfusion® Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the pager interface: + +- **Root container:** The outermost wrapper that holds all pager content. +- **Pager container:** The inner layout that positions the controls. +- **Navigation buttons:** Commands for first, previous, next, and last page navigation. +- **Numeric page indicators:** Indicators that jump directly to specific pages. +- **Current page indicator:** The highlight that marks the active numeric page button. + +## Customize the pager root element + +The **.e-gridpager** class styles the pager root element in the Blazor TreeGrid. Use CSS to adjust its appearance: + +```css +.e-treegrid .e-gridpager { + font-family: cursive; + background-color: #deecf9; +} +``` + +Properties like **font-family**, **background-color**, and spacing-related styles can be changed to fit the TreeGrid layout design. + +![Pager root element](../images/style-and-appearance/treegrid-pager-root-element.webp) + +## Customize the pager container element + +The **.e-pagercontainer** class styles the pager container in the Syncfusion® Blazor TreeGrid. Apply CSS to modify its look: + +```css +.e-treegrid .e-pagercontainer { + border: 2px solid #00b5ff; + font-family: cursive; +} +``` + +Properties such as **font-family**, **background-color**, and spacing-related styles can be adjusted to align with the TreeGrid design. + +![Pager container element](../images/style-and-appearance/treegrid-pager-container-element.webp) + +## Customize the pager navigation elements + +The **.e-prevpagedisabled**, **.e-prevpage**, **.e-nextpage**, **.e-nextpagedisabled**, **.e-lastpagedisabled**, **.e-lastpage**, **.e-firstpage**, and **.e-firstpagedisabled** classes define the appearance of the pager navigation buttons in the Blazor TreeGrid. Apply CSS to customize their styling: + +```css +.e-treegrid .e-gridpager .e-prevpagedisabled, +.e-treegrid .e-gridpager .e-prevpage, +.e-treegrid .e-gridpager .e-nextpage, +.e-treegrid .e-gridpager .e-nextpagedisabled, +.e-treegrid .e-gridpager .e-lastpagedisabled, +.e-treegrid .e-gridpager .e-lastpage, +.e-treegrid .e-gridpager .e-firstpage, +.e-treegrid .e-gridpager .e-firstpagedisabled { + background-color: #deecf9; +} +``` + +Adjust properties like **background-color** to match the design, while keeping clear focus styles for accessibility. + +![Pager navigation elements](../images/style-and-appearance/treegrid-pager-navigation-element.webp) + +## Customize the pager numeric button elements + +The **.e-numericitem** class styles the numeric page buttons in the Blazor TreeGrid. Apply CSS to change their appearance: + +```css +.e-treegrid .e-gridpager .e-numericitem { + background-color: #5290cb; + color: #ffffff; + cursor: pointer; +} + +.e-treegrid .e-gridpager .e-numericitem:hover { + background-color: white; + color: #007bff; +} +``` + +Modify properties such as **background-color**, **color**, and **hover** effects to improve clarity and interaction. + +![Pager numeric button elements](../images/style-and-appearance/pager-page-numeric-link-elements.webp) + +## Customize the current page numeric element + +The **.e-currentitem** class styles the current page indicator in the Blazor TreeGrid pager. Use CSS to adjust it: + +```css +.e-treegrid .e-gridpager .e-currentitem { + background-color: #0078d7; + color: #fff; +} +``` + +Change properties like **background-color** and **color** to highlight the active page. + +![Current page numeric element](../images/style-and-appearance/grid-pager-current-page-numeric-element.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } = new List(); + private List PageSizes { get; set; } = new List(); + protected override void OnInitialized() + { + TreeGridData = ShipmentData.GetData(); + PageSizes = new List() { "2", "4", "5", "10", "15", "20", "All" }; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="ShipmentData.cs" %} + +public class ShipmentData +{ + public int? ID { get; set; } + public int? ShipID { get; set; } + public string? Name { get; set; } + public int? Units { get; set; } + public string? Category { get; set; } + public int? UnitPrice { get; set; } + public int? Price { get; set; } + public int? TotalPrice { get; set; } // Added for total price calculation (sum for parents, individual for items) + public string? ShipmentCategory { get; set; } + public DateTime? ShippedDate { get; set; } = null; + public DateTime? OrderDate { get; set; } = null; + public string? OrderReached { get; set; } = null; + public int? ParentID { get; set; } + private static void CalculateTotalPrices(List data) + { + // For items (non-parents), TotalPrice = Price + // For parents, TotalPrice = sum of children's TotalPrice + var parents = data.Where(d => d.ParentID == null).ToList(); + foreach (var parent in parents) + { + var children = data.Where(d => d.ParentID == parent.ID).ToList(); + parent.TotalPrice = children.Sum(c => c.Price ?? 0); + // Recursively set for children if nested, but here it's flat tree + } + // Set for items + foreach (var item in data.Where(d => d.ParentID != null)) + { + item.TotalPrice = item.Price; + } + } + public static List GetData() + { + var data = new List(capacity: 150); + var rnd = new Random(42); // deterministic + var baseOrderDate = new DateTime(2025, 1, 1); + // pools for categories/items - standardized to Title Case + var categories = new[] + { + ("Seafood", new[] { "Mackerel", "Herrings", "Tilapias", "White Shrimp", "Yellowfin Tuna" }), + ("Dairy", new[] { "Fresh Cheese", "Blue Veined Cheese", "Butter", "Milk", "Yogurt" }), + ("Edible", new[] { "Preserved Olives", "Sweet corn", "Pickles", "Tomato Puree", "Olive Oil" }), + ("Crystals", new[] { "Lead glassware", "Pharmaceutical glass", "Glass beads", "Crystal vials", "Borosilicate glass" }), + ("Fresh Vegetables", new[] { "Broccoli", "Spinach", "Carrots", "Lettuce", "Cabbage" }), + ("Leafy Greens", new[] { "Kale", "Arugula", "Chard", "Collards", "Mustard Greens" }), + ("Root Vegetables", new[] { "Beets", "Radish", "Parsnip", "Turnip", "Rutabaga" }), + ("Paper", new[] { "Printer Paper", "Photo Paper", "Sticky Notes", "Card Stock", "Plotter Rolls" }), + ("Consumables", new[] { "Ink Cartridges", "Toner", "Markers", "Glue Sticks", "Tape Rolls" }), + ("Tools", new[] { "Staplers", "Hole Punch", "Cutters", "Rulers", "Scissors" }), + ("Stationery", new[] { "Notebooks", "Pens", "Pencils", "Folders", "Envelopes" }) + }; + int id = 0; + int shipSeed = 4500; + for (int p = 1; p <= 10; p++) + { + int parentId = id++; + data.Add(new ShipmentData + { + ID = parentId, + Name = $"Order {p}", + ParentID = null + }); + for (int c = 0; c < 4; c++) + { + // pick a category and item name + var (cat, items) = categories[(p + c) % categories.Length]; + var itemName = items[(p * 3 + c) % items.Length]; + // numbers + int units = 20 + rnd.Next(11); // 20..30 + int unitPrice = 5 + rnd.Next(20); // 5..24 + int price = units * unitPrice; + // dates + var orderDate = baseOrderDate.AddDays(p * 7 + c * 3); + var shipLag = 3 + rnd.Next(10); // 3..12 days + var shippedDate = orderDate.AddDays(shipLag); + // reached? + var reached = shippedDate >= orderDate.AddDays(7) && rnd.Next(100) > 30 ? "Yes" : "No"; + data.Add(new ShipmentData + { + ID = id, + ShipID = shipSeed + id, + Name = itemName, + Category = cat, + Units = units, + UnitPrice = unitPrice, + Price = price, + OrderDate = orderDate, + ShippedDate = shippedDate, + ShipmentCategory = cat, + OrderReached = reached, + ParentID = parentId + }); + id++; + } + } + CalculateTotalPrices(data); + return data; + } +} + +{% endhighlight %} +{% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrdjpBVzbiapgnK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/treegrid/style-and-appearance/selection.md b/blazor/treegrid/style-and-appearance/selection.md new file mode 100644 index 0000000000..37d2431e0e --- /dev/null +++ b/blazor/treegrid/style-and-appearance/selection.md @@ -0,0 +1,332 @@ +--- +layout: post +title: Selection styling with CSS in Blazor TreeGrid | Syncfusion +description: Learn how to style row and cell selection in Syncfusion Blazor TreeGrid using CSS, with tips on isolation and selector specificity. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Selection customization in Syncfusion Blazor TreeGrid + +The appearance of selection elements in the Syncfusion® Blazor TreeGrid can be customized using CSS. Styling options are available for: + +- **Row selection background:** Highlights the entire row when selected. +- **Cell selection background:** Highlights individual cells when selected. + +## Customize row selection background + +The **.e-selectionbackground** class styles the background of selected rows in the TreeGrid. Use CSS to modify its appearance: + +```css +.e-treegrid td.e-selectionbackground { + background-color: #00b7ea; +} +``` + +Properties such as **background-color**, **color**, and **font-weight** can be adjusted to match the TreeGrid's design. + +![Row selection](../images/style-and-appearance/row-selection.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } = new List(); + private List PageSizes { get; set; } = new List(); + protected override void OnInitialized() + { + TreeGridData = ShipmentData.GetData(); + PageSizes = new List() { "2", "4", "5", "10", "15", "20", "All" }; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="ShipmentData.cs" %} + +public class ShipmentData +{ + public int? ID { get; set; } + public int? ShipID { get; set; } + public string? Name { get; set; } + public int? Units { get; set; } + public string? Category { get; set; } + public int? UnitPrice { get; set; } + public int? Price { get; set; } + public int? TotalPrice { get; set; } // Added for total price calculation (sum for parents, individual for items) + public string? ShipmentCategory { get; set; } + public DateTime? ShippedDate { get; set; } = null; + public DateTime? OrderDate { get; set; } = null; + public string? OrderReached { get; set; } = null; + public int? ParentID { get; set; } + private static void CalculateTotalPrices(List data) + { + // For items (non-parents), TotalPrice = Price + // For parents, TotalPrice = sum of children's TotalPrice + var parents = data.Where(d => d.ParentID == null).ToList(); + foreach (var parent in parents) + { + var children = data.Where(d => d.ParentID == parent.ID).ToList(); + parent.TotalPrice = children.Sum(c => c.Price ?? 0); + // Recursively set for children if nested, but here it's flat tree + } + // Set for items + foreach (var item in data.Where(d => d.ParentID != null)) + { + item.TotalPrice = item.Price; + } + } + public static List GetData() + { + var data = new List(capacity: 150); + var rnd = new Random(42); // deterministic + var baseOrderDate = new DateTime(2025, 1, 1); + // pools for categories/items - standardized to Title Case + var categories = new[] + { + ("Seafood", new[] { "Mackerel", "Herrings", "Tilapias", "White Shrimp", "Yellowfin Tuna" }), + ("Dairy", new[] { "Fresh Cheese", "Blue Veined Cheese", "Butter", "Milk", "Yogurt" }), + ("Edible", new[] { "Preserved Olives", "Sweet corn", "Pickles", "Tomato Puree", "Olive Oil" }), + ("Crystals", new[] { "Lead glassware", "Pharmaceutical glass", "Glass beads", "Crystal vials", "Borosilicate glass" }), + ("Fresh Vegetables", new[] { "Broccoli", "Spinach", "Carrots", "Lettuce", "Cabbage" }), + ("Leafy Greens", new[] { "Kale", "Arugula", "Chard", "Collards", "Mustard Greens" }), + ("Root Vegetables", new[] { "Beets", "Radish", "Parsnip", "Turnip", "Rutabaga" }), + ("Paper", new[] { "Printer Paper", "Photo Paper", "Sticky Notes", "Card Stock", "Plotter Rolls" }), + ("Consumables", new[] { "Ink Cartridges", "Toner", "Markers", "Glue Sticks", "Tape Rolls" }), + ("Tools", new[] { "Staplers", "Hole Punch", "Cutters", "Rulers", "Scissors" }), + ("Stationery", new[] { "Notebooks", "Pens", "Pencils", "Folders", "Envelopes" }) + }; + int id = 0; + int shipSeed = 4500; + for (int p = 1; p <= 10; p++) + { + int parentId = id++; + data.Add(new ShipmentData + { + ID = parentId, + Name = $"Order {p}", + ParentID = null + }); + for (int c = 0; c < 4; c++) + { + // pick a category and item name + var (cat, items) = categories[(p + c) % categories.Length]; + var itemName = items[(p * 3 + c) % items.Length]; + // numbers + int units = 20 + rnd.Next(11); // 20..30 + int unitPrice = 5 + rnd.Next(20); // 5..24 + int price = units * unitPrice; + // dates + var orderDate = baseOrderDate.AddDays(p * 7 + c * 3); + var shipLag = 3 + rnd.Next(10); // 3..12 days + var shippedDate = orderDate.AddDays(shipLag); + // reached? + var reached = shippedDate >= orderDate.AddDays(7) && rnd.Next(100) > 30 ? "Yes" : "No"; + data.Add(new ShipmentData + { + ID = id, + ShipID = shipSeed + id, + Name = itemName, + Category = cat, + Units = units, + UnitPrice = unitPrice, + Price = price, + OrderDate = orderDate, + ShippedDate = shippedDate, + ShipmentCategory = cat, + OrderReached = reached, + ParentID = parentId + }); + id++; + } + } + CalculateTotalPrices(data); + return data; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrxDphrTkisQobX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Customize cell selection background + +The **.e-cellselectionbackground** class styles the background of selected cells in the TreeGrid. Apply CSS to customize its appearance: + +```css +.e-treegrid td.e-cellselectionbackground { + background-color: #00b7ea; +} +``` + +Modify visual properties to align with the overall layout and improve clarity. + +![Cell selection](../images/style-and-appearance/cell-selection.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } = new List(); + private List PageSizes { get; set; } = new List(); + protected override void OnInitialized() + { + TreeGridData = ShipmentData.GetData(); + PageSizes = new List() { "2", "4", "5", "10", "15", "20", "All" }; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="ShipmentData.cs" %} + +public class ShipmentData +{ + public int? ID { get; set; } + public int? ShipID { get; set; } + public string? Name { get; set; } + public int? Units { get; set; } + public string? Category { get; set; } + public int? UnitPrice { get; set; } + public int? Price { get; set; } + public int? TotalPrice { get; set; } // Added for total price calculation (sum for parents, individual for items) + public string? ShipmentCategory { get; set; } + public DateTime? ShippedDate { get; set; } = null; + public DateTime? OrderDate { get; set; } = null; + public string? OrderReached { get; set; } = null; + public int? ParentID { get; set; } + private static void CalculateTotalPrices(List data) + { + // For items (non-parents), TotalPrice = Price + // For parents, TotalPrice = sum of children's TotalPrice + var parents = data.Where(d => d.ParentID == null).ToList(); + foreach (var parent in parents) + { + var children = data.Where(d => d.ParentID == parent.ID).ToList(); + parent.TotalPrice = children.Sum(c => c.Price ?? 0); + // Recursively set for children if nested, but here it's flat tree + } + // Set for items + foreach (var item in data.Where(d => d.ParentID != null)) + { + item.TotalPrice = item.Price; + } + } + public static List GetData() + { + var data = new List(capacity: 150); + var rnd = new Random(42); // deterministic + var baseOrderDate = new DateTime(2025, 1, 1); + // pools for categories/items - standardized to Title Case + var categories = new[] + { + ("Seafood", new[] { "Mackerel", "Herrings", "Tilapias", "White Shrimp", "Yellowfin Tuna" }), + ("Dairy", new[] { "Fresh Cheese", "Blue Veined Cheese", "Butter", "Milk", "Yogurt" }), + ("Edible", new[] { "Preserved Olives", "Sweet corn", "Pickles", "Tomato Puree", "Olive Oil" }), + ("Crystals", new[] { "Lead glassware", "Pharmaceutical glass", "Glass beads", "Crystal vials", "Borosilicate glass" }), + ("Fresh Vegetables", new[] { "Broccoli", "Spinach", "Carrots", "Lettuce", "Cabbage" }), + ("Leafy Greens", new[] { "Kale", "Arugula", "Chard", "Collards", "Mustard Greens" }), + ("Root Vegetables", new[] { "Beets", "Radish", "Parsnip", "Turnip", "Rutabaga" }), + ("Paper", new[] { "Printer Paper", "Photo Paper", "Sticky Notes", "Card Stock", "Plotter Rolls" }), + ("Consumables", new[] { "Ink Cartridges", "Toner", "Markers", "Glue Sticks", "Tape Rolls" }), + ("Tools", new[] { "Staplers", "Hole Punch", "Cutters", "Rulers", "Scissors" }), + ("Stationery", new[] { "Notebooks", "Pens", "Pencils", "Folders", "Envelopes" }) + }; + int id = 0; + int shipSeed = 4500; + for (int p = 1; p <= 10; p++) + { + int parentId = id++; + data.Add(new ShipmentData + { + ID = parentId, + Name = $"Order {p}", + ParentID = null + }); + for (int c = 0; c < 4; c++) + { + // pick a category and item name + var (cat, items) = categories[(p + c) % categories.Length]; + var itemName = items[(p * 3 + c) % items.Length]; + // numbers + int units = 20 + rnd.Next(11); // 20..30 + int unitPrice = 5 + rnd.Next(20); // 5..24 + int price = units * unitPrice; + // dates + var orderDate = baseOrderDate.AddDays(p * 7 + c * 3); + var shipLag = 3 + rnd.Next(10); // 3..12 days + var shippedDate = orderDate.AddDays(shipLag); + // reached? + var reached = shippedDate >= orderDate.AddDays(7) && rnd.Next(100) > 30 ? "Yes" : "No"; + data.Add(new ShipmentData + { + ID = id, + ShipID = shipSeed + id, + Name = itemName, + Category = cat, + Units = units, + UnitPrice = unitPrice, + Price = price, + OrderDate = orderDate, + ShippedDate = shippedDate, + ShipmentCategory = cat, + OrderReached = reached, + ParentID = parentId + }); + id++; + } + } + CalculateTotalPrices(data); + return data; + } +} + +{% endhighlight %} +{% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLxXzVVTuylwmnU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/treegrid/style-and-appearance/sorting.md b/blazor/treegrid/style-and-appearance/sorting.md new file mode 100644 index 0000000000..01a2f29a17 --- /dev/null +++ b/blazor/treegrid/style-and-appearance/sorting.md @@ -0,0 +1,140 @@ +--- +layout: post +title: Sorting Icon Styling in Blazor TreeGrid | Syncfusion +description: Learn how to style sorting icons in Syncfusion Blazor TreeGrid using CSS, with tips on theme icon codes and CSS isolation. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Sorting customization in Syncfusion Blazor TreeGrid + +The appearance of sorting indicators in the Syncfusion® Blazor TreeGrid can be customized using CSS. Styling options are available for: + +- **Ascending and descending sort icons:** Show the current sort direction in column headers. +- **Multi-sorting order indicators:** Display the order of sorting when multiple columns are sorted. + +## Customize sorting icons + +The **.e-icon-ascending** and **.e-icon-descending** classes define the icons shown in the TreeGrid header when a column is sorted in `ascending` or `descending` order. Use CSS to adjust its appearance: + +```css +.e-treegrid .e-gridheader .e-icon-ascending::before { + content: '\e7a3'; /* Ascending icon code */ + } + + .e-treegrid .e-gridheader .e-icon-descending::before { + content: '\e7b6'; /* Descending icon code */ + } +``` + +Adjust properties such as **content**, **color**, **font-size**, and **margin** to match the TreeGrid design. Ensure the correct icon font family is loaded to display the icons properly. + +![Grid sorting icon](../images/style-and-appearance/sort1.webp) + +## Customize multi-sorting indicators + +The **.e-sortnumber** class styles the numeric indicator shown when multiple columns are sorted. Apply CSS to change their appearance: + +```css +.e-treegrid .e-gridheader .e-sortnumber { + background-color: #deecf9; + font-family: cursive; +} +``` + +Modify properties such as **background-color**, **font-family**, **font-size**, and **border-radius** to align with the TreeGrid layout. Ensure accessibility by maintaining clear contrast and focus styles. + +![Grid multi sorting icon](../images/style-and-appearance/sort2.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid; + + + + + + + + + + + + + + +@code { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + public List TreeData = new List(); + + protected override void OnInitialized() + { + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + } +} + + +{% endhighlight %} + +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxtJBhJOqgvtXA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2 %} \ No newline at end of file diff --git a/blazor/treegrid/style-and-appearance/style-and-appearance.md b/blazor/treegrid/style-and-appearance/style-and-appearance.md new file mode 100644 index 0000000000..91e50b8798 --- /dev/null +++ b/blazor/treegrid/style-and-appearance/style-and-appearance.md @@ -0,0 +1,295 @@ +--- +layout: post +title: Styling and Appearance in Blazor TreeGrid Component | Syncfusion +description: Learn to customize the Syncfusion Blazor TreeGrid using CSS and Theme Studio, including headers, rows, alternate rows, and styling options. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Style and appearance in Syncfusion Blazor TreeGrid + +The Syncfusion® Blazor TreeGrid supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application's design. Styling options are available for: + +- **TreeGrid root element:** Defines the overall appearance of the TreeGrid container. +- **Alternate rows:** Applies styles to alternate rows for improved readability. +- **Grid lines:** Controls the color and visibility of horizontal and vertical lines between cells. +- **Headers and cells:** Customize header appearance and cell styling throughout the grid. + +**Override Default Styles:** + +Default styles such as **colors**, **typography**, **spacing**, and **borders** can be customized using CSS. Use browser developer tools to inspect the rendered HTML and identify relevant selectors. Where possible, use CSS variables or theme tokens to maintain consistency across components. + +```css +.e-treegrid .e-headercell { + background-color: #333; /* Override the header background color */ + color: #fff; +} +``` + +Properties like **background-color**, **color**, **font-family**, and **padding** can be changed to match the TreeGrid layout design and improve visual consistency. + +![Change header background](../images/style-and-appearance/header-background.webp) +**Using Theme Studio:** + +## CSS classes and their purposes + +The following table lists all CSS classes available in the TreeGrid for styling different sections: + +| Section |CSS class | Purpose of CSS class | +| ----- | ----- | ----- | +| **Root** | e-treegrid | Styles applied to the root element div of the TreeGrid control. | +| **Header** | e-gridheader | Styles for the root element of the header. The thin line between header and content can be overridden here. | +| | e-table | Styles applied to the table element of the TreeGrid header. Makes table width 100%. | +| | e-columnheader | Styles for the **tr** element in the TreeGrid header. | +| | e-headercell | Styles for **th** elements in the TreeGrid header. Override header background color and border color here. | +| | e-headercelldiv | Styles for div elements within **th** elements in the header. Use to override header skeleton styling. | +| **Body** | e-gridcontent | Styles for the root of the body content. Use to override background color of the body. | +| | e-table | Styles for the table of the content. Makes table width 100%. | +| | e-altrow | Styles for alternate rows of the TreeGrid. Override alternate row colors here. | +| | e-rowcell | Styles for all cells in the TreeGrid. Override cell appearance and styling. | +| | e-selectionbackground | Styles for selected rowcells of the TreeGrid. Override selection appearance. | +| | e-hover | Styles added to rows when hovering over TreeGrid rows. | +| **Pager** | e-pager | Styles for the root element of the pager. Change appearance, background color, and font color. | +| | e-pagercontainer | Styles for numeric items of the pager. | +| | e-parentmsgbar | Styles for pager information. | +| **Summary** | e-gridfooter | Styles for the root of the summary div. | +| | e-summaryrow | Styles for rows in TreeGrid summary. | +| | e-summarycell | Styles for cells in summary rows. Override background color of summary cells. | + +## Customize the TreeGrid root element + +The **.e-treegrid** class styles the root container of the Blazor TreeGrid. Apply CSS to modify its appearance: + +```css +.e-gridcontent, .e-gridheader { + font-family: cursive; +} +``` + +Properties such as **font-family**, **background-color**, and spacing-related styles can be adjusted to align with the TreeGrid design. + +![TreeGrid root element](../images/style-and-appearance/style-font-family.webp) + +Additional styling can be applied to rows, alternate rows, selected rows, and hover states. Avoid using `!important` for hover styles in production environments. Instead, increase selector specificity to maintain consistent styling control. + + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid; + + + + + + + + + + + + + +@code { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + public List TreeData = new List(); + + protected override void OnInitialized() + { + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhdjfhhTZDovGda?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Customize alternate rows + +The **.e-altrow .e-rowcell** selector styles cells in alternate rows in the Blazor TreeGrid. + +```css +.e-treegrid .e-altrow .e-rowcell { + background-color: #E8EEFA; +} +``` + +Adjust properties like **background-color**, **font-family**, and **border** to maintain consistent styling across the TreeGrid. + +![Alternate row styling with frozen columns](../images/style-and-appearance/style-frozen.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.TreeGrid; + + + + + + + + + + + + +@code { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + public List TreeData = new List(); + + protected override void OnInitialized() + { + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + } +} + + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVHZTLLfZmyOSzU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Customize the color of grid lines + +The Syncfusion® Blazor TreeGrid allows customization of grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the grid container to control color, thickness, and border style. + +The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_GridLines) property defines border visibility and supports options for `Horizontal`, `Vertical`, `Both`, or `None`. + +```css + /* Customize the color of grid lines */ + .e-treegrid .e-gridheader, .e-treegrid .e-headercell, .e-treegrid .e-rowcell, .e-treegrid { + border-color: yellow; + border-style: solid; + border-width: 2px; + } + +``` + +![TreeGrid lines with custom borders](../images/style-and-appearance/grid-line.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.TreeGrid; + + + + + + + + + + + + +@code { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + public List TreeData = new List(); + + protected override void OnInitialized() + { + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + } +} + + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhnZzBhpMMBfcws?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/treegrid/style-and-appearance/toolbar.md b/blazor/treegrid/style-and-appearance/toolbar.md new file mode 100644 index 0000000000..e5a1a9404d --- /dev/null +++ b/blazor/treegrid/style-and-appearance/toolbar.md @@ -0,0 +1,102 @@ +--- +layout: post +title: Toolbar styling in Blazor TreeGrid using CSS | Syncfusion +description: Learn how to customize the Syncfusion Blazor TreeGrid toolbar using CSS, including styling the toolbar container and buttons with CSS isolation tips. +platform: Blazor +control: TreeGrid +documentation: ug +--- + +# Toolbar customization in Syncfusion Blazor TreeGrid + +The appearance of toolbar elements in the Syncfusion® Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the toolbar interface: + +- **Toolbar root container:** The outer wrapper that contains all toolbar items. +- **Toolbar buttons:** Shows interactive elements used for actions such as Add, Edit, Delete, Update, and Cancel. + +## Customize the toolbar root element + +The **.e-toolbar-items** class styles the toolbar root container in the Blazor TreeGrid. This container holds all toolbar items and can be styled using CSS: + +```css +.e-treegrid .e-toolbar .e-toolbar-items { + background-color: #deecf9; + } +``` +Properties such as **background-color**, **padding**, **border**, and **box-shadow** can be modified to suit the layout design. + +![Grid toolbar root element](../images/style-and-appearance/toolbar1.webp) + +## Customize the toolbar button elements + +The **.e-btn** class inside **.e-toolbar** defines the appearance of toolbar buttons in the Blazor TreeGrid. Apply CSS to customize their styling: +```css +.e-treegrid .e-toolbar .e-btn { + background-color: #deecf9; + } +``` +Properties such as **background-color**, **color**, **border**, **font-size**, and **padding** can be adjusted to align with the design. Ensure that customized colors meet WCAG contrast guidelines and that focus indicators remain visible for keyboard navigation. + +![Grid toolbar button element](../images/style-and-appearance/toolbar2.webp) + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.TreeGrid; + + + + + + + + + + + + + + + +@code { + public class BusinessObject + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } + public int? ParentId { get; set; } + } + + public List TreeData = new List(); + + protected override void OnInitialized() + { + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + } +} + + +{% endhighlight %} + +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBdXfBBzwxxUVoB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file