Skip to content

959367: Need to resolve the issues in the documentation for the Blazor ListView component. #6024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 29, 2025
Merged

959367: Need to resolve the issues in the documentation for the Blazor ListView component. #6024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0ea2d15
959367: Need to resolve the issues in the documentation for the Blazo…
PrasanthMadhaiyan May 20, 2025
0ae497b
959367: Need to resolve the issues in the documentation for the Blazo…
PrasanthMadhaiyan May 20, 2025
abb4157
Merge branch 'hotfix/hotfix-v29.2.4' into ES-959367-hf-lv
PrasanthMadhaiyan May 20, 2025
6247e98
Merge branch 'hotfix/hotfix-v29.2.4' into ES-959367-hf-lv
PrasanthMadhaiyan May 22, 2025
464359a
959367: Need to resolve the issues in the documentation for the Blazo…
PrasanthMadhaiyan May 22, 2025
b2efa29
959367: Need to resolve the issues in the documentation for the Blazo…
PrasanthMadhaiyan May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
260 changes: 131 additions & 129 deletions blazor/listview/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,155 +78,157 @@ The Blazor ListView component followed the [keyboard interaction](https://www.w3
Id = "01",
Category = "Continent",
Child = new List<DataModel>() {
new DataModel {
Text = "India",
Id = "1",
Category = "Asia",
Child = new List<DataModel> () {
new DataModel {
Id = "1001",
Text = "Delhi",
Category = "India"
},
new DataModel {
Text = "Kashmir",
Id = "1002",
Category = "India"
},
new DataModel {
Text = "Goa",
Id = "1003",
Category = "India"
}
}
},
new DataModel {
Text = "China",
Id = "2",
Category = "Asia",
Child = new List<DataModel> () {
new DataModel {
Text = "Zhejiang",
Id = "2001",
Category = "China"
},
new DataModel {
Text = "Hunan",
Id = "2002",
Category = "China"
},
new DataModel {
Text = "Shandong",
Id = "2003",
Category = "China"
}
}
new DataModel {
Text = "India",
Id = "1",
Category = "Asia",
Child = new List<DataModel> () {
new DataModel {
Id = "1001",
Text = "Delhi",
Category = "India"
},
new DataModel {
Text = "Kashmir",
Id = "1002",
Category = "India"
},
new DataModel {
Text = "Goa",
Id = "1003",
Category = "India"
}
}
},
new DataModel {
Text = "China",
Id = "2",
Category = "Asia",
Child = new List<DataModel> () {
new DataModel {
Text = "Zhejiang",
Id = "2001",
Category = "China"
},
new DataModel {
Text = "Hunan",
Id = "2002",
Category = "China"
},
new DataModel {
Text = "Shandong",
Id = "2003",
Category = "China"
}
}
}
}
});

ListData.Add(new DataModel
{
Text = "North America",
Id = "02",
Category = "Continent",
Child = new List<DataModel>() {
new DataModel {
Text = "USA",
Id = "3",
Category = "North America",
Child = new List<DataModel> () {
new DataModel {
Text = "California",
Id = "3001",
Category = "USA"
},
new DataModel {
Text = "New York",
Id = "3002",
Category = "USA"
},
new DataModel {
Text = "Florida",
Id = "3003",
Category = "USA"
}
}
},
new DataModel {
Text = "Canada",
Id = "4",
Category = "North America",
Child = new List<DataModel> () {
new DataModel {
Text = "Ontario",
Id = "4001",
Category = "Canada"
},
new DataModel {
Text = "Alberta",
Id = "4002",
Category = "Canada"
},
new DataModel {
Text = "Manitoba",
Id = "4003",
Category = "Canada"
}
}
new DataModel {
Text = "USA",
Id = "3",
Category = "North America",
Child = new List<DataModel> () {
new DataModel {
Text = "California",
Id = "3001",
Category = "USA"
},
new DataModel {
Text = "New York",
Id = "3002",
Category = "USA"
},
new DataModel {
Text = "Florida",
Id = "3003",
Category = "USA"
}
}
},
new DataModel {
Text = "Canada",
Id = "4",
Category = "North America",
Child = new List<DataModel> () {
new DataModel {
Text = "Ontario",
Id = "4001",
Category = "Canada"
},
new DataModel {
Text = "Alberta",
Id = "4002",
Category = "Canada"
},
new DataModel {
Text = "Manitoba",
Id = "4003",
Category = "Canada"
}
}
}
}
});

ListData.Add(new DataModel
{
Text = "Europe",
Id = "03",
Category = "Continent",
Child = new List<DataModel>() {
new DataModel {
Text = "Germany",
Id = "5",
Category = "Europe",
Child = new List<DataModel> () {
new DataModel {
Text = "Berlin",
Id = "5001",
Category = "Germany"
},
new DataModel {
Text = "Bavaria",
Id = "5002",
Category = "Germany"
},
new DataModel {
Text = "Hesse",
Id = "5003",
Category = "Germany"
}
}
},
new DataModel {
Text = "France",
Id = "6",
Category = "Europe",
Child = new List<DataModel> () {
new DataModel {
Text = "Paris",
Id = "6001",
Category = "France"
},
new DataModel {
Text = "Lyon",
Id = "6002",
Category = "France"
},
new DataModel {
Text = "Marseille",
Id = "6003",
Category = "France"
}
}
new DataModel {
Text = "Germany",
Id = "5",
Category = "Europe",
Child = new List<DataModel> () {
new DataModel {
Text = "Berlin",
Id = "5001",
Category = "Germany"
},
new DataModel {
Text = "Bavaria",
Id = "5002",
Category = "Germany"
},
new DataModel {
Text = "Hesse",
Id = "5003",
Category = "Germany"
}
}
},
new DataModel {
Text = "France",
Id = "6",
Category = "Europe",
Child = new List<DataModel> () {
new DataModel {
Text = "Paris",
Id = "6001",
Category = "France"
},
new DataModel {
Text = "Lyon",
Id = "6002",
Category = "France"
},
new DataModel {
Text = "Marseille",
Id = "6003",
Category = "France"
}
}
}
}
});
}

Expand Down
14 changes: 7 additions & 7 deletions blazor/listview/customizing-templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ To customize the Blazor ListView component header, items, and group header using

## Header Template

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.
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.

```cshtml
@using Syncfusion.Blazor.Lists
Expand Down Expand Up @@ -73,11 +73,11 @@ The following built-in CSS classes can be used to customize the list-items.
| ------------- |-------------|
| 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.
| 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>`|
| 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>`|
| 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>`|
| 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>`|
| 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>`|
| 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>`|
| 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>`|
| 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>`|
| 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>`|
| 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>`|
| 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>`|


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

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.

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.
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.

```cshtml
@using Syncfusion.Blazor.Lists
Expand Down
Loading