From 082259ee53da3b01f2973dc5f49817dc1c588f05 Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Tue, 6 Aug 2024 12:21:30 +0000
Subject: [PATCH 1/2] Added new kb article
 listview-kb-display-items-horizontally

---
 .../listview-kb-display-items-horizontally.md | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 knowledge-base/listview-kb-display-items-horizontally.md

diff --git a/knowledge-base/listview-kb-display-items-horizontally.md b/knowledge-base/listview-kb-display-items-horizontally.md
new file mode 100644
index 0000000000..410500db90
--- /dev/null
+++ b/knowledge-base/listview-kb-display-items-horizontally.md
@@ -0,0 +1,80 @@
+---
+title: Displaying ListView Items Horizontally in Blazor
+description: Learn how to arrange the items in a TelerikListView for Blazor horizontally using custom CSS styles.
+type: how-to
+page_title: How to Arrange Telerik Blazor ListView Items Horizontally
+slug: listview-kb-display-items-horizontally
+tags: listview, blazor, layout, horizontal, css, styling
+res_type: kb
+ticketid: 1649286
+---
+
+## Environment
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>ListView for Blazor</td>
+	    </tr>
+    </tbody>
+</table>
+
+## Description
+
+I want to display the items in the TelerikListView component horizontally.
+
+This KB article answers the following questions:
+- How to set the TelerikListView to horizontal?
+- Is it possible to display ListView items side by side in Blazor?
+
+## Solution
+
+To display the ListView items horizontally, apply the `display: inline-block;` CSS style to the `k-listview-item` HTML div element. This approach allows you to customize the appearance of each ListView item and arrange them side by side.
+
+`````CSHTML
+<style>
+    .horizontal-listview .k-listview-item {
+        height: 150px;
+        width: 150px;
+        display: inline-block;
+        margin: 10px;
+        border: 1px solid black;
+        border-radius: 10px;
+        padding: 10px;
+    }
+</style>
+
+<TelerikListView Data="@ListViewData"
+                 Class="horizontal-listview"
+                 Width="700px" 
+                 Pageable="true" 
+                 PageSize="4">
+    <HeaderTemplate>
+        <h2>Employee List</h2>
+    </HeaderTemplate>
+    <Template>
+        <h4>@context.Name</h4>
+        <h5>@context.Team</h5>
+    </Template>
+</TelerikListView>
+
+@code {
+    private List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 25).Select(x => new SampleData
+    {
+        Id = x,
+        Name = $"Name {x}",
+        Team = $"Team {x % 3}"
+    }).ToList();
+
+    public class SampleData
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+        public string Team { get; set; }
+    }
+}
+`````
+
+## See Also
+- [TelerikListView for Blazor - Overview](https://docs.telerik.com/blazor-ui/components/listview/overview)
+- [TelerikListView for Blazor - Templates](https://docs.telerik.com/blazor-ui/components/listview/templates)

From 396d2a602f40fe10159942029d88ffe2850596ac Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <Hristian.Stefanov@progress.com>
Date: Wed, 7 Aug 2024 11:51:15 +0300
Subject: [PATCH 2/2] docs(listview): apply suggestions

---
 .../listview-kb-display-items-horizontally.md        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/knowledge-base/listview-kb-display-items-horizontally.md b/knowledge-base/listview-kb-display-items-horizontally.md
index 410500db90..8dd573f6e2 100644
--- a/knowledge-base/listview-kb-display-items-horizontally.md
+++ b/knowledge-base/listview-kb-display-items-horizontally.md
@@ -1,10 +1,10 @@
 ---
-title: Displaying ListView Items Horizontally in Blazor
+title: Display ListView Items Horizontally in Blazor
 description: Learn how to arrange the items in a TelerikListView for Blazor horizontally using custom CSS styles.
 type: how-to
 page_title: How to Arrange Telerik Blazor ListView Items Horizontally
 slug: listview-kb-display-items-horizontally
-tags: listview, blazor, layout, horizontal, css, styling
+tags: listview, blazor, layout, css, styling
 res_type: kb
 ticketid: 1649286
 ---
@@ -24,7 +24,7 @@ ticketid: 1649286
 I want to display the items in the TelerikListView component horizontally.
 
 This KB article answers the following questions:
-- How to set the TelerikListView to horizontal?
+- How to set the TelerikListView layout to horizontal?
 - Is it possible to display ListView items side by side in Blazor?
 
 ## Solution
@@ -46,9 +46,9 @@ To display the ListView items horizontally, apply the `display: inline-block;` C
 
 <TelerikListView Data="@ListViewData"
                  Class="horizontal-listview"
-                 Width="700px" 
-                 Pageable="true" 
-                 PageSize="4">
+                 Pageable="true"
+                 PageSize="4"
+                 Width="700px">
     <HeaderTemplate>
         <h2>Employee List</h2>
     </HeaderTemplate>