diff --git a/blazor-toc.html b/blazor-toc.html index 173df2bcf6..a2132708da 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3079,6 +3079,7 @@
  • Filtering diff --git a/blazor/gantt-chart/excel-like-filter.md b/blazor/gantt-chart/excel-like-filter.md index 1cf22c139c..98271a81b0 100644 --- a/blazor/gantt-chart/excel-like-filter.md +++ b/blazor/gantt-chart/excel-like-filter.md @@ -7,17 +7,19 @@ control: Gantt Chart documentation: ug --- -# Excel like filter in Blazor Gantt Chart +# Excel like filter in Blazor Gantt Chart component -The Syncfusion® Blazor Gantt Chart offers an Excel-like filter feature, providing a familiar and intuitive interface for filtering project data within the Gantt Chart. This feature simplifies complex filtering operations on specific columns, allowing for quick task location and manipulation, similar to Microsoft Excel. Excel like filtering is especially useful when dealing with large project datasets and complex filtering requirements for project management scenarios. +The Excel-like filter in Syncfusion® Blazor Gantt Chart component enables column-level filtering similar to Microsoft Excel. It supports sorting, clearing filters, and applying advanced conditions through a submenu available in each column header. This feature is highly effective for working with large datasets and applying multiple filter criteria. -Here is an example that showcasing how to render the Excel like filter within the Gantt Chart: +To enable this feature, configure [GanttFilterSettings.FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_FilterType) as **Excel** and set [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) to **true**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + + @@ -30,54 +32,56 @@ Here is an example that showcasing how to render the Excel like filter within th TaskCollection = GetTaskCollection(); } + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public int? ParentID { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLosDjqgkPbKMzW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > * The Excel-like filter feature supports various filter conditions, including text-based filters for task names, number-based filters for task Id and progress, and date-based filters for project timelines. > * The filter dialog provides additional options, such as searching for specific task values, and clearing applied project filters. ## Customize the filter choice count -By default, the filter choice count is set to 1000, which means that the filter dialog will display a maximum of 1000 distinct values for each column as a checkbox list data. This default value ensures that the filter operation remains efficient, even with large project datasets. Additionally, the filter dialog retrieves and displays distinct data from the first 1000 task records bound to the Syncfusion® Blazor Gantt Chart to optimize performance, while the remaining records are returned as a result of the search option within the filter dialog. - -The Gantt Chart allows customization of the number of distinct data displayed in the checkbox list of the Excel type filter dialog. This can be useful when working with large project datasets and wanting to customize the default filter choice count values. +The Syncfusion® Blazor Gantt Chart component displays up to 1000 distinct values per column in the filter dialog by default. These values are taken from the first 1000 records bound to the component and shown as checkbox list items to maintain optimal performance. Additional values can be accessed using the search option within the filter dialog. -However, there is flexibility to increase or decrease the filter choice count based on specific project requirements. This can be achieved by adjusting the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Gantt_FilterDialogOpeningEventArgs_FilterChoiceCount) value in the filter dialog opening event. +To customize this behavior, the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Gantt_FilterDialogOpeningEventArgs_FilterChoiceCount) property can be configured within the[FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event to increase or decrease the number of distinct values displayed, depending on the dataset size and filtering requirements. -The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event, the `FilterChoiceCount` property can be set to the desired value: +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - - + + @@ -85,7 +89,7 @@ The following example demonstrates how to customize the filter choice count in t @code { private List TaskCollection { get; set; } = new(); - SfGantt? Gantt { get; set; } + SfGantt Gantt { get; set; } public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) { @@ -100,15 +104,15 @@ The following example demonstrates how to customize the filter choice count in t private List GetTaskCollection() { List tasks = new List(); - int taskId = 1; + int TaskID = 1; - // Generate larger dataset for demonstration + // Generate larger dataset for demonstration. for (int i = 1; i <= 50; i++) { - tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Project Phase {i}", StartDate = new DateTime(2023, 04, 02), Duration = 10, Progress = 25, ParentId = null }); - tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task A-{i}", StartDate = new DateTime(2023, 04, 02), Duration = 3, Progress = 50, ParentId = taskId - 2 }); - tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task B-{i}", StartDate = new DateTime(2023, 04, 05), Duration = 4, Progress = 75, ParentId = taskId - 3 }); - tasks.Add(new TaskData() { TaskId = taskId++, TaskName = $"Task C-{i}", StartDate = new DateTime(2023, 04, 09), Duration = 3, Progress = 30, ParentId = taskId - 4 }); + tasks.Add(new TaskData() { TaskID = TaskID++, TaskName = $"Project Phase {i}", StartDate = new DateTime(2023, 04, 02), Duration = 10, Progress = 25, ParentID = null }); + tasks.Add(new TaskData() { TaskID = TaskID++, TaskName = $"Task A-{i}", StartDate = new DateTime(2023, 04, 02), Duration = 3, Progress = 50, ParentID = TaskID - 2 }); + tasks.Add(new TaskData() { TaskID = TaskID++, TaskName = $"Task B-{i}", StartDate = new DateTime(2023, 04, 05), Duration = 4, Progress = 75, ParentID = TaskID - 3 }); + tasks.Add(new TaskData() { TaskID = TaskID++, TaskName = $"Task C-{i}", StartDate = new DateTime(2023, 04, 09), Duration = 3, Progress = 30, ParentID = TaskID - 4 }); } return tasks; @@ -116,63 +120,59 @@ The following example demonstrates how to customize the filter choice count in t public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public int Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLSCDjUzNLJlHUQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > The specified filter choice count value determines the display of unique items as a checkbox list in the Excel type filter dialog. This can result in a delay in rendering these checkbox items when opening the filter dialog. Therefore, it is advisable to set a restricted filter choice count value for optimal project management performance. ## Show customized text in filter dialog -The Syncfusion® Blazor Gantt Chart provides flexibility to customize the text displayed in the Excel filtering options. This allows modification of the default text and provides more meaningful and contextual labels for project filtering, enhancing the project management experience. +You can customize the text shown in the filter dialog of the Syncfusion® Blazor Gantt Chart component by using the [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_FilterItemTemplate) property. This feature allows you to present meaningful labels based on the values of a specific column. -To customize the text in the Excel filter, define a `FilterItemTemplate` and bind it to the desired column. The `FilterItemTemplate` property allows creation of custom templates for filter items. Any logic and HTML elements can be used within this template to display the desired text or content relevant to project management scenarios. +In the example below, the filter checkbox list for the **Status** column is customized by defining a `FilterItemTemplate` within the column configuration. The **FilterItemTemplateContext** is used to conditionally render descriptive labels: **Completed** when the value is **true**, and **In Progress** when the value is **false**. -In the example below, customization of the text displayed in the filter checkbox list for a **Status** column is demonstrated. This is achieved by defining a `FilterItemTemplate` within the column element. Inside the template, FilterItemTemplateContext can be used to conditionally display **Completed** if the data value is true and **In Progress** if the value is false: +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids - - - + + - - - + + @{ - var filterContext = (context as FilterItemTemplateContext); - var itemTemplateValue = "DefaultText"; - - if (filterContext.Value.ToString() == "False") - { - itemTemplateValue = "In Progress"; - } - else - { - itemTemplateValue = "Completed"; - } + var filterContext = context as FilterItemTemplateContext; + var value = filterContext?.Value?.ToString(); + var itemTemplateValue = value == "True" ? "Completed" : "In Progress"; } @itemTemplateValue - + @code { private List TaskCollection { get; set; } = new(); + protected override void OnInitialized() { TaskCollection = GetTaskCollection(); @@ -180,39 +180,45 @@ In the example below, customization of the text displayed in the filter checkbox private List GetTaskCollection() { - return new List() + return new List { - new TaskData() { TaskId = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 02), Duration = 10, Progress = 40, IsCompleted = true, ParentId = null }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 100, IsCompleted = true, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 50, IsCompleted = true, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 02), Duration = 4, Progress = 100, IsCompleted = true, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 02), Duration = 8, Progress = 60, IsCompleted = false, ParentId = null }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 100, IsCompleted = false, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, IsCompleted = false, ParentId = 5 } + new TaskData { TaskID = 1, TaskName = "Project Management", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 03), Duration = 10, Progress = 40, IsCompleted = true }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 03), Duration = 4, Progress = 100, IsCompleted = true, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 03), Duration = 4, Progress = 50, IsCompleted = true, ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 04, 03), EndDate = new DateTime(2023, 04, 03), Duration = 4, Progress = 100, IsCompleted = true, ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project Estimation", StartDate = new DateTime(2023, 04, 04), EndDate = new DateTime(2023, 04, 04), Duration = 8, Progress = 60, IsCompleted = false }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan", StartDate = new DateTime(2023, 04, 04), EndDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 100, IsCompleted = false, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 04, 04), EndDate = new DateTime(2023, 04, 04), Duration = 3, Progress = 40, IsCompleted = false, ParentID = 5 } }; } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public int Duration { get; set; } public int Progress { get; set; } public bool IsCompleted { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSCjNqzrNWxSym?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customize the Excel filter using CSS In the Syncfusion® Blazor Gantt Chart, there is flexibility to enhance the visual presentation of the Excel filter dialog. This can be achieved by utilizing CSS styles to modify the dialog's appearance according to specific project management needs and application aesthetics. -**1. Removing context menu option** +### Removing context menu option -The Excel filter dialog includes several features such as **context menu**, **search box**, and **checkbox list** that may not be required in some project management scenarios. These options can be removed using CSS classes applied to the Gantt Chart. +The Excel filter dialog includes several features such as **context menu**, **search box**, and **checkbox list** that may not be required in some project management scenarios. + +To remove the context menu from the filter dialog, apply the following CSS rule to the Gantt Chart: ```cshtml ``` -The following example demonstrates how to remove the context menu option in the Excel filter dialog using the above mentioned CSS for the Gantt Chart: +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + + @@ -247,46 +253,51 @@ The following example demonstrates how to remove the context menu option in the TaskCollection = GetTaskCollection(); } - public static List GetTaskCollection() + private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` -**2. Customize the height and width of filter dialog** +{% endhighlight %} +{% endtabs %} -The height and width of each column's filter dialog can be customized using CSS styles in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event. +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLyMtZUJqmzHKur?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Before opening a filter dialog for each column, the `FilterDialogOpening` event will be triggered. At that point, based on the column name, the height and width of the columns can be set using CSS styles in the following sample. +### Customize the height and width of filter dialog + +You can adjust the height and width of the filter dialog for each column using CSS styles within the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening) event. This event is triggered before the filter dialog opens, allowing you to apply styles conditionally based on the column name. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids + - + @@ -338,90 +349,135 @@ Before opening a filter dialog for each column, the `FilterDialogOpening` event IsSmall = false; } } - public static List GetTaskCollection() + + private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } } -``` -**3. Customize filter icon for filtered columns** +{% endhighlight %} +{% endtabs %} -After filtering the column, the Gantt Chart will display the built-in filtered icon with predefined styles by default. The filtered icon can also be customized using the `.e-gantt .e-filtered::before` class for enhanced project visualization. +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoCtXgzJXiUzEe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Customize filter icon for filtered columns + +When a column is filtered, the Gantt Chart displays a default icon with predefined styles. You can customize this icon using the **.e-gantt .e-filtered::before** CSS class for enhanced project visualization. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids - - + + + - +@if (IsLarge) +{ + +} +@if (IsSmall) +{ + +} @code { private List TaskCollection { get; set; } = new(); - + public bool IsLarge; + public bool IsSmall; protected override void OnInitialized() { TaskCollection = GetTaskCollection(); } - public class TaskData + public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) { - public int TaskId { get; set; } - public string TaskName { get; set; } - public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } - public string Duration { get; set; } - public int Progress { get; set; } - public int? ParentId { get; set; } + if (args.ColumnName == "TaskName") + { + IsLarge = true; + IsSmall = false; + } + else if (args.ColumnName == "TaskId") + { + IsSmall = true; + IsLarge = false; + } + else + { + IsLarge = false; + IsSmall = false; + } } - public static List GetTaskCollection() + private static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } + + public class TaskData + { + public int TaskID { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } + } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBSWNtATpopODgg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page provides comprehensive feature representations. The [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/overview?theme=bootstrap4) demonstrates how to present and manipulate project data effectively. \ No newline at end of file diff --git a/blazor/gantt-chart/filter-menu.md b/blazor/gantt-chart/filter-menu.md new file mode 100644 index 0000000000..3294cd94ee --- /dev/null +++ b/blazor/gantt-chart/filter-menu.md @@ -0,0 +1,284 @@ +--- +layout: post +title: Excel Like Filter in Blazor Gantt Chart | Syncfusion +description: Checkout and learn here all about Excel like filter in Syncfusion Blazor Gantt Chart and much more details. +platform: Blazor +control: Gantt Chart +documentation: ug +--- + +# Filter menu in Blazor Gantt Chart component + +The Syncfusion Blazor Gantt Chart component provides a filter menu for each column, allowing filtering based on data type and supported operators. + +To enable this feature, configure [GanttFilterSettings.FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_FilterType) as **Menu** and set [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) to **true**. + +## Custom component in filter menu + +You can customize the filter menu in the Syncfusion® Blazor Gantt Chart component using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_FilterItemTemplate) property. This allows you to replace the default filter controls with custom components such as dropdowns or textboxes for specific columns. By default, the Gantt Chart uses Autocomplete for string columns, NumericTextBox for number columns, DatePicker for date columns, and DropDownList for boolean column. + +Here is a sample code demonstrating how to render a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) for the **TaskName** column: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.DropDowns + + + + + + + + + + + @{ + var contextModel = context as PredicateModel; + } + + + + + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + + public class TaskData + { + public int TaskID { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBeCjZUpcIouXer?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Hide default filter icon while perform filtering through method + +To remove the default filter icon from the UI, apply the following CSS: + +```css +.e-filtermenudiv.e-icons.e-icon-filter { + display: none; +} + +``` + +You can perform filtering programmatically using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterByColumnAsync_System_String_System_String_System_String_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__) method, and reset it using [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearFilteringAsync) through button actions. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Buttons + +
    + Filter Task Name Column + Clear Filter +
    + + + + + + + + + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + private SfGantt GanttInstance; + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private async Task PerformFilter() + { + await GanttInstance.FilterByColumnAsync("TaskName", "startswith", "Project"); + } + + private async Task ClearFilter() + { + await GanttInstance.ClearFilteringAsync(); + } + + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + + public class TaskData + { + public int TaskID { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrysXXUTPPCTyhw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize the default input component of filter menu dialog + +You can customize the input components in the filter menu of the Syncfusion Blazor Gantt Chart by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_FilterItemTemplate) property in `GanttColumn`. This enables column-specific customization and precise control over the behavior of individual filter components. + +| Column Type | Default component |Customization | API Reference | +| ----------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- | +| String | [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Eg: Autofill="false" | [AutoComplete API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) | +| Number | [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | Eg: ShowSpinButton="false" | [NumericTextBox API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) | +| Boolean | [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) | Eg: SortOrder="SortOrder.Ascending" | [DropDownList API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) | +| Date | [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) | Eg: WeekNumber="true" | [DatePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | +| DateTime | [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) | Eg: ShowClearButton="true" | [DateTimePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) | + +The following sample demonstrates how to disable the autofill feature by setting the `Autofill` parameter to **false** for the **TaskName** column, and how to configure a `NumericTextBox` without a spin button (`ShowSpinButton` set to **false**) for the **TaskID** column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Grids + + + + + + + + + + + @{ + var contextModel = context as PredicateModel; + } + + + + + + + @{ + var contextModel = context as PredicateModel; + } + + + + + + + + + + + +@code { + private List TaskCollection { get; set; } = new(); + private List CustomerData { get; set; } = new(); + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + CustomerData = TaskCollection.Select(t => t.TaskName).Distinct().ToList(); + } + + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + + public class TaskData + { + public int TaskID { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhosZjKTkWPUTuQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + diff --git a/blazor/gantt-chart/filtering.md b/blazor/gantt-chart/filtering.md index 4c8101695a..56ae25971a 100644 --- a/blazor/gantt-chart/filtering.md +++ b/blazor/gantt-chart/filtering.md @@ -9,207 +9,260 @@ documentation: ug # Filtering in Blazor Gantt Chart Component -Filtering allows you to view specific or related records based on filter criteria. This can be done in the Gantt Chart component by using the filter menu and toolbar search. To enable filtering in the Gantt Chart component, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) to `true`. Menu filtering support can be configured using the `GanttFilterSettings` property and toolbar searching can be configured using the `GanttSearchSettings` property. +Filtering allows you to view specific or related records based on defined criteria. The Gantt Chart component supports options like filter menu, Excel-like filtering, and toolbar search to narrow down visible data. +To enable filtering, set [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) to **true** in the Gantt Chart configuration. You can define filter options using `GanttFilterSettings` and configure toolbar search using `GanttSearchSettings` property. -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component provides menu-filtering support for each column. You can enable the filter menu by setting the `AllowFiltering` to `true`. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators. +> The filtering UI is rendered based on the column type, allowing data to be filtered using appropriate operators. +> The filter menu is enabled by default. To disable the filtering option for a specific column, set the `AllowFiltering` property of the `GanttColumn` to **false**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - + + + @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public int? ParentID { get; set; } } } -``` -![Blazor Gantt Chart with Menu Filter](images/blazor-gantt-chart-menu-filter.png) +{% endhighlight %} +{% endtabs %} -N> The `AllowFiltering` property should be set to `true` to enable the filter menu. Setting the `GanttColumn.AllowFiltering` property to `false` prevents rendering the filter menu for a particular column. +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIWDNALLvvHCTa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Filter hierarchy modes -The Gantt Chart supports a set of filtering modes with the [GanttFilterSettings.HierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_HierarchyMode) property. The following are the types of filter hierarchy modes available in the Gantt Chart component: +The Blazor Gantt Chart component supports multiple filtering modes, which can be configured using the [GanttFilterSettings.HierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_HierarchyMode) property. The available modes are: -* `Parent`: This is the default filter hierarchy mode in Gantt Chart. The filtered records are displayed with its parent records. If the filtered records do not have any parent record, then only the filtered records will be displayed. +- **Parent**: This is the default mode. Filtered records are displayed along with their parent records. If no parent exists, only the filtered records are shown. -* `Child`: Displays the filtered records with its child record. If the filtered records do not have any child record, then only the filtered records will be displayed. +- **Child**: Displays filtered records along with their child records. If no child exists, only the filtered records are shown. -* `Both`: Displays the filtered records with its both parent and child records. If the filtered records do not have any parent and child records, then only the filtered records will be displayed. +- **Both**: Displays filtered records along with both parent and child records. If neither exists, only the filtered records are shown. -* `None`: Displays only the filtered records. +- **None**: Displays only the filtered records without any parent or child context. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - - - - +@using Syncfusion.Blazor.DropDowns + +
    + + + + + +
    + + + -@code{ +@code { + private SfGantt GanttObject; public List TaskCollection { get; set; } + public string SelectedMode { get; set; } = "None"; + public Syncfusion.Blazor.Gantt.FilterHierarchyMode HierarchyMode { get; set; } = Syncfusion.Blazor.Gantt.FilterHierarchyMode.None; + + public List filterModesData = new List + { + new DropDownItem { id = "None", mode = "None" }, + new DropDownItem { id = "Parent", mode = "Parent" }, + new DropDownItem { id = "Child", mode = "Child" }, + new DropDownItem { id = "Both", mode = "Both" }, + }; + protected override void OnInitialized() { - this.TaskCollection = GetTaskCollection(); + TaskCollection = GetTaskCollection(); + } + + private void OnModeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs< string, DropDownItem> args) + { + SelectedMode = args.Value; + HierarchyMode = Enum.Parse(SelectedMode); + GanttObject.ClearFilteringAsync(); + } + + private List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10) }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } - public static List GetTaskCollection() + public class DropDownItem { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public string id { get; set; } + public string mode { get; set; } } } -``` +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhoijMeicdnXjio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Initial filter -To apply the filter at initial rendering, set the filter `Predicate` collections in the [GanttFilterSettings.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_Columns) property. +To apply filtering during the initial render of the Syncfusion® Blazor Gantt Chart component, define the filter conditions using a collection of `PredicateModel` objects within the [GanttFilterSettings.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_Columns) property. + +The following sample demonstrates how to apply an initial filter where **TaskName** starts with **Identify** and **TaskID** equals **2**, using a `Predicate` condition set to **and**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml -@using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor @using Syncfusion.Blazor.Grids - - + + + -@code{ +@code { private List TaskCollection { get; set; } public List FilterColumns { get; set; } = new List { - new PredicateModel() { Field = "TaskName", MatchCase=false, Operator = Operator.StartsWith, Predicate = "and", Value = "Identify" }, - new PredicateModel() { Field = "TaskId", MatchCase=false, Operator = Operator.Equal, Predicate = "and", Value = 2 } + new PredicateModel() { Field = "TaskName", MatchCase = false, Operator = Operator.StartsWith, Predicate = "and", Value = "Identify" }, + new PredicateModel() { Field = "TaskID", MatchCase = false, Operator = Operator.Equal, Predicate = "and", Value = 2 } }; + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10) }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; + } + public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public int? ParentID { get; set; } } } -``` -![Blazor Gantt Chart with Initial Filter](images/blazor-gantt-chart-initial-filter.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosjNKhcBcgFMa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Filter operators -The filter operator for a column can be defined in the [GanttFilterSettings.Columns.Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_Operators) property. +Filter operators can be set using the [GanttFilterSettings.Columns.Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_Operators) property to define the comparison logic for each column. The available operators and their supported data types are: -Operator |Description |Supported Types ------|-----|----- -startswith |Checks whether the value begins with the specified value. |String -endswith |Checks whether the value ends with the specified value. |String -contains |Checks whether the value contains the specified value. |String -equal |Checks whether the value is equal to the specified value. |String | Number | Boolean | Date -notequal |Checks for the values that are not equal to the specified value. |String | Number | Boolean | Date -greaterthan |Checks whether the value is greater than the specified value. |Number | Date -greaterthanorequal|Checks whether the value is greater than or equal to the specified value. |Number | Date -lessthan |Checks whether the value is less than the specified value. |Number | Date -lessthanorequal |Checks whether the value is less than or equal to the specified value. |Number | Date +| Operator | Description | Supported Types | +|----------------------|-----------------------------------------------------|----------------------------------| +| startswith | Matches values beginning with the specified value. | String | +| endswith | Matches values ending with the specified value. | String | +| contains | Matches values that include the specified value. | String | +| equal | Matches values exactly equal to the specified value. | String, Number, Boolean, Date | +| notequal | Matches values not equal to the specified value. | String, Number, Boolean, Date | +| greaterthan | Matches values greater than the specified value. | Number, Date | +| greaterthanorequal | Matches values greater than or equal to the value. | Number, Date | +| lessthan | Matches values less than the specified value. | Number, Date | +| lessthanorequal | Matches values less than or equal to the value. | Number, Date | N> By default, the `GanttFilterSettings.Columns.Operator` value is `equal` ## Diacritics -By default, the Gantt Chart component ignores the diacritic characters while filtering. To include diacritic characters, set the [GanttFilterSettings.IgnoreAccent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_IgnoreAccent) to true. +By default, the Syncfusion® Blazor Gantt Chart component ignores diacritic characters during filtering. To enable filtering with diacritic sensitivity, set the [GanttFilterSettings.IgnoreAccent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttFilterSettings.html#Syncfusion_Blazor_Gantt_GanttFilterSettings_IgnoreAccent) property to **true**. -In the following sample, type **Perform** in the **TaskName** column to filter diacritic characters. +The following sample demonstrates this behavior: when filtering the **TaskName** column, entries containing diacritic characters (e.g., “Próject”, “Projéct”) will be matched if you enter the base text **Project**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + + -@code{ +@code { public List TaskCollection { get; set; } protected override void OnInitialized() { @@ -231,11 +284,11 @@ In the following sample, type **Perform** in the **TaskName** column to filter d { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskId = 1, TaskName = "Projéct initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, new TaskData() { TaskId = 2, TaskName = "Identify site locàtion", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, new TaskData() { TaskId = 3, TaskName = "Perförm soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, new TaskData() { TaskId = 4, TaskName = "Soil tëst appröval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskId = 5, TaskName = "Próject estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, @@ -243,131 +296,486 @@ In the following sample, type **Perform** in the **TaskName** column to filter d return Tasks; } } -``` -![Filtering Diacritic Characters in Blazor Gantt Chart](images/blazor-gantt-chart-filter-diacritic-charater.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBoMXDALFmDenyb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Filtering a specific column by method -You can filter the columns dynamically by using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterByColumnAsync_System_String_System_String_System_String_) method. +You can filter columns dynamically in the Syncfusion® Blazor Gantt Chart component by using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterByColumnAsync_System_String_System_String_System_String_) method. + +The example below demonstrates how to filter the **TaskName** and **TaskID** columns using a single value. Filtering is triggered by an external button click, which invokes the `FilterByColumnAsync` method. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons -Filter Column - - +Filter Column + + @code{ - public SfGantt Gantt; + public SfGantt GanttInstance; + private List TaskCollection { get; set; } + public async void Filter() { - await this.Gantt.FilterByColumnAsync("TaskName", "startswith", "Iden", "or", true, false); + await this.GanttInstance.FilterByColumnAsync("TaskName", "startswith", "Iden", "or", true, false); } - private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } - } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, - }; - return Tasks; + public int? ParentID { get; set; } } } -``` -![Filtering Specific Column in Blazor Gantt Chart](images/blazor-gantt-chart-filter-column.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLSMDXKrEDLyEcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Clear filtered columns -You can clear all the filtering condition done in the Gantt Chart component by using the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearFilteringAsync) method. +You can clear all the filtering conditions applied in the Gantt Chart component by using the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ClearFilteringAsync) method. -The following code snippet explains the above behavior. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -Clear Filter - - +Clear Filter + + @code{ + public SfGantt GanttInstance; + private List TaskCollection { get; set; } public List FilterColumns { get; set; } = new List { - new PredicateModel() { Field = "TaskName", MatchCase=false, Operator = Operator.StartsWith, Predicate = "and", - Value = "Identify" }, - new PredicateModel() { Field = "TaskId", MatchCase=false, Operator = Operator.Equal, Predicate = "and", Value = 2 } + new PredicateModel() { Field = "TaskName", MatchCase = false, Operator = Operator.StartsWith, Predicate = "and", Value = "Identify" }, + new PredicateModel() { Field = "TaskID", MatchCase = false, Operator = Operator.Equal, Predicate = "and", Value = 2 } }; - public SfGantt Gantt; - public void ClearFilter() + + public async Task ClearFilter() { - this.Gantt.ClearFilteringAsync(); + await this.GanttInstance.ClearFilteringAsync(); } - private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNheWDXKBOdpyoxD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Enable different filter for a column + +You can enable different filter types for individual columns in the Syncfusion® Gantt Chart component by setting the[GanttColumn.FilterSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Type) property. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Grids + +
    + + + + + + + + + +
    + + + + + + + + + + + + + +@code { + public SfGantt GanttInstance; + private List TaskCollection { get; set; } = GetTaskCollection(); + public bool flag = false; + public string SelectedColumn { get; set; } + public string SelectedOperator { get; set; } + List LocalData = new List() { "Menu", "Excel" }; + List ColumnData = new List() { "TaskID", "TaskName", "StartDate", "EndDate", "Duration", "Progress", "ParentID" }; + + // Filter settings for each column. + FilterSettings TaskIDFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings TaskNameFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings StartDateFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings EndDateFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings DurationFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings ProgressFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + FilterSettings ParentIDFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; + + public void onFieldChange(ChangeEventArgs args) + { + SelectedColumn = args.Value; + flag = true; + } + + public async Task onTypeChange(ChangeEventArgs args) + { + SelectedOperator = args.Value; + await onSingleValueFilter(); + } + + public async Task onSingleValueFilter() + { + Enum.TryParse(SelectedOperator, out Syncfusion.Blazor.Grids.FilterType filterType); + + switch (SelectedColumn) + { + case "TaskID": + TaskIDFilterSettings.Type = filterType; + break; + case "TaskName": + TaskNameFilterSettings.Type = filterType; + break; + case "StartDate": + StartDateFilterSettings.Type = filterType; + break; + case "EndDate": + EndDateFilterSettings.Type = filterType; + break; + case "Duration": + DurationFilterSettings.Type = filterType; + break; + case "Progress": + ProgressFilterSettings.Type = filterType; + break; + } + + await GanttInstance.RefreshAsync(); + } + + private static List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10) }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; + } + + public class TaskData + { + public int TaskID { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrSijtKAOZnzpjS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Get filtered records + +You can retrieve filtered records from the Gantt Chart component using the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GetFilteredRecordsAsync) method. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt + +
    + Get Filtered Records + Clear Filters +
    + +@if (!string.IsNullOrEmpty(message)) +{ +
    + @message +
    +} + + + + + + + +@if (showRecords) +{ +

    Filtered Records

    + + + +} + +@code { + public SfGantt GanttInstance; + private List TaskCollection { get; set; } = GetTaskCollection(); + public List FilteredTasks { get; set; } = new(); + public bool showRecords = false; + public string message = string.Empty; + public bool flag = false; + + public Syncfusion.Blazor.Gantt.FilterType CurrentFilterType { get; set; } = Syncfusion.Blazor.Gantt.FilterType.Menu; + + public async Task click() + { + if (flag) + { + var filteredRecords = await GanttInstance.GetFilteredRecordsAsync(); + FilteredTasks = filteredRecords.Cast().ToList(); + showRecords = true; + message = string.Empty; + } + else + { + showRecords = false; + message = "No Records is filtered "; + } + } + + public void FilteringHandler(Syncfusion.Blazor.Grids.FilteringEventArgs args) + { + flag = args.FilterPredicates != null && args.FilterPredicates.Any(); + } + + public async Task clear() + { + await GanttInstance.ClearFilteringAsync(); + showRecords = false; + message = string.Empty; + flag = false; + } + + private static List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), Duration = "3", Progress = 50 }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), Duration = "6", Progress = 60 }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; + } + + public class TaskData + { + public int TaskID { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrSCDNSodAFQiMa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize filtering action + +You can customize the filtering behavior in the Gantt Chart component using the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpening), [FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_FilterDialogOpened), [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_Filtering), and [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_Filtered) events. + +The following `Filtering` event cancels the filter action for the **TaskName** column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids + +@if (Show) +{ +
    + @BeginMessage +

    + @CompleteMessage +
    +
    +} + + + + + + + + + + + + + + + + +@code { + private SfGantt Gantt; + private List TaskCollection { get; set; } = new(); + private bool Show = false; + private string BeginMessage = string.Empty; + private string CompleteMessage = string.Empty; + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + public Task FilteringHandler(Syncfusion.Blazor.Grids.FilteringEventArgs args) + { + Show = true; + if (args.ColumnName == "TaskName") + { + args.Cancel = true; + BeginMessage = "Filtering is not allowed for TaskName column."; + } + else + { + BeginMessage = $"Filtering started for column: {args.ColumnName}"; + } + return Task.CompletedTask; + } + + public Task FilteredHandler(FilteredEventArgs args) + { + CompleteMessage = $"Filtering completed for column: {args.ColumnName}"; + return Task.CompletedTask; + } + + public Task FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) + { + Show = true; + BeginMessage = $"Filter dialog opened for column: {args.ColumnName}"; + return Task.CompletedTask; } public static List GetTaskCollection() { - List Tasks = new List() + return new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, + new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, }; - return Tasks; + } + + public class TaskData + { + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime? EndDate { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public int? ParentId { get; set; } } } -``` -![Clearing Column Filter in Blazor Gantt Chart](images/blazor-gantt-chart-clear-filter.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByCDDyykKaWddG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/gantt-chart/searching.md b/blazor/gantt-chart/searching.md index cc0b6fe0ec..464ed4d2c2 100644 --- a/blazor/gantt-chart/searching.md +++ b/blazor/gantt-chart/searching.md @@ -9,13 +9,16 @@ documentation: ug # Search in Blazor Gantt Chart Component -You can search for records in the Gantt Chart component by using the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SearchAsync_System_String_) method with search key as a parameter. The Gantt Chart component provides an option to integrate the search text box in the toolbar by adding the search item to the `Toolbar` property. +The Syncfusion® Blazor Gantt Chart component allows quick filtering of records based on search input, improving access to relevant data in large datasets. + +To enable this feature, add the **Search** option to the `Toolbar` configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + + @@ -27,135 +30,187 @@ You can search for records in the Gantt Chart component by using the [SearchAsyn this.TaskCollection = GetTaskCollection(); } + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + public class TaskData { public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, - }; - return Tasks; - } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVosNjOVyjoYGal?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrSWZZSJQLgfUSZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Initial search -In the Gantt Chart component, you can load a task with some search criteria by using the [GanttSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html) property. To apply a search at initial rendering, set the value for `Fields`, `Operator`, `Key`, and `IgnoreCase` in the `GanttSearchSettings` property. +The Syncfusion® Blazor Gantt Chart component allows applying search criteria during initial load using the [GanttSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html) property. + +To configure this feature, define the following properties: + +| Property | Description | +|---------------|----------------------------------------------------------------------------------------------| +| `Fields` | Defines the fields where the search should be applied. | +| `Operator` | Sets the condition for matching (e.g., Contains, Equals). | +| `Key` | Specifies the value to search for. | +| `IgnoreCase` | Determines if the search should be case-insensitive. | +| `IgnoreAccent`| Ignores diacritic characters or accents during the search. + + +The following sample demonstrates an initial search where `Fields` is set to **TaskName**, `Operator` is **Contains**, `Key` is **Product**, and `IgnoreCase` is **true**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt - + + - + @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify site locàtion", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perförm soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil tëst appröval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + public class TaskData { public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, - }; - return Tasks; - } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhyCNDYLesldWCV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyiDDSIBEAoMzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Search operators -The search operator can be defined in the [GanttSearchSettings.Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Operator) property to configure specific searching. +Search operators specify the type of comparison used during a search. These are configured through the [GanttSearchSettings.Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Operator) property. The following operators are supported in searching: -Operator |Description ------|----- -startsWith |Checks whether a value begins with the specified value. -endsWith |Checks whether a value ends with the specified value. -contains |Checks whether a value contains the specified value. -equal |Checks whether a value is equal to the specified value. -notEqual |Checks for the values that are not equal to the specified value. - -N> By default, the `GanttSearchSettings.Operator` value is *contains*. - -## Search by external button +| Operator | Description | +|--------------|--------------------------------------------------| +| startsWith | Matches values that begin with the specified text. | +| endsWith | Matches values that end with the specified text. | +| contains | Matches values that include the specified text. | +| equal | Matches values that exactly match the specified text. | +| notEqual | Matches values that do not match the specified text. | -To search the Gantt Chart records from an external button, invoke the `SearchAsync` method. +> The default value for `GanttSearchSettings.Operator` is `contains`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt -@using Syncfusion.Blazor.Buttons -Search - +@using Syncfusion.Blazor.DropDowns + +Gantt Search Operator + +
    + + + + + + +
    + + -@code{ - public SfGantt Gantt; - public void Search() + +@code { + private List TaskCollection { get; set; } + public Syncfusion.Blazor.Operator SearchOperator { get; set; } = Syncfusion.Blazor.Operator.StartsWith; + + public class DropDownOrder { - this.Gantt.SearchAsync("Perform"); + public string Text { get; set; } + public Syncfusion.Blazor.Operator Value { get; set; } } - private List TaskCollection { get; set; } + + List DropDownData = new List + { + new DropDownOrder(){Text="StartsWith",Value= Syncfusion.Blazor.Operator.StartsWith }, + new DropDownOrder(){Text="EndsWith",Value=Syncfusion.Blazor.Operator.EndsWith}, + new DropDownOrder(){Text="Contains",Value=Syncfusion.Blazor.Operator.Contains}, + new DropDownOrder(){Text="Equal",Value=Syncfusion.Blazor.Operator.Equal} + }; + + public void OnValueChange(ChangeEventArgs args) + { + SearchOperator = args.Value; + } + protected override void OnInitialized() { - this.TaskCollection = GetTaskCollection(); + TaskCollection = GetTaskCollection(); + } + + private static List GetTaskCollection() + { + return new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; } public class TaskData @@ -163,45 +218,107 @@ To search the Gantt Chart records from an external button, invoke the `SearchAsy public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhyCXDyyrZiOnqz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Search by external button + +To perform a search from an external button in the Syncfusion® Blazor Gantt Chart component, call the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SearchAsync_System_String_) method programmatically with the desired keyword. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + +
    + + Search +
    + + + + + +@code { + private SfGantt GanttInstance; + private string SearchText { get; set; } = string.Empty; + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } - public static List GetTaskCollection() + private void Search() { - List Tasks = new List() + this.GanttInstance?.SearchAsync(SearchText); + } + + private void OnTextChanged(Syncfusion.Blazor.Inputs.ChangeEventArgs args) + { + if (string.IsNullOrWhiteSpace(args?.Value)) { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, + this.GanttInstance?.SearchAsync(""); + } + } + + private static List GetTaskCollection() + { + return new List + { + new TaskData { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07) }, + new TaskData { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10) }, + new TaskData { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5 } }; - return Tasks; + } + + public class TaskData + { + public int TaskID { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public string Duration { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVyWjDEhySSElVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSWXtSfkTkIRvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> You should set the `AllowFiltering` property to `true` for searching the content externally. ## Search specific columns -By default, the Gantt Chart component searches all the columns. You can search specific columns by defining the specific columns' field names in the [GanttSearchSettings.Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Fields) property. +To search specific columns in the Gantt Chart component, use the [GanttSearchSettings.Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSearchSettings.html#Syncfusion_Blazor_Gantt_GanttSearchSettings_Fields) property. This allows you to define which column fields should be included in the search, instead of searching across all columns by default. + +This following sample demonstrates searching only within the **TaskName** and **Duration** columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt - + + @@ -209,58 +326,59 @@ By default, the Gantt Chart component searches all the columns. You can search s @code{ private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + public class TaskData { public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, - }; - return Tasks; - } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVIsZDareOpCZHb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhIsjteTkwVEGvi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> In above sample, you can search only `TaskName` and `Duration` column values. ## Clear search by external button -You can pass the `empty` string to the `SearchAsync` method to clear the searched Gantt records from the external button. +To clear the search results in the Syncfusion® Blazor Gantt Chart from an external button, you can invoke the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SearchAsync_System_String_) method with an empty string to reset the search. {% tabs %} {% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Buttons -Clear Search - + +Clear Search + @code{ - public SfGantt Gantt; + public SfGantt GanttInstance; private List TaskCollection { get; set; } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); } + public void Clear() { - this.Gantt.SearchAsync(""); + this.GanttInstance?.SearchAsync(""); } + + private static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 7), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 10), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } + }; + return Tasks; + } + public class TaskData { public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } - public DateTime? EndDate { get; set; } + public DateTime EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public int? ParentID { get; set; } } - - public static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, - }; - return Tasks; - } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrIijNYhHCLjwYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVIstNSeXFfGxal?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +