Skip to content

Commit c6a0f28

Browse files
MalleshRavichandranMalleshRavichandran
committed
910110: Update the grid settings section in Multi column documentation.
1 parent e2e7a36 commit c6a0f28

File tree

8 files changed

+277
-7
lines changed

8 files changed

+277
-7
lines changed

‎blazor-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3434,6 +3434,7 @@
34343434
<li> <a href="/blazor/multicolumn-combobox/style">Style and Appearance</a></li>
34353435
<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
34363436
<li><a href="/blazor/multicolumn-combobox/localization">Localization</a></li>
3437+
<li><a href="/blazor/multicolumn-combobox/grid-settings">Grid Settings</a></li>
34373438
<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>
34383439
<li> <a href="/blazor/multicolumn-combobox/form-validation">Form Validation</a></li>
34393440
</ul>

‎blazor/multicolumn-combobox/code-snippet/column/column-template.razor

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox TItem="Employee" TValue="string" AllowFiltering="true" PopupWidth="650px"
4+
@bind-Value="@Value" DataSource="@Employees" ValueField="Name"
5+
TextField="Name" Placeholder="Select an employee" Width="250px">
6+
<MultiColumnComboboxColumns>
7+
<MultiColumnComboboxColumn Field="EmployeeID" Width="80px">
8+
<Template>
9+
@{
10+
var EmployeeInfo = (context as Employee);
11+
<div class="image">
12+
<img src="./images/employees/@EmployeeInfo.EmployeeID" alt="@EmployeeInfo.EmployeeID" />
13+
</div>
14+
}
15+
</Template>
16+
</MultiColumnComboboxColumn>
17+
<MultiColumnComboboxColumn Field="Name" Width="120px">
18+
<Template>
19+
@{
20+
var EmployeeInfo = (context as Employee);
21+
<div class="ename"> @EmployeeInfo.Name </div>
22+
<div class="job"> @EmployeeInfo.Role </div>
23+
}
24+
</Template>
25+
</MultiColumnComboboxColumn>
26+
<MultiColumnComboboxColumn Field="Department" Width="80px" />
27+
<MultiColumnComboboxColumn Field="Experience" Width="80px" />
28+
<MultiColumnComboboxColumn Field="Location" Width="80px" />
29+
</MultiColumnComboboxColumns>
30+
</SfMultiColumnComboBox>
31+
32+
@code {
33+
public class Employee
34+
{
35+
public string Name { get; set; }
36+
public string Department { get; set; }
37+
public string Role { get; set; }
38+
public string Location { get; set; }
39+
public int Experience { get; set; }
40+
public int EmployeeID { get; set; }
41+
}
42+
43+
private string Value { get; set; } = "Alice Johnson";
44+
45+
private List<Employee> Employees = new List<Employee>();
46+
47+
protected override Task OnInitializedAsync()
48+
{
49+
Employees = new List<Employee>
50+
{
51+
new Employee
52+
{
53+
Name = "Alice Johnson",
54+
Department = "Engineering",
55+
Role = "Software Engineer",
56+
Location = "New York",
57+
Experience = 5,
58+
EmployeeID = 1
59+
},
60+
new Employee
61+
{
62+
Name = "Bob Smith",
63+
Department = "Marketing",
64+
Role = "Marketing Manager",
65+
Location = "San Francisco",
66+
Experience = 7,
67+
EmployeeID = 7
68+
},
69+
new Employee
70+
{
71+
Name = "Catherine Lee",
72+
Department = "Finance",
73+
Role = "Financial Analyst",
74+
Location = "Chicago",
75+
Experience = 4,
76+
EmployeeID = 3
77+
},
78+
new Employee
79+
{
80+
Name = "David Kim",
81+
Department = "Engineering",
82+
Role = "DevOps Engineer",
83+
Location = "Austin",
84+
Experience = 6,
85+
EmployeeID = 8
86+
},
87+
new Employee
88+
{
89+
Name = "Eva Brown",
90+
Department = "Sales",
91+
Role = "Sales Executive",
92+
Location = "Boston",
93+
Experience = 3,
94+
EmployeeID = 5
95+
},
96+
new Employee
97+
{
98+
Name = "Frank White",
99+
Department = "Human Resources",
100+
Role = "HR Manager",
101+
Location = "Seattle",
102+
Experience = 8,
103+
EmployeeID = 9
104+
},
105+
new Employee
106+
{
107+
Name = "Grace Green",
108+
Department = "Design",
109+
Role = "UX Designer",
110+
Location = "Los Angeles",
111+
Experience = 5,
112+
EmployeeID = 2
113+
},
114+
new Employee
115+
{
116+
Name = "Hank Wilson",
117+
Department = "Engineering",
118+
Role = "Product Manager",
119+
Location = "Denver",
120+
Experience = 24,
121+
EmployeeID = 10
122+
}
123+
};
124+
125+
return base.OnInitializedAsync();
126+
}
127+
}
128+
129+
<style>
130+
131+
.control-wrapper {
132+
max-width: 250px;
133+
padding: 30px 0px 0px;
134+
margin: 0 auto;
135+
}
136+
137+
.example-label {
138+
font-size: 14px;
139+
margin-bottom: 6px;
140+
}
141+
142+
@@font-face {
143+
font-family: 'ej2-headertemplate';
144+
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
145+
font-weight: normal;
146+
font-style: normal;
147+
}
148+
149+
.e-grid .e-icon-userlogin::before, .e-grid .e-icon-calender::before {
150+
font-family: 'ej2-headertemplate';
151+
width: 15px !important;
152+
}
153+
154+
.e-grid .e-icon-userlogin::before {
155+
content: '\e702';
156+
}
157+
158+
.e-grid .e-icon-calender::before {
159+
content: '\e960';
160+
}
161+
162+
.e-multicolumn-list .ename {
163+
display: block !important;
164+
opacity: .87;
165+
font-size: 16px;
166+
margin-top: 8px;
167+
}
168+
169+
.e-multicolumn-list .job {
170+
opacity: .54;
171+
font-size: 14px;
172+
margin-top: 15px;
173+
margin-bottom: 7px;
174+
}
175+
</style>

‎blazor/multicolumn-combobox/code-snippet/grid-settings/allow-column-resizing.razor

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" AllowColumnResizing="true" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
4+
5+
@code {
6+
public class Product
7+
{
8+
public string Name { get; set; }
9+
public decimal Price { get; set; }
10+
public string Availability { get; set; }
11+
public string Category { get; set; }
12+
public double Rating { get; set; }
13+
}
14+
private List<Product> Products = new List<Product>();
15+
private string Value { get; set; } = "Smartphone";
16+
protected override Task OnInitializedAsync()
17+
{
18+
Products = new List<Product>
19+
{
20+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
21+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
22+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }
23+
};
24+
return base.OnInitializedAsync();
25+
}
26+
}

‎blazor/multicolumn-combobox/code-snippet/grid-settings/gridlines.razor

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" GridLines="GridLine.Both" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
4+
5+
@code {
6+
public class Product
7+
{
8+
public string Name { get; set; }
9+
public decimal Price { get; set; }
10+
public string Availability { get; set; }
11+
public string Category { get; set; }
12+
public double Rating { get; set; }
13+
}
14+
private List<Product> Products = new List<Product>();
15+
private string Value { get; set; } = "Smartphone";
16+
protected override Task OnInitializedAsync()
17+
{
18+
Products = new List<Product>
19+
{
20+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
21+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
22+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }
23+
};
24+
return base.OnInitializedAsync();
25+
}
26+
}

‎blazor/multicolumn-combobox/column.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Configuring the Columns
1111

12-
## Setting the Text Align
12+
## Setting the text align
1313

1414
The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can customize the column header text to reflect specific data, adjust the column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Width) for optimal display, and set the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_TextAlign) (left, center, or right) to enhance readability.
1515

@@ -23,15 +23,23 @@ The MultiColumn ComboBox supports auto-generating columns, which simplifies the
2323

2424
![Blazor MultiColumn ComboBox with Text align](./images/column/blazor_multicolumn_combobox_column-text-align.gif)
2525

26-
## Setting the Template
26+
## Setting the column template
2727

28-
The MultiColumn ComboBox supports [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Template) within the column, allowing you to define a column template that renders a customized element in each cell.
28+
The MultiColumn ComboBox supports [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Template) within the column, allowing you to define a column template that renders a customized element in each cell.|
29+
30+
In the following sample, defines how to use `Template` inside the column.
31+
32+
{% highlight cshtml %}
33+
34+
{% include_relative code-snippet/column/column-template.razor %}
35+
36+
{% endhighlight %}
2937

3038
## Header template
3139

3240
The [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_HeaderTemplate) of the MultiColumn ComboBox component used to customize the header element of a MultiColumn. With this property, you can render custom HTML elements or Blazor components to the header element. This feature allows you to add more functionality to the header, such as sorting or filtering.
3341

34-
In the following sample, defines how to use `Template` and `HeaderTemplate`.
42+
In the following sample, defines how to use `HeaderTemplate`.
3543

3644
{% highlight cshtml %}
3745

@@ -41,7 +49,7 @@ In the following sample, defines how to use `Template` and `HeaderTemplate`.
4149

4250
![Blazor MultiColumn ComboBox with Column header](./images/column/blazor_multicolumn_combobox_column-header.gif)
4351

44-
## Setting Display As CheckBox
52+
## Setting display as checkbox
4553

4654
The MultiColumn ComboBox component allows you to render boolean values as checkboxes in columns. This can be achieved by using the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_DisplayAsCheckBox) property. This property is useful when you have a boolean column in your MultiColumn ComboBox and you want to display the values as checkboxes instead of the default text representation of **true** or **false**.
4755

‎blazor/multicolumn-combobox/grid-settings.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
layout: post
3+
title: Grid settings with Syncfusion Blazor MultiColumn ComboBox
4+
description: Checkout and learn here all about Gridlines in Syncfusion Blazor MultiColumn ComboBox component and much more details.
5+
platform: Blazor
6+
control: MultiColumn ComboBox
7+
documentation: ug
8+
---
9+
10+
# Grid Settings in Blazor MultiColumn ComboBox Component
11+
12+
## Setting the grid lines
13+
14+
Grid lines refer to the visual lines displayed between rows and columns in a grid-like structure. You can customize how these lines appear by using the [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GridLines) property. This allows for control over the visibility of horizontal, vertical, both, or no grid lines at all. The default value is Default.
15+
16+
The following example configures the GridLines property to show both horizontal and vertical lines in the dropdown popup.
17+
18+
{% highlight cshtml %}
19+
20+
{% include_relative code-snippet/grid-settings/gridlines.razor %}
21+
22+
{% endhighlight %}
23+
24+
## Setting AllowColumnResizing
25+
26+
The Column resizing allows users to adjust the width of columns in the MultiColumn ComboBox by dragging the edge of the column header. The [AllowColumnResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowColumnResizing) property. This property is useful for providing flexibility in adjusting the grid layout based on user preferences.
27+
28+
The following example enables column resizing, allowing users to adjust the width of the columns by dragging the header edges.
29+
30+
{% highlight cshtml %}
31+
32+
{% include_relative code-snippet/grid-settings/allow-column-resizing.razor %}
33+
34+
{% endhighlight %}

‎blazor/multicolumn-combobox/paging.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ To enable paging, you need to set the [AllowPaging](https://help.syncfusion.com/
1515

1616
## Customize the pager options
1717

18-
Customizing the pager options in the Syncfusion MultiColumn ComboBox allows you to tailor the pagination control according to your specific requirements. You can customize the pager to display the number of pages using the `PageCount` property and display the number of records in the MultiColumn ComboBox using the `PageSize` property.
18+
Customizing the pager options in the Syncfusion MultiColumn ComboBox allows you to tailor the pagination control according to your specific requirements. You can customize the pager to display the number of pages using the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PageCount) property and display the number of records in the MultiColumn ComboBox using the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PageSize) property.
1919

2020
### Change the page size
2121

‎blazor/multicolumn-combobox/placeholder-and-floatlabel.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C
4747

4848
![Blazor ComboBox with mandatory indicator placeholder](./images/placeholder-and-floatlabel/blazor_combobox_placeholder-with-mandatory.png)
4949

50-
## FloatLabel
50+
## Floating label
5151

5252
Use the [FloatLabelType]() property to define how the floating label behaves in the DropDownList, allowing the `Placeholder` text to float above the TextBox. This functionality is relevant only when a `Placeholder` is present. The `FloatLabelType` depends on the `Placeholder` setting, with its default value being `Never`.
5353

0 commit comments

Comments
 (0)