You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [`ShowColumnChooser`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnChooser) as true.
14
-
15
-
{% if page.publishingplatform == "aspnet-core" %}
13
+
The column chooser feature in the Syncfusion ASP.NET MVC Grid component allows you to dynamically show or hide columns. This feature can be enabled by defining the [ShowColumnChooser](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ShowColumnChooser) property as **true**.
16
14
17
15
{% tabs %}
18
16
{% highlight cshtml tabtitle="CSHTML" %}
19
-
{% include code-snippet/grid/columns/columnchooser/tagHelper %}
17
+
{% include code-snippet/grid/columns/columnchooser/razor %}
20
18
{% endhighlight %}
21
19
{% highlight c# tabtitle="Columnchooser.cs" %}
22
20
{% include code-snippet/grid/columns/columnchooser/columnchooser.cs %}
> The column chooser dialog displays the header text of each column by default. If the header text is not defined for a column, the corresponding column field name is displayed instead.
27
+
28
+
## Hide column in column chooser dialog
29
+
30
+
You can hide the column names in column chooser by defining the `Columns.ShowInColumnChooser` as **false**. This feature is useful when working with a large number of columns or when you want to limit the number of columns that are available for selection in the column chooser dialog.
31
+
32
+
In this example, the `Columns.ShowInColumnChooser` property is set to **false** for the **Order ID** column. As a result, the **Order ID** column will not be displayed in the column chooser dialog.
27
33
28
34
{% tabs %}
29
-
{% highlight razor tabtitle="CSHTML" %}
30
-
{% include code-snippet/grid/columns/columnchooser/razor %}
35
+
{% highlight cshtml tabtitle="CSHTML" %}
36
+
{% include code-snippet/grid/columns/columnchooser-hide/razor %}
31
37
{% endhighlight %}
32
38
{% highlight c# tabtitle="Columnchooser.cs" %}
33
-
{% include code-snippet/grid/columns/columnchooser/columnchooser.cs %}
39
+
{% include code-snippet/grid/columns/columnchooser-hide/columnchooser.cs %}
34
40
{% endhighlight %}
35
41
{% endtabs %}
36
-
{% endif %}
37
42
43
+
38
44
45
+
>The `Columns.ShowInColumnChooser` property is applied to each column element individually. By setting it to **false**, you can hide specific columns from the column chooser dialog.
39
46
40
-
N> You can hide the column names in column chooser by defining the [`ShowInColumnChooser`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_ShowInColumnChooser) as false.
47
+
## Open column chooser by externally
48
+
49
+
The Syncfusion ASP.NET MVC Grid provides the flexibility to open the column chooser dialog on a web page using an external button. By default, the column chooser button is displayed in the right corner of the grid component, and clicking the button opens the column chooser dialog below it. However, you can programmatically open the column chooser dialog at specific **X** and **Y** axis positions by using the `openColumnChooser` method.
50
+
51
+
Here's an example of how to open the column chooser in the Grid using an external button:
52
+
53
+
{% tabs %}
54
+
{% highlight cshtml tabtitle="CSHTML" %}
55
+
{% include code-snippet/grid/columns/columnchooser-external/razor %}
56
+
{% endhighlight %}
57
+
{% highlight c# tabtitle="Columnchooser.cs" %}
58
+
{% include code-snippet/grid/columns/columnchooser-external/columnchooser.cs %}
59
+
{% endhighlight %}
60
+
{% endtabs %}
41
61
42
-
## Open column chooser by external button
62
+
43
63
44
-
The Column chooser can be displayed on a page through external button by invoking the **openColumnChooser** method with X and Y axis positions.
64
+
## Customize column chooser dialog size
65
+
66
+
The column chooser dialog in Syncfusion ASP.NET MVC Grid comes with default size, but you can modify its height and width as per your specific needs using CSS styles.
67
+
To customize the column chooser dialog size, you can use the following CSS styles:
45
68
46
-
{% if page.publishingplatform == "aspnet-core" %}
69
+
```css
70
+
.e-grid.e-dialog.e-ccdlg {
71
+
height: 500px;
72
+
width: 200px;
73
+
}
74
+
.e-grid.e-ccdlg.e-cc-contentdiv {
75
+
height: 200px;
76
+
width: 230px;
77
+
}
78
+
```
47
79
48
80
{% tabs %}
49
81
{% highlight cshtml tabtitle="CSHTML" %}
50
-
{% include code-snippet/grid/columns/externalbutton/tagHelper %}
82
+
{% include code-snippet/grid/columns/columnchooser-size/razor %}
51
83
{% endhighlight %}
52
-
{% highlight c# tabtitle="Externalbutton.cs" %}
53
-
{% include code-snippet/grid/columns/externalbutton/externalbutton.cs %}
84
+
{% highlight c# tabtitle="Columnchooser.cs" %}
85
+
{% include code-snippet/grid/columns/columnchooser-size/columnchooser.cs %}
## Change default search operator of the column chooser
92
+
93
+
The column chooser dialog in the Syncfusion ASP.NET MVC Grid provides a search box that allows you to search for column names. By default, the search functionality uses the "startsWith" operator to match columns and display the results in the column chooser dialog. However, there might be cases where you need to change the default search operator to achieve more precise data matching.
94
+
95
+
To change the default search operator of the column chooser in Syncfusion Grid, you need to use the [operator](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumnChooserSettings.html#Syncfusion_EJ2_Grids_GridColumnChooserSettings_Operator) property of the columnChooserSettings.
96
+
97
+
Here's an example of how to change the default search operator of the column chooser to **contains** in the ASP.NET MVC Grid:
58
98
59
99
{% tabs %}
60
-
{% highlight razor tabtitle="CSHTML" %}
61
-
{% include code-snippet/grid/columns/externalbutton/razor %}
100
+
{% highlight cshtml tabtitle="CSHTML" %}
101
+
{% include code-snippet/grid/columns/columnchooser-contains/razor %}
62
102
{% endhighlight %}
63
-
{% highlight c# tabtitle="Externalbutton.cs" %}
64
-
{% include code-snippet/grid/columns/externalbutton/externalbutton.cs %}
103
+
{% highlight c# tabtitle="Columnchooser.cs" %}
104
+
{% include code-snippet/grid/columns/columnchooser-contains/columnchooser.cs %}
65
105
{% endhighlight %}
66
106
{% endtabs %}
67
-
{% endif %}
68
107
108
+
109
+
110
+
## Diacritics searching in column chooser
111
+
112
+
By default, the grid ignores diacritic characters when performing a search in the column chooser. However, in some cases, you may want to include diacritic characters in the search. To enable this behavior, you can set the [Columnchoosersettings.IgnoreAccent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumnChooserSettings.html#Syncfusion_EJ2_Grids_GridColumnChooserSettings_IgnoreAccent) property to **true**.
113
+
114
+
Here is an example that demonstrates the usage of the `IgnoreAccent` property to include diacritic characters for searching in the column chooser:
115
+
116
+
{% tabs %}
117
+
{% highlight cshtml tabtitle="CSHTML" %}
118
+
{% include code-snippet/grid/columns/columnchooser-diacritics/razor %}
119
+
{% endhighlight %}
120
+
{% highlight c# tabtitle="Columnchooser.cs" %}
121
+
{% include code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs %}
122
+
{% endhighlight %}
123
+
{% endtabs %}
69
124
125
+
The Syncfusion ##Platform_Name## Grid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid.
13
+
The Syncfusion ASP.NET MVC Grid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid.
14
14
15
15
## Header text
16
16
17
-
The `HeaderText` feature proves particularly beneficial when there is a need for more meaningful and descriptive column headers in the Syncfusion ##Platform_Name## Grid component.
17
+
The `HeaderText` feature proves particularly beneficial when there is a need for more meaningful and descriptive column headers in the Syncfusion ASP.NET MVC Grid component.
18
18
19
19
By default, the header text of a column in Grid is displayed from the column's `Field` value. However, you can easily override the default header title and provide a custom header text for the column using the `HeaderText` property.
20
20
@@ -37,9 +37,9 @@ To enable the `HeaderText` property, you simply need to define it in the **e-gri
37
37
38
38
## Header template
39
39
40
-
The header template feature in the Syncfusion ##Platform_Name## Grid component allows you to create custom header layouts and content, providing enhanced functionality such as sorting or filtering.
40
+
The header template feature in the Syncfusion ASP.NET MVC Grid component allows you to create custom header layouts and content, providing enhanced functionality such as sorting or filtering.
41
41
42
-
To implement a header template, set the `HeaderTemplate` property within a specific column definition. This allows you to render custom HTML elements or ##Platform_Name## components to the header.
42
+
To implement a header template, set the `HeaderTemplate` property within a specific column definition. This allows you to render custom HTML elements or ASP.NET MVC components to the header.
43
43
44
44
The following example demonstrate, the custom element is rendered for both **CustomerID**,**Freight** and **OrderDate** column headers.
45
45
@@ -55,13 +55,13 @@ The following example demonstrate, the custom element is rendered for both **Cus
>* The `HeaderTemplate` property is only applicable to Grid columns that have a header element.
58
-
>* You can use any HTML or ##Platform_Name## component in the header template to add additional functionality to the header element.
58
+
>* You can use any HTML or ASP.NET MVC component in the header template to add additional functionality to the header element.
59
59
60
60
## Stacked header
61
61
62
62
In Grid, you can group multiple levels of column headers by stacking the Grid columns. This feature allows you to organize the Grid columns in a more structured and understandable way. This can be achieved by setting the [columns->columns](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Columns) property. Within this property, you can define an array of column objects to group together as sub-headers under a main header. You can define the `HeaderText` property of each sub-header column to set the text for that sub-header.
63
63
64
-
You can customize the appearance of the stacked header elements by using the `HeaderTemplate` property. This allows you to render custom HTML elements or ##Platform_Name## components to the header.
64
+
You can customize the appearance of the stacked header elements by using the `HeaderTemplate` property. This allows you to render custom HTML elements or ASP.NET MVC components to the header.
65
65
66
66
Here's an example of how to use stacked headers with a custom `HeaderTemplate` in Syncfusion Grid.
67
67
@@ -307,7 +307,7 @@ Here's an example of how to use the `BeforeRender` event to add a custom tooltip
307
307
308
308
## Customize header text styles
309
309
310
-
Customizing the grid header styles allows you to modify the appearance of the column header in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion ##Platform_Name## Grid component.
310
+
Customizing the grid header styles allows you to modify the appearance of the column header in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion ASP.NET MVC Grid component.
311
311
312
312
### Using CSS
313
313
@@ -414,7 +414,7 @@ The following example demonstrates how to add a `HeaderCellInfo` event handler t
414
414
415
415
## How to refresh header
416
416
417
-
The refresh header feature in the Syncfusion ##Platform_Name## Grid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment.
417
+
The refresh header feature in the Syncfusion ASP.NET MVC Grid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment.
418
418
419
419
To use the refresh header feature, you can call the `refreshHeader` method of the Grid component. This method updates the grid header with the latest changes made to the columns.
0 commit comments