From 89b416e32d0477645c272ea1ce592617d8f22c96 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 7c4fe6db9f5c4a00d72cea2c9e5df6caad03c972 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 24fd699721ef8674bff2e9d77e371da4ea4642c2 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 352a9bfff76f5bd8d45710591a5b8e3eb7933b81 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 acf65804d14bf2fefabbb8d292d13207294d4e74 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;