Skip to content

Commit dd1533b

Browse files
Keerthivasan-RamamoorthyKeerthivasan-Ramamoorthy
authored
Merge branch 'development' into 996529-GradientFeatureUG
2 parents d1e83f2 + 984cd32 commit dd1533b

File tree

5 files changed

+939
-4
lines changed

5 files changed

+939
-4
lines changed

‎blazor/treegrid/columns/column-chooser.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,85 @@ public class TreeData
161161

162162
N> The column names in column chooser can be hidden by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) property as false.
163163

164+
## Text wrapping in column chooser
165+
166+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid includes a enhancement that improves readability within the column chooser dialog by allowing long column names to wrap across multiple lines. This behavior is enabled by setting the [`TreeGridColumnChooserSettings.AllowTextWrap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowTextWrap) property to **true**.
167+
168+
{% tabs %}
169+
{% highlight razor tabtitle="Index.razor" %}
170+
@using TreeGridComponent.Data
171+
@using Syncfusion.Blazor.Data
172+
@using Syncfusion.Blazor.TreeGrid
173+
@using Syncfusion.Blazor.Buttons
174+
<SfTreeGrid @ref="TreeGrid" IdMapping="ShipmentId" ParentIdMapping="ParentId" DataSource="@Shipments" TreeColumnIndex="1" ShowColumnChooser="true" Toolbar="@ToolbarItems" Locale="en-US">
175+
<TreeGridColumnChooserSettings AllowTextWrap="true"></TreeGridColumnChooserSettings>
176+
<TreeGridColumns>
177+
<TreeGridColumn Field="ShipmentId" HeaderText="Shipment ID" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip"></TreeGridColumn>
178+
<TreeGridColumn Field="Description" HeaderText="Description of Shipment" Width="160" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip"></TreeGridColumn>
179+
<TreeGridColumn Field="Origin" HeaderText="Origin Location of Shipment" Width="120" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip"></TreeGridColumn>
180+
<TreeGridColumn Field="Destination" HeaderText="Destination Location of Shipment" Width="120" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip"></TreeGridColumn>
181+
<TreeGridColumn Field="Weight" HeaderText="Total Weight of Shipment (lbs)" Width="120" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip"></TreeGridColumn>
182+
<TreeGridColumn Field="DeliveryDate" HeaderText="Delivery Date for Shipment" Width="110" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Format="MM/dd/yyyy" Type="Syncfusion.Blazor.Grids.ColumnType.Date" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip"></TreeGridColumn>
183+
<TreeGridColumn Field="Status" HeaderText="Current Status of Shipment" Width="120" ShowInColumnChooser="false" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip"></TreeGridColumn>
184+
</TreeGridColumns>
185+
</SfTreeGrid>
186+
187+
@code {
188+
private SfTreeGrid<Shipment> TreeGrid;
189+
public string[] ToolbarItems = new string[] { "ColumnChooser" };
190+
public List<Shipment> Shipments { get; set; }
191+
192+
protected override void OnInitialized()
193+
{
194+
this.Shipments = Shipment.GetShipments().ToList();
195+
}
196+
}
197+
198+
{% endhighlight %}
199+
{% highlight c# tabtitle="Shipment.cs" %}
200+
201+
namespace TreeGridComponent.Data {
202+
public class Shipment
203+
{
204+
public string ShipmentId { get; set; }
205+
public string Description { get; set; }
206+
public string Origin { get; set; }
207+
public string Destination { get; set; }
208+
public double? Weight { get; set; } // Weight in pounds=
209+
public DateTime? DeliveryDate { get; set; }
210+
public string Status { get; set; }
211+
public string ParentId { get; set; }
212+
213+
public static List<Shipment> GetShipments()
214+
{
215+
var shipments = new List<Shipment>
216+
{
217+
// Parent 1: North America Shipment
218+
new Shipment { ShipmentId = "SH001", Description = "North America Shipment", Origin = null, Destination = null, Weight = null, DeliveryDate = null, Status = null, ParentId = null },
219+
new Shipment { ShipmentId = "SH002", Description = "Dell XPS 13 Laptops", Origin = "Los Angeles", Destination = "Houston", Weight = 132.28, DeliveryDate = new DateTime(2025, 10, 20), Status = "In Transit", ParentId = "SH001" }, // 50 laptops at ~2.65 lbs each
220+
new Shipment { ShipmentId = "SH003", Description = "Samsung QLED Monitors", Origin = "New York", Destination = "Houston", Weight = 1102.31, DeliveryDate = new DateTime(2025, 10, 21), Status = "In Transit", ParentId = "SH001" }, // 50 monitors at ~22 lbs each
221+
new Shipment { ShipmentId = "SH004", Description = "Logitech Keyboards", Origin = "San Francisco", Destination = "Miami", Weight = 99.21, DeliveryDate = new DateTime(2025, 10, 22), Status = "Pending", ParentId = "SH001" }, // 50 keyboards at ~1.98 lbs each
222+
new Shipment { ShipmentId = "SH005", Description = "Logitech MX Master Mice", Origin = "Boston", Destination = "Seattle", Weight = 15.43, DeliveryDate = new DateTime(2025, 10, 23), Status = "Pending", ParentId = "SH001" }, // 50 mice at ~0.31 lbs each
223+
new Shipment { ShipmentId = "SH006", Description = "Anker USB-C Cables", Origin = "Dallas", Destination = "Denver", Weight = 11.02, DeliveryDate = new DateTime(2025, 10, 24), Status = "Pending", ParentId = "SH001" }, // 100 cables at ~0.11 lbs each
224+
new Shipment { ShipmentId = "SH007", Description = "Bose Bluetooth Speakers", Origin = "Atlanta", Destination = "Phoenix", Weight = 220.46, DeliveryDate = new DateTime(2025, 10, 25), Status = "Pending", ParentId = "SH001" }, // 50 speakers at ~4.41 lbs each
225+
// Parent 2: Europe Shipment
226+
new Shipment { ShipmentId = "SH008", Description = "Europe Shipment", Origin = null, Destination = null, Weight = null, DeliveryDate = null, Status = null, ParentId = null },
227+
new Shipment { ShipmentId = "SH009", Description = "iPhone 14 Smartphones", Origin = "Munich", Destination = "Madrid", Weight = 30.42, DeliveryDate = new DateTime(2025, 10, 28), Status = "In Transit", ParentId = "SH008" }, // 50 smartphones at ~0.61 lbs each
228+
new Shipment { ShipmentId = "SH010", Description = "Samsung Galaxy Tab S9 Tablets", Origin = "Hamburg", Destination = "Rome", Weight = 55.56, DeliveryDate = new DateTime(2025, 10, 29), Status = "In Transit", ParentId = "SH008" }, // 50 tablets at ~1.11 lbs each
229+
new Shipment { ShipmentId = "SH011", Description = "Jabra Elite Headsets", Origin = "Frankfurt", Destination = "Paris", Weight = 33.07, DeliveryDate = new DateTime(2025, 10, 30), Status = "Delivered", ParentId = "SH008" }, // 50 headsets at ~0.66 lbs each
230+
new Shipment { ShipmentId = "SH012", Description = "Anker PowerPort Chargers", Origin = "Cologne", Destination = "Amsterdam", Weight = 22.05, DeliveryDate = new DateTime(2025, 11, 1), Status = "Pending", ParentId = "SH008" }, // 50 chargers at ~0.44 lbs each
231+
new Shipment { ShipmentId = "SH013", Description = "Canon EOS R Cameras", Origin = "Stuttgart", Destination = "Lisbon", Weight = 72.75, DeliveryDate = new DateTime(2025, 11, 2), Status = "Pending", ParentId = "SH008" }, // 50 cameras at ~1.46 lbs each
232+
new Shipment { ShipmentId = "SH014", Description = "Nikon 50mm Lenses", Origin = "Dresden", Destination = "Vienna", Weight = 46.30, DeliveryDate = new DateTime(2025, 11, 3), Status = "Pending", ParentId = "SH008" }, // 50 lenses at ~0.93 lbs each
233+
};
234+
return shipments;
235+
}
236+
}
237+
}
238+
{% endhighlight %}
239+
{% endtabs %}
240+
241+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVeCDLJCycwyswR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
242+
164243
## Template support in column chooser
165244

166245
Template can be rendered in column chooser of tree grid by customizing the column chooser using **Template** and **FooterTemplate** of the [TreeGridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserSettings.html) Component.

‎blazor/treegrid/filtering/filtering.md‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,3 +414,244 @@ namespace TreeGridComponent.Data {
414414

415415

416416
{% endtabs %}
417+
418+
## Filtering with case sensitivity
419+
420+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid filtering functionality can be configured to consider or ignore character casing. By default, filtering is not case-sensitive, meaning matches are found regardless of character case (e.g., "Task" and "task" are treated the same). Case-sensitive filtering is enabled by setting the [`TreeGridFilterSettings.EnableCaseSensitivity`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableCaseSensitivity) property to **true**.
421+
422+
The following example demonstrates configuration of the `EnableCaseSensitivity` property within `TreeGridFilterSettings`:
423+
424+
{% tabs %}
425+
{% highlight razor tabtitle="Index.razor" %}
426+
427+
@using TreeGridComponent.Data
428+
@using Syncfusion.Blazor.TreeGrid
429+
@using Syncfusion.Blazor.Grids
430+
@using Syncfusion.Blazor.Buttons
431+
<div class="container mt-4">
432+
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" AllowFiltering="true">
433+
<TreeGridFilterSettings Type="Syncfusion.Blazor.TreeGrid.FilterType.FilterBar" EnableCaseSensitivity="true"> </TreeGridFilterSettings>
434+
<TreeGridColumns>
435+
<TreeGridColumn Field=@nameof(TreeTask.TaskID) HeaderText="Task ID" TextAlign="TextAlign.Right" Width="90" IsPrimaryKey />
436+
<TreeGridColumn Field=@nameof(TreeTask.TaskName) HeaderText="Task Name" Width="200" />
437+
<TreeGridColumn Field=@nameof(TreeTask.ResourceName) HeaderText="Resource Name" Width="180" />
438+
<TreeGridColumn Field=@nameof(TreeTask.City) HeaderText="City" Width="140" />
439+
<TreeGridColumn Field=@nameof(TreeTask.StartDate) HeaderText="Start Date" Type="ColumnType.Date" Format="d" Width="130" />
440+
<TreeGridColumn Field=@nameof(TreeTask.Duration) HeaderText="Duration (days)" TextAlign="TextAlign.Right" Width="140" />
441+
</TreeGridColumns>
442+
</SfTreeGrid>
443+
</div>
444+
@code{
445+
private List<TreeTask> TreeData = new();
446+
public SfTreeGrid<TreeTask> TreeGrid;
447+
protected override void OnInitialized()
448+
{
449+
TreeData = TreeTask.GetTreeTasks();
450+
}
451+
452+
}
453+
454+
{% endhighlight %}
455+
{% highlight c# %}
456+
457+
namespace TreeGridComponent.Data {
458+
459+
public class TreeTask
460+
{
461+
public int TaskID { get; set; }
462+
public string TaskName { get; set; } = string.Empty;
463+
public string ResourceName { get; set; } = string.Empty;
464+
public string City { get; set; } = string.Empty;
465+
public DateTime StartDate { get; set; }
466+
public int Duration { get; set; }
467+
public int? ParentID { get; set; }
468+
public static List<TreeTask> GetTreeTasks() => new()
469+
{
470+
new TreeTask
471+
{
472+
TaskID = 1,
473+
TaskName = "Market Analysis",
474+
ResourceName = "José Álvarez",
475+
City = "Sevilla",
476+
StartDate = new DateTime(2024, 1, 2),
477+
Duration = 5,
478+
ParentID = null
479+
},
480+
new TreeTask
481+
{
482+
TaskID = 2,
483+
TaskName = "Competitor Review",
484+
ResourceName = "Zoë Brontë",
485+
City = "São Paulo",
486+
StartDate = new DateTime(2024, 1, 3),
487+
Duration = 3,
488+
ParentID = 1
489+
},
490+
new TreeTask
491+
{
492+
TaskID = 3,
493+
TaskName = "Focus Group",
494+
ResourceName = "François Dœuf",
495+
City = "Montréal",
496+
StartDate = new DateTime(2024, 1, 4),
497+
Duration = 2,
498+
ParentID = 1
499+
},
500+
new TreeTask
501+
{
502+
TaskID = 4,
503+
TaskName = "Product Design",
504+
ResourceName = "Mårten Šedý",
505+
City = "Göteborg",
506+
StartDate = new DateTime(2024, 1, 5),
507+
Duration = 6,
508+
ParentID = null
509+
},
510+
new TreeTask
511+
{
512+
TaskID = 5,
513+
TaskName = "UX Workshop",
514+
ResourceName = "Anaïs Löhn",
515+
City = "München",
516+
StartDate = new DateTime(2024, 1, 6),
517+
Duration = 4,
518+
ParentID = 4
519+
},
520+
new TreeTask
521+
{
522+
TaskID = 6,
523+
TaskName = "Prototype Testing",
524+
ResourceName = "Renée Faßbinder",
525+
City = "Zürich",
526+
StartDate = new DateTime(2024, 1, 8),
527+
Duration = 3,
528+
ParentID = 4
529+
}
530+
};
531+
}
532+
}
533+
534+
{% endhighlight %}
535+
{% endtabs %}
536+
537+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVeWhWXTjGvORab?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
538+
539+
## Filtering with ignore accent
540+
541+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid filtering functionality can be configured to ignore diacritic characters or accents. By default, filtering is accent-sensitive, requiring exact matches (e.g., "José" vs. "Jose"). Accent-insensitive filtering is enabled by setting the [`TreeGridFilterSettings.IgnoreAccent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IgnoreAccent) property to **true**.
542+
543+
The following example demonstrates configuration of the `IgnoreAccent` property within `TreeGridFilterSettings`:
544+
545+
{% tabs %}
546+
{% highlight razor tabtitle="Index.razor" %}
547+
548+
@using TreeGridComponent.Data
549+
@using Syncfusion.Blazor.TreeGrid
550+
@using Syncfusion.Blazor.Grids
551+
@using Syncfusion.Blazor.Buttons
552+
<div class="container mt-4">
553+
<<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" AllowFiltering="true">
554+
<TreeGridFilterSettings Type="Syncfusion.Blazor.TreeGrid.FilterType.FilterBar" IgnoreAccent="true"> </TreeGridFilterSettings>
555+
<TreeGridColumns>
556+
<TreeGridColumn Field=@nameof(TreeTask.TaskID) HeaderText="Task ID" TextAlign="TextAlign.Right" Width="90" IsPrimaryKey />
557+
<TreeGridColumn Field=@nameof(TreeTask.TaskName) HeaderText="Task Name" Width="200" />
558+
<TreeGridColumn Field=@nameof(TreeTask.ResourceName) HeaderText="Resource Name" Width="180" />
559+
<TreeGridColumn Field=@nameof(TreeTask.City) HeaderText="City" Width="140" />
560+
<TreeGridColumn Field=@nameof(TreeTask.StartDate) HeaderText="Start Date" Type="ColumnType.Date" Format="d" Width="130" />
561+
<TreeGridColumn Field=@nameof(TreeTask.Duration) HeaderText="Duration (days)" TextAlign="TextAlign.Right" Width="140" />
562+
</TreeGridColumns>
563+
</SfTreeGrid>
564+
</div>
565+
@code{
566+
private List<TreeTask> TreeData = new();
567+
public SfTreeGrid<TreeTask> TreeGrid;
568+
protected override void OnInitialized()
569+
{
570+
TreeData = TreeTask.GetTreeTasks();
571+
}
572+
}
573+
574+
{% endhighlight %}
575+
{% highlight c# %}
576+
577+
namespace TreeGridComponent.Data {
578+
579+
public class TreeTask
580+
{
581+
public int TaskID { get; set; }
582+
public string TaskName { get; set; } = string.Empty;
583+
public string ResourceName { get; set; } = string.Empty;
584+
public string City { get; set; } = string.Empty;
585+
public DateTime StartDate { get; set; }
586+
public int Duration { get; set; }
587+
public int? ParentID { get; set; }
588+
public static List<TreeTask> GetTreeTasks() => new()
589+
{
590+
new TreeTask
591+
{
592+
TaskID = 1,
593+
TaskName = "Market Analysis",
594+
ResourceName = "José Álvarez",
595+
City = "Sevilla",
596+
StartDate = new DateTime(2024, 1, 2),
597+
Duration = 5,
598+
ParentID = null
599+
},
600+
new TreeTask
601+
{
602+
TaskID = 2,
603+
TaskName = "Competitor Review",
604+
ResourceName = "Zoë Brontë",
605+
City = "São Paulo",
606+
StartDate = new DateTime(2024, 1, 3),
607+
Duration = 3,
608+
ParentID = 1
609+
},
610+
new TreeTask
611+
{
612+
TaskID = 3,
613+
TaskName = "Focus Group",
614+
ResourceName = "François Dœuf",
615+
City = "Montréal",
616+
StartDate = new DateTime(2024, 1, 4),
617+
Duration = 2,
618+
ParentID = 1
619+
},
620+
new TreeTask
621+
{
622+
TaskID = 4,
623+
TaskName = "Product Design",
624+
ResourceName = "Mårten Šedý",
625+
City = "Göteborg",
626+
StartDate = new DateTime(2024, 1, 5),
627+
Duration = 6,
628+
ParentID = null
629+
},
630+
new TreeTask
631+
{
632+
TaskID = 5,
633+
TaskName = "UX Workshop",
634+
ResourceName = "Anaïs Löhn",
635+
City = "München",
636+
StartDate = new DateTime(2024, 1, 6),
637+
Duration = 4,
638+
ParentID = 4
639+
},
640+
new TreeTask
641+
{
642+
TaskID = 6,
643+
TaskName = "Prototype Testing",
644+
ResourceName = "Renée Faßbinder",
645+
City = "Zürich",
646+
StartDate = new DateTime(2024, 1, 8),
647+
Duration = 3,
648+
ParentID = 4
649+
}
650+
};
651+
}
652+
}
653+
654+
{% endhighlight %}
655+
{% endtabs %}
656+
657+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLICBWNzMjzIsMp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

0 commit comments

Comments
 (0)