Skip to content

Commit 481a7e7

Browse files
maheshtpsmaheshtps
authored
Merge pull request #6024 from syncfusion-content/ES-959367-hf-lv
959367: Need to resolve the issues in the documentation for the Blazor ListView component.
2 parents 64a0571 + b2efa29 commit 481a7e7

18 files changed

+294
-377
lines changed

‎blazor/listview/accessibility.md

Lines changed: 131 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -78,155 +78,157 @@ The Blazor ListView component followed the [keyboard interaction](https://www.w3
7878
Id = "01",
7979
Category = "Continent",
8080
Child = new List<DataModel>() {
81-
new DataModel {
82-
Text = "India",
83-
Id = "1",
84-
Category = "Asia",
85-
Child = new List<DataModel> () {
86-
new DataModel {
87-
Id = "1001",
88-
Text = "Delhi",
89-
Category = "India"
90-
},
91-
new DataModel {
92-
Text = "Kashmir",
93-
Id = "1002",
94-
Category = "India"
95-
},
96-
new DataModel {
97-
Text = "Goa",
98-
Id = "1003",
99-
Category = "India"
100-
}
101-
}
102-
},
103-
new DataModel {
104-
Text = "China",
105-
Id = "2",
106-
Category = "Asia",
107-
Child = new List<DataModel> () {
108-
new DataModel {
109-
Text = "Zhejiang",
110-
Id = "2001",
111-
Category = "China"
112-
},
113-
new DataModel {
114-
Text = "Hunan",
115-
Id = "2002",
116-
Category = "China"
117-
},
118-
new DataModel {
119-
Text = "Shandong",
120-
Id = "2003",
121-
Category = "China"
122-
}
123-
}
81+
new DataModel {
82+
Text = "India",
83+
Id = "1",
84+
Category = "Asia",
85+
Child = new List<DataModel> () {
86+
new DataModel {
87+
Id = "1001",
88+
Text = "Delhi",
89+
Category = "India"
90+
},
91+
new DataModel {
92+
Text = "Kashmir",
93+
Id = "1002",
94+
Category = "India"
95+
},
96+
new DataModel {
97+
Text = "Goa",
98+
Id = "1003",
99+
Category = "India"
100+
}
101+
}
102+
},
103+
new DataModel {
104+
Text = "China",
105+
Id = "2",
106+
Category = "Asia",
107+
Child = new List<DataModel> () {
108+
new DataModel {
109+
Text = "Zhejiang",
110+
Id = "2001",
111+
Category = "China"
112+
},
113+
new DataModel {
114+
Text = "Hunan",
115+
Id = "2002",
116+
Category = "China"
117+
},
118+
new DataModel {
119+
Text = "Shandong",
120+
Id = "2003",
121+
Category = "China"
122+
}
124123
}
125124
}
125+
}
126126
});
127+
127128
ListData.Add(new DataModel
128129
{
129130
Text = "North America",
130131
Id = "02",
131132
Category = "Continent",
132133
Child = new List<DataModel>() {
133-
new DataModel {
134-
Text = "USA",
135-
Id = "3",
136-
Category = "North America",
137-
Child = new List<DataModel> () {
138-
new DataModel {
139-
Text = "California",
140-
Id = "3001",
141-
Category = "USA"
142-
},
143-
new DataModel {
144-
Text = "New York",
145-
Id = "3002",
146-
Category = "USA"
147-
},
148-
new DataModel {
149-
Text = "Florida",
150-
Id = "3003",
151-
Category = "USA"
152-
}
153-
}
154-
},
155-
new DataModel {
156-
Text = "Canada",
157-
Id = "4",
158-
Category = "North America",
159-
Child = new List<DataModel> () {
160-
new DataModel {
161-
Text = "Ontario",
162-
Id = "4001",
163-
Category = "Canada"
164-
},
165-
new DataModel {
166-
Text = "Alberta",
167-
Id = "4002",
168-
Category = "Canada"
169-
},
170-
new DataModel {
171-
Text = "Manitoba",
172-
Id = "4003",
173-
Category = "Canada"
174-
}
175-
}
134+
new DataModel {
135+
Text = "USA",
136+
Id = "3",
137+
Category = "North America",
138+
Child = new List<DataModel> () {
139+
new DataModel {
140+
Text = "California",
141+
Id = "3001",
142+
Category = "USA"
143+
},
144+
new DataModel {
145+
Text = "New York",
146+
Id = "3002",
147+
Category = "USA"
148+
},
149+
new DataModel {
150+
Text = "Florida",
151+
Id = "3003",
152+
Category = "USA"
153+
}
154+
}
155+
},
156+
new DataModel {
157+
Text = "Canada",
158+
Id = "4",
159+
Category = "North America",
160+
Child = new List<DataModel> () {
161+
new DataModel {
162+
Text = "Ontario",
163+
Id = "4001",
164+
Category = "Canada"
165+
},
166+
new DataModel {
167+
Text = "Alberta",
168+
Id = "4002",
169+
Category = "Canada"
170+
},
171+
new DataModel {
172+
Text = "Manitoba",
173+
Id = "4003",
174+
Category = "Canada"
175+
}
176176
}
177177
}
178+
}
178179
});
180+
179181
ListData.Add(new DataModel
180182
{
181183
Text = "Europe",
182184
Id = "03",
183185
Category = "Continent",
184186
Child = new List<DataModel>() {
185-
new DataModel {
186-
Text = "Germany",
187-
Id = "5",
188-
Category = "Europe",
189-
Child = new List<DataModel> () {
190-
new DataModel {
191-
Text = "Berlin",
192-
Id = "5001",
193-
Category = "Germany"
194-
},
195-
new DataModel {
196-
Text = "Bavaria",
197-
Id = "5002",
198-
Category = "Germany"
199-
},
200-
new DataModel {
201-
Text = "Hesse",
202-
Id = "5003",
203-
Category = "Germany"
204-
}
205-
}
206-
},
207-
new DataModel {
208-
Text = "France",
209-
Id = "6",
210-
Category = "Europe",
211-
Child = new List<DataModel> () {
212-
new DataModel {
213-
Text = "Paris",
214-
Id = "6001",
215-
Category = "France"
216-
},
217-
new DataModel {
218-
Text = "Lyon",
219-
Id = "6002",
220-
Category = "France"
221-
},
222-
new DataModel {
223-
Text = "Marseille",
224-
Id = "6003",
225-
Category = "France"
226-
}
227-
}
187+
new DataModel {
188+
Text = "Germany",
189+
Id = "5",
190+
Category = "Europe",
191+
Child = new List<DataModel> () {
192+
new DataModel {
193+
Text = "Berlin",
194+
Id = "5001",
195+
Category = "Germany"
196+
},
197+
new DataModel {
198+
Text = "Bavaria",
199+
Id = "5002",
200+
Category = "Germany"
201+
},
202+
new DataModel {
203+
Text = "Hesse",
204+
Id = "5003",
205+
Category = "Germany"
206+
}
207+
}
208+
},
209+
new DataModel {
210+
Text = "France",
211+
Id = "6",
212+
Category = "Europe",
213+
Child = new List<DataModel> () {
214+
new DataModel {
215+
Text = "Paris",
216+
Id = "6001",
217+
Category = "France"
218+
},
219+
new DataModel {
220+
Text = "Lyon",
221+
Id = "6002",
222+
Category = "France"
223+
},
224+
new DataModel {
225+
Text = "Marseille",
226+
Id = "6003",
227+
Category = "France"
228+
}
228229
}
229230
}
231+
}
230232
});
231233
}
232234

‎blazor/listview/customizing-templates.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ To customize the Blazor ListView component header, items, and group header using
1818

1919
## Header Template
2020

21-
Listview header can be customized with the help of the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_HeaderTemplate) property. To customize header template in your application, set your customized template string to `HeaderTemplate` property along with [`ShowHeader`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ShowHeader) property as `true` to display the Listview header.
21+
ListView header can be customized with the help of the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_HeaderTemplate) property. To customize header template in your application, set your customized template string to `HeaderTemplate` property along with [`ShowHeader`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ShowHeader) property as `true` to display the ListView header.
2222

2323
```cshtml
2424
@using Syncfusion.Blazor.Lists
@@ -73,11 +73,11 @@ The following built-in CSS classes can be used to customize the list-items.
7373
| ------------- |-------------|
7474
| e-list-template, e-list-wrapper | These classes are used to differentiate normal and template rendering, which are mandatory for template rendering. The `e-list-template` class should be added to the root of the ListView element and `e-list-wrapper` class should be added to the template element wrapper.
7575
| e-list-content | This class is used to align list content and it should be added to the content element. <br/><br/> `<div class="e-list-wrapper">`<br/><b>`<span class="e-list-content">ListItem</span>`</b> <br/>`</div>`|
76-
| e-list-avatar | This class is used for avatar customization. It should be added to the template element wrapper. After adding it, we can customize our element with **Avatar** classes <br/><br/> `<div class="e-list-wrapper`<b>`e-list-avatar`</b>`">` <br/> <b>`<span class="e-avatar e-avatar-circle">MR</span>`</b><br/>`<span class="e-list-content">ListItem</span>`<br/>`</div>`|
77-
| e-list-avatar-right | This class is used to align avatar to right side of the list item. It should be added to the template element wrapper. After adding it, customize the element with **Avatar** classes. <br/><br/> `<div class="e-list-wrapper`<b>`e-list-avatar-right`</b>`">` <br/> `<span class="e-list-content">ListItem</span>`<br/><b>`<span class="e-avatar e-avatar-circle">MR</span>`</b><br/> `</div>`|
78-
| e-list-badge | This class is used for badge customization. It should be added to the template element wrapper. After adding it, customize the element with **Badge** classes. <br/><br/> `<div class="e-list-wrapper`<b>`e-list-badge`</b>`">` <br/> `<span class="e-list-content">ListItem</span>`<br/><b>`<span class="e-badge e-badge-primary">MR</span>`</b><br/> `</div>`|
79-
| e-list-multi-line | This class is used for multi-line customization. It should be added to the template element wrapper. After adding it, customize List item's header and description. <br/><br/>`<div class="e-list-wrapper`<b>`e-list-multi-line`</b>`">` <br/> `<span class="e-list-content">ListItem</span>`<br/>`</div>`|
80-
| e-list-item-header | This class is used to align a list header and it should be added to the header element along with the multi-line class. <br/><br/> `<div class="e-list-wrapper`<b>`e-list-multi-line`</b>`">`<br/> <b>`<span class="e-list-item-header">ListItem Header</span>`</b><br/> `<span class="e-list-content">ListItem</span>`<br/>`</div>`|
76+
| e-list-avatar | This class is used for avatar customization. It should be added to the template element wrapper. After adding it, we can customize our element with **Avatar** classes <br/><br/> `<div class="e-list-wrapper e-list-avatar">` <br/> <b>`<span class="e-avatar e-avatar-circle">MR</span>`</b><br/>`<span class="e-list-content">ListItem</span>`<br/>`</div>`|
77+
| e-list-avatar-right | This class is used to align avatar to right side of the list item. It should be added to the template element wrapper. After adding it, customize the element with **Avatar** classes. <br/><br/> `<div class="e-list-wrapper e-list-avatar-right">` <br/> `<span class="e-list-content">ListItem</span>`<br/><b>`<span class="e-avatar e-avatar-circle">MR</span>`</b><br/> `</div>`|
78+
| e-list-badge | This class is used for badge customization. It should be added to the template element wrapper. After adding it, customize the element with **Badge** classes. <br/><br/> `<div class="e-list-wrapper e-list-badge">` <br/> `<span class="e-list-content">ListItem</span>`<br/><b>`<span class="e-badge e-badge-primary">MR</span>`</b><br/> `</div>`|
79+
| e-list-multi-line | This class is used for multi-line customization. It should be added to the template element wrapper. After adding it, customize List item's header and description. <br/><br/>`<div class="e-list-wrapper e-list-multi-line">` <br/> `<span class="e-list-content">ListItem</span>`<br/>`</div>`|
80+
| e-list-item-header | This class is used to align a list header and it should be added to the header element along with the multi-line class. <br/><br/> `<div class="e-list-wrapper e-list-multi-line">`<br/> <b>`<span class="e-list-item-header">ListItem Header</span>`</b><br/> `<span class="e-list-content">ListItem</span>`<br/>`</div>`|
8181

8282

8383
```cshtml
@@ -238,7 +238,7 @@ The following built-in CSS classes can be used to customize the list-items.
238238

239239
ListView group header can be customized with the help of the [`GroupTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_GroupTemplate) property. To customize the group template in the application, set the customized template string to `GroupTemplate` property.
240240

241-
In the following example, Listview is grouped based on the category. The category of each list item should be mapped with [`GroupBy`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) field of the data. The grouped list items have also displayed count in the group list header.
241+
In the following example, ListView is grouped based on the category. The category of each list item should be mapped with [`GroupBy`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) field of the data. The grouped list items have also displayed count in the group list header.
242242

243243
```cshtml
244244
@using Syncfusion.Blazor.Lists

0 commit comments

Comments
 (0)