[3.6] docs(gantt,treelist): Documentation for Rebind method (#1129)

* docs(gantt,treelist):rebind docs * docs(carousel, treeview):rebind docs * docs(panelbar):rwbind docs * docs(common):minor fixes * Update components/gantt/refresh-data.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(common):address feedback Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Author: ntacheva

_contentTemplates/common/observable-data.md

@@ -10,7 +10,9 @@ Databound components can benefit from live data - when the data source collectio
 When the `Data` of the component is a collection that implements the `INotifyCollectionChanged` interface (such as `ObservableCollection`), the Telerik components subscribe to its `CollectionChanged` event to update. This means that adding items, removing items, or clearing the collection updates the components (its `.Add()`, `.Remove()` and `.Clear()` methods).
 
 The Observable collections fire the `CollectionChanged` event only when their `Add`, `Remove` and `Clear` methods are called. They do not fire it when you change the value of a field of one of their elements.
+#end
 
+#observable-data-onread-note
 >important Observable data is not supported with manual data operations via the `OnRead` event.
 #end
 

_contentTemplates/common/rebind-method.md

@@ -0,0 +1,5 @@
+#intro
+You can refresh the data by invoking the [`Rebind` method]({%slug common-features-data-binding-overview%}#refresh-data). Use the component reference to call the `Rebind` method after you have made the data changes (for example adding, removing items). This is needed in case you are not using [Observable data](#observable-data) or [resetting the collection reference](#new-collection-reference). Calling `Rebind` will force the component process the available data anew to reflect the updates.
+
+>caption Use the `Rebind` method to refresh the data.
+#end

components/carousel/refresh-data.md

@@ -1,7 +1,7 @@
 ---
 title: Refresh Data
 page_title: Carousel Refresh Data
-description: Refresh Carousel Data using Observable Data or creating a new Collection reference.
+description: Refresh Carousel Data using the Rebind method, Observable Data or creating a new Collection reference.
 slug: carousel-refresh-data
 tags: telerik,blazor,carousel,observable,data,new,collection
 published: True
@@ -13,32 +13,42 @@ position: 15
 @[template](/_contentTemplates/common/observable-data.md#intro)
 
 In this article:
+- [Rebind Method](#rebind-method)
 - [Observable Data](#observable-data)
 - [New Collection Reference](#new-collection-reference)
 
-## Observable Data
-
-@[template](/_contentTemplates/common/observable-data.md#observable-data)
+## Rebind Method
 
->caption Bind the Carousel component to an ObservableCollection, so it can react to collection changes.
+@[template](/_contentTemplates/common/rebind-method.md#intro)
 
 ````CSHTML
-@* Add/remove an item to see how the Carousel reacts to that change. *@
-
-@using System.Collections.ObjectModel
+@* Add/remove an item and rebind the Carousel to react to that change. *@
 
 <TelerikButton OnClick="@AddItem">Add item</TelerikButton>
 
 <TelerikButton OnClick="@RemoveItem">Remove item</TelerikButton>
 
-<TelerikCarousel Data="@CarouselData"
+<TelerikCarousel @ref="@CarouselRef"
+ Data="@CarouselData"
  Width="400px" Height="200px">
  <Template>
  <div class="item">ID @(context.ID) : @(context.Text)</div>
  </Template>
 </TelerikCarousel>
 
+<style>
+ .item {
+ background: #3d57d8;
+ color: #fff;
+ font: 36px/200px sans-serif;
+ text-align: center;
+ }
+</style>
+
 @code {
+ private TelerikCarousel<CarouselModel> CarouselRef;
+
+ private List<CarouselModel> CarouselData = new List<CarouselModel>();
 
  void AddItem()
  {
@@ -47,27 +57,58 @@ In this article:
  {
  ID = 4,
  Text = "Text 4"
- }); 
+ });
+
+ CarouselRef.Rebind();
  }
 
  void RemoveItem()
  {
  CarouselData.RemoveAt(CarouselData.Count() - 1);
+
+ CarouselRef.Rebind();
  }
 
- public ObservableCollection<CarouselModel> CarouselData = new ObservableCollection<CarouselModel>
+ protected override void OnInitialized()
  {
- new CarouselModel { ID = 1, Text = "Text 1" },
- new CarouselModel { ID = 2, Text = "Text 2" },
- new CarouselModel { ID = 3, Text = "Text 3" }
- };
+ CarouselData = new List<CarouselModel>
+ {
+ new CarouselModel { ID = 1, Text = "Text 1" },
+ new CarouselModel { ID = 2, Text = "Text 2" },
+ new CarouselModel { ID = 3, Text = "Text 3" }
+ };
+ }
 
  public class CarouselModel
  {
  public int ID { get; set; }
  public string Text { get; set; }
  }
 }
+````
+
+
+## Observable Data
+
+@[template](/_contentTemplates/common/observable-data.md#observable-data)
+
+>caption Bind the Carousel component to an ObservableCollection, so it can react to collection changes.
+
+````CSHTML
+@* Add/remove an item to see how the Carousel reacts to that change. *@
+
+@using System.Collections.ObjectModel
+
+<TelerikButton OnClick="@AddItem">Add item</TelerikButton>
+
+<TelerikButton OnClick="@RemoveItem">Remove item</TelerikButton>
+
+<TelerikCarousel Data="@CarouselData"
+ Width="400px" Height="200px">
+ <Template>
+ <div class="item">ID @(context.ID) : @(context.Text)</div>
+ </Template>
+</TelerikCarousel>
 
 <style>
  .item {
@@ -78,6 +119,40 @@ In this article:
  }
 </style>
 
+@code {
+ private ObservableCollection<CarouselModel> CarouselData = new ObservableCollection<CarouselModel>();
+
+ void AddItem()
+ {
+ CarouselData.Add(
+ new CarouselModel()
+ {
+ ID = 4,
+ Text = "Text 4"
+ });
+ }
+
+ void RemoveItem()
+ {
+ CarouselData.RemoveAt(CarouselData.Count() - 1);
+ }
+
+ protected override void OnInitialized()
+ {
+ CarouselData = new ObservableCollection<CarouselModel>
+ {
+ new CarouselModel { ID = 1, Text = "Text 1" },
+ new CarouselModel { ID = 2, Text = "Text 2" },
+ new CarouselModel { ID = 3, Text = "Text 3" }
+ };
+ }
+
+ public class CarouselModel
+ {
+ public int ID { get; set; }
+ public string Text { get; set; }
+ }
+}
 ````
 ## New Collection Reference
 
@@ -101,9 +176,19 @@ In this article:
  </Template>
 </TelerikCarousel>
 
+<style>
+ .item {
+ background: #3d57d8;
+ color: #fff;
+ font: 36px/200px sans-serif;
+ text-align: center;
+ }
+</style>
+
 @code {
+ private List<CarouselModel> CarouselData = new List<CarouselModel>();
 
- void AddItem()
+ private void AddItem()
  {
  CarouselData.Add(
  new CarouselModel()
@@ -115,45 +200,39 @@ In this article:
  CarouselData = new List<CarouselModel>(CarouselData);
  }
 
- void RemoveItem()
+ private void RemoveItem()
  {
  CarouselData.RemoveAt(CarouselData.Count() - 1);
 
  CarouselData = new List<CarouselModel>(CarouselData);
  }
 
- void LoadNew()
+ private void LoadNew()
  {
  CarouselData = new List<CarouselModel>
- {
- new CarouselModel { ID = 4, Text = "New Item 4" },
- new CarouselModel { ID = 5, Text = "New Item 5" },
- new CarouselModel { ID = 6, Text = "New Item 6" }
- };
+  {
+  new CarouselModel { ID = 4, Text = "New Item 4" },
+  new CarouselModel { ID = 5, Text = "New Item 5" },
+  new CarouselModel { ID = 6, Text = "New Item 6" }
+  };
  }
 
- public List<CarouselModel> CarouselData = new List<CarouselModel>
-{
- new CarouselModel { ID = 1, Text = "Text 1" },
- new CarouselModel { ID = 2, Text = "Text 2" },
- new CarouselModel { ID = 3, Text = "Text 3" }
- };
+ protected override void OnInitialized()
+ {
+ CarouselData = new List<CarouselModel>
+ {
+ new CarouselModel { ID = 1, Text = "Text 1" },
+ new CarouselModel { ID = 2, Text = "Text 2" },
+ new CarouselModel { ID = 3, Text = "Text 3" }
+ };
+ }
 
  public class CarouselModel
  {
  public int ID { get; set; }
  public string Text { get; set; }
  }
 }
-
-<style>
- .item {
- background: #3d57d8;
- color: #fff;
- font: 36px/200px sans-serif;
- text-align: center;
- }
-</style>
 ````
 
 ## See Also

components/gantt/events.md

@@ -5,7 +5,7 @@ description: Events of the Gantt for Blazor
 slug: gantt-events
 tags: telerik,blazor,gantt,events
 published: True
-position: 20
+position: 25
 ---
 
 # Gantt Events