From 95cf24b38dd9cc878dfe545b277f8d14841e618b Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 31 Jan 2022 12:32:21 +0200 Subject: [PATCH 1/5] docs: Update Grid FilterMenu KB --- .../grid-kb-only-one-filtermenu-option.md | 95 +++++++++++-------- 1 file changed, 55 insertions(+), 40 deletions(-) diff --git a/knowledge-base/grid-kb-only-one-filtermenu-option.md b/knowledge-base/grid-kb-only-one-filtermenu-option.md index 7f09f9f9ae..aab04790ec 100644 --- a/knowledge-base/grid-kb-only-one-filtermenu-option.md +++ b/knowledge-base/grid-kb-only-one-filtermenu-option.md @@ -1,12 +1,12 @@ --- title: Only one filter option in FilterMenu -description: How to leave Only one filter option in FilterMenu. +description: How to leave only one filter option in the Grid FilterMenu. Applies to the TreeList too. type: how-to page_title: Only one filter option in FilterMenu slug: grid-kb-only-one-filtermenu-option position: tags: -ticketid: 1451755 +ticketid: 1451755, 1551245 res_type: kb --- @@ -22,7 +22,7 @@ res_type: kb ## Description -I want simple filtering options in the filter menu - both for my uses and my backend. How do I remove the extra conditions so it behaves like the filter row and does not have extra and/or operators +I want simple filtering options in the Grid filter menu - both for my uses and my backend. How do I remove the extra conditions so it behaves like the filter row and does not have extra and/or operators? >caption Before and after results @@ -32,66 +32,81 @@ I want simple filtering options in the filter menu - both for my uses and my bac There are two options: -* A [custom filter template]({%slug grid-templates-filter%}) provides full flexibility, including on building the filter descriptor. This is the approach we recommend for such a scenario. +* Use a [custom filter template]({%slug grid-templates-filter%}). It provides full flexibility over the interface and building the filter descriptor. +* Use custom CSS to [override the theme]({%slug themes-override%}) and hide the elements that provide the and/or secondary conditions. The example below demonstrates this approach. Note that **the required CSS is different for different UI for Blazor versions**: -* You can use CSS to hide the elements that provide the and/or secondary conditions. An example of this is provided below. Note that the CSS rules used by the grid rendering may change and that these rules will also target all the grids on the page. +

+/* UI for Blazor 3.0+ */
+.k-filter-menu-container > span:nth-child(n+3) {
+display: none;
+}
+
+/* UI for Blazor 2.30- */
+.k-filter-menu-container > div > :nth-child(n+3) {
+display: none;
+}
+
->caption Hide And/Or filter options in FilterMenu with CSS +>caption Hide And/Or filter options in the Grid/TreeList FilterMenu with CSS ````CSHTML -@* These CSS rules hide the second component wrappers *@ +@* Hide the secondary filter interface with CSS *@ + + + + + + + + + + /* UI for Blazor 2.30- */ + .k-filter-menu-container > div > :nth-child(n+3) { + display: none; + } - - - - - - - - + @code { - public List GridData { get; set; } + List GridData { get; set; } protected override void OnInitialized() { - GridData = new List(); - var rand = new Random(); - for (int i = 0; i < 100; i++) + GridData = new List(); + var rnd = new Random(); + + for (int i = 1; i <= 15; i++) { - GridData.Add(new Employee() + GridData.Add(new Product() { - EmployeeId = i, - Name = "Employee " + i.ToString(), - AgeInYears = rand.Next(10, 80), - HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)), - IsOnLeave = i % 3 == 0 + ID = i, + Name = "Product " + i.ToString(), + Price = (decimal)rnd.Next(1, 100), + ReleaseDate = new DateTime(rnd.Next(2020, 2023), rnd.Next(1, 13), rnd.Next(1, 28)), + Discontinued = i % 4 == 0 }); } } - public class Employee + public class Product { - public int? EmployeeId { get; set; } + public int ID { get; set; } public string Name { get; set; } - public int? AgeInYears { get; set; } - public DateTime HireDate { get; set; } - public bool IsOnLeave { get; set; } + public decimal Price { get; set; } + public DateTime ReleaseDate { get; set; } + public bool Discontinued { get; set; } } } ```` From 63ea846af9a94a2abd40e78d32d26b8e4fdd5014 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Mon, 31 Jan 2022 12:42:07 +0200 Subject: [PATCH 2/5] refactor code example --- .../grid-kb-only-one-filtermenu-option.md | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/knowledge-base/grid-kb-only-one-filtermenu-option.md b/knowledge-base/grid-kb-only-one-filtermenu-option.md index aab04790ec..958bed3b68 100644 --- a/knowledge-base/grid-kb-only-one-filtermenu-option.md +++ b/knowledge-base/grid-kb-only-one-filtermenu-option.md @@ -35,17 +35,18 @@ There are two options: * Use a [custom filter template]({%slug grid-templates-filter%}). It provides full flexibility over the interface and building the filter descriptor. * Use custom CSS to [override the theme]({%slug themes-override%}) and hide the elements that provide the and/or secondary conditions. The example below demonstrates this approach. Note that **the required CSS is different for different UI for Blazor versions**: -

-/* UI for Blazor 3.0+ */
-.k-filter-menu-container > span:nth-child(n+3) {
-display: none;
-}
+    

+    ````css
+    /* UI for Blazor 3.0+ */
+    .k-filter-menu-container > span:nth-child(n+3) {
+    display: none;
+    }
 
-/* UI for Blazor 2.30- */
-.k-filter-menu-container > div > :nth-child(n+3) {
-display: none;
-}
-
+ /* UI for Blazor 2.30- */ + .k-filter-menu-container > div > :nth-child(n+3) { + display: none; + } + ```` >caption Hide And/Or filter options in the Grid/TreeList FilterMenu with CSS From 2dc11ec7bc8b946ed5ae483477fdd87de19e9f74 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Mon, 31 Jan 2022 12:50:43 +0200 Subject: [PATCH 3/5] refactor code example 2 --- .../grid-kb-only-one-filtermenu-option.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/knowledge-base/grid-kb-only-one-filtermenu-option.md b/knowledge-base/grid-kb-only-one-filtermenu-option.md index 958bed3b68..0fdfff0db5 100644 --- a/knowledge-base/grid-kb-only-one-filtermenu-option.md +++ b/knowledge-base/grid-kb-only-one-filtermenu-option.md @@ -36,17 +36,17 @@ There are two options: * Use custom CSS to [override the theme]({%slug themes-override%}) and hide the elements that provide the and/or secondary conditions. The example below demonstrates this approach. Note that **the required CSS is different for different UI for Blazor versions**:
- ````css - /* UI for Blazor 3.0+ */ - .k-filter-menu-container > span:nth-child(n+3) { - display: none; - } + ````css + /* UI for Blazor 3.0+ */ + .k-filter-menu-container > span:nth-child(n+3) { + display: none; + } - /* UI for Blazor 2.30- */ - .k-filter-menu-container > div > :nth-child(n+3) { - display: none; - } - ```` + /* UI for Blazor 2.30- */ + .k-filter-menu-container > div > :nth-child(n+3) { + display: none; + } + ```` >caption Hide And/Or filter options in the Grid/TreeList FilterMenu with CSS From bfabeb3b18c8518f983cef4b446b144b20ba2066 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Mon, 31 Jan 2022 13:01:49 +0200 Subject: [PATCH 4/5] refactor code example 3 --- knowledge-base/grid-kb-only-one-filtermenu-option.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/knowledge-base/grid-kb-only-one-filtermenu-option.md b/knowledge-base/grid-kb-only-one-filtermenu-option.md index 0fdfff0db5..64023b59bb 100644 --- a/knowledge-base/grid-kb-only-one-filtermenu-option.md +++ b/knowledge-base/grid-kb-only-one-filtermenu-option.md @@ -36,17 +36,15 @@ There are two options: * Use custom CSS to [override the theme]({%slug themes-override%}) and hide the elements that provide the and/or secondary conditions. The example below demonstrates this approach. Note that **the required CSS is different for different UI for Blazor versions**:
- ````css /* UI for Blazor 3.0+ */ .k-filter-menu-container > span:nth-child(n+3) { - display: none; + display: none; } /* UI for Blazor 2.30- */ .k-filter-menu-container > div > :nth-child(n+3) { - display: none; + display: none; } - ```` >caption Hide And/Or filter options in the Grid/TreeList FilterMenu with CSS From f1dbe97067f589806f0bb453220d036c1e8bd794 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Mon, 31 Jan 2022 13:07:57 +0200 Subject: [PATCH 5/5] refactor code example 4 --- knowledge-base/grid-kb-only-one-filtermenu-option.md | 1 + 1 file changed, 1 insertion(+) diff --git a/knowledge-base/grid-kb-only-one-filtermenu-option.md b/knowledge-base/grid-kb-only-one-filtermenu-option.md index 64023b59bb..6c161b2a93 100644 --- a/knowledge-base/grid-kb-only-one-filtermenu-option.md +++ b/knowledge-base/grid-kb-only-one-filtermenu-option.md @@ -36,6 +36,7 @@ There are two options: * Use custom CSS to [override the theme]({%slug themes-override%}) and hide the elements that provide the and/or secondary conditions. The example below demonstrates this approach. Note that **the required CSS is different for different UI for Blazor versions**:
+ /* UI for Blazor 3.0+ */ .k-filter-menu-container > span:nth-child(n+3) { display: none;