Merge fix-listview-refresh-article-1185 into production

components/listview/refresh-data.md

@@ -20,75 +20,83 @@ In this article:
 
 ## Rebind Method
 
-To refresh the ComboBox data when using [`OnRead`]({%slug autocomplete-events%}#onread), call the `Rebind` method of the TelerikAutoComplete reference. This will fire the `OnRead` event and execute the business logic in the handler.
+To refresh the `ListView` data when using [`OnRead`]({%slug listview-manual-operations%}), call the `Rebind` method of the `TelerikListView` reference. This will fire the `OnRead` event and execute the business logic in the handler.
 
 ````CSHTML
 @* Clicking on the Rebind button will delete the first item from the ListView and refresh the data *@
 
 @using Telerik.DataSource.Extensions
 
 <div class="example-box">
-    <h3>Pressing rebind will remove the first item from the combobox and rebind it.</h3>
-    <TelerikButton OnClick="@RebindComboBox">Rebind</TelerikButton>
-    <TelerikComboBox @ref="@ComboBoxRef"
-                     TItem="Product" TValue="int"
+    <h3>Pressing rebind will remove the first item from the listview and rebind it.</h3>
+    <TelerikButton OnClick="@RebindListView">Rebind</TelerikButton>
+    <TelerikListView @ref="@ListViewRef"
+                     TItem="SampleData"
                      OnRead="@ReadItems"
-                     ValueField="@nameof(Product.ProductId)"
-                     TextField="@nameof(Product.ProductName)"
-                     Filterable="true"
-                     Placeholder="Find what you seek by typing"
-                     @bind-Value="@SelectedValue">
-    </TelerikComboBox>
+                     Width="500px"
+                     Height="700px">
+        <Template>
+            <div class="listview-item">
+                <h4>@context.Name</h4>
+                <h5>@context.Team</h5>
+            </div>
+        </Template>
+    </TelerikListView>
 </div>
 
-@code{
-    public int SelectedValue { get; set; }
-    List<Product> AllData { get; set; } = new List<Product>();
-    public TelerikComboBox<Product, int> ComboBoxRef { get; set; }
+@code {
+    private List<SampleData> SourceData { get; set; }
+    private TelerikListView<SampleData> ListViewRef { get; set; }
 
-    async Task ReadItems(ComboBoxReadEventArgs args)
+    void ReadItems(ListViewReadEventArgs args)
     {
-        await Task.Delay(1000);
-        args.Data = AllData.ToDataSourceResult(args.Request).Data;
+        if (SourceData == null)
+        {
+            SourceData = Enumerable.Range(1, 5).Select(x => new SampleData
+                {
+                    Id = x,
+                    Name = $"Name {x}",
+                    Team = $"Team {x}"
+                }).ToList();
+        }
+
+        var datasourceResult = SourceData.ToDataSourceResult(args.Request);
+
+        args.Data = datasourceResult.Data;
+        args.Total = datasourceResult.Total;
     }
 
-    protected override void OnInitialized()
+    void RebindListView()
     {
-        List<Product> products = new List<Product>();
-        for (int i = 0; i < 200; i++)
+        if (SourceData.Count > 0)
         {
-            products.Add(new Product()
-            {
-                ProductId = i,
-                ProductName = "Product" + i.ToString(),
-                SupplierId = i,
-                UnitPrice = (decimal)(i * 3.14),
-                UnitsInStock = (short)(i * 1),
-            });
+            SourceData.RemoveAt(0);
         }
 
-        AllData = products;
+        ListViewRef.Rebind();
     }
 
-    public class Product
+    public class SampleData
     {
-        public int ProductId { get; set; }
-        public string ProductName { get; set; }
-        public int SupplierId { get; set; }
-        public decimal UnitPrice { get; set; }
-        public short UnitsInStock { get; set; }
+        public int Id { get; set; }
+        public string Name { get; set; }
+        public string Team { get; set; }
     }
+}
 
-    private void RebindComboBox()
-    {
-        if (AllData.Count > 0)
-        {
-            AllData.RemoveAt(0);
-        }
+                @* Styles would usually go to to the site stylesheet *@
 
-        ComboBoxRef.Rebind();
+<style>
+    .listview-item {
+        height: 150px;
+        width: 150px;
+        display: inline-block;
+        margin: 10px;
+        border: 1px solid black;
+        border-radius: 10px;
+        padding: 10px;
     }
-}
+</style>
 ````
 
 @[template](/_contentTemplates/common/refresh-data-not-applicable.md#refresh-data-note)