| title | page_title | description | slug | tags | published | position |
|---|---|---|---|---|---|---|
Refresh Data |
PanelBar Refresh Data |
Refresh PanelBar Data using the Rebind method, Observable Data or creating a new Collection reference. |
panelbar-refresh-data |
telerik,blazor,panelbar,observable,data,new,collection,refresh,rebind |
true |
20 |
In this article:
@* Add/remove an item and rebind the PanelBar to react to that change. *@
<TelerikButton OnClick="@AddItem">Add item</TelerikButton>
<TelerikButton OnClick="@RemoveItem">Remove first item</TelerikButton>
<TelerikPanelBar @ref="@PanelBarRef"
Data="@Items">
</TelerikPanelBar>
@code {
private TelerikPanelBar PanelBarRef;
private List<PanelBarItem> Items { get; set; }
private void AddItem()
{
Items.Add(new PanelBarItem()
{
Text = "Item 4"
});
PanelBarRef.Rebind();
}
private void RemoveItem()
{
Items.RemoveAt(0);
PanelBarRef.Rebind();
}
protected override void OnInitialized()
{
Items = GenerateData();
base.OnInitialized();
}
private List<PanelBarItem> GenerateData()
{
List<PanelBarItem> collection = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1.1"
},
new PanelBarItem()
{
Text = "Item 1.2",
Disabled = true,
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1.2.1"
},
new PanelBarItem()
{
Text = "Item 1.2.2"
}
}
}
}
},
new PanelBarItem()
{
Text = "Item 2",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 2.1",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 2.1.1"
}
}
},
new PanelBarItem()
{
Text = "Item 2.2",
Url = "https://google.com"
}
}
},
new PanelBarItem()
{
Text = "Item 3"
}
};
return collection;
}
public class PanelBarItem
{
public string Text { get; set; }
public bool Disabled { get; set; }
public string Url { get; set; }
public List<PanelBarItem> Items { get; set; }
}
}caption Bind the PanelBar to an ObservableCollection, so it can react to collection changes.
@* Add/remove an item to see how the PanelBar reacts to that change. *@
@using System.Collections.ObjectModel
<TelerikButton OnClick="@AddItem">Add item</TelerikButton>
<TelerikButton OnClick="@RemoveItem">Remove first item</TelerikButton>
<TelerikPanelBar Data="@Items"/>
@code {
private ObservableCollection<PanelBarItem> Items { get; set; }
private void AddItem()
{
Items.Add(new PanelBarItem()
{
Text = "Item 4"
});
}
private void RemoveItem()
{
Items.RemoveAt(0);
}
protected override void OnInitialized()
{
Items = GenerateData();
base.OnInitialized();
}
private ObservableCollection<PanelBarItem> GenerateData()
{
ObservableCollection<PanelBarItem> collection = new ObservableCollection<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1.1"
},
new PanelBarItem()
{
Text = "Item 1.2",
Disabled = true,
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1.2.1"
},
new PanelBarItem()
{
Text = "Item 1.2.2"
}
}
}
}
},
new PanelBarItem()
{
Text = "Item 2",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 2.1",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 2.1.1"
}
}
},
new PanelBarItem()
{
Text = "Item 2.2",
Url = "https://google.com"
}
}
},
new PanelBarItem()
{
Text = "Item 3"
}
};
return collection;
}
public class PanelBarItem
{
public string Text { get; set; }
public bool Disabled { get; set; }
public string Url { get; set; }
public List<PanelBarItem> Items { get; set; }
}
}caption Create new collection reference to refresh the PanelBar data.
@* Add/remove an item to see how the PanelBar reacts to that change. *@
<TelerikButton OnClick="@AddItem">Add item</TelerikButton>
<TelerikButton OnClick="@RemoveItem">Remove first item</TelerikButton>
<TelerikPanelBar Data="@Items"/>
@code {
private List<PanelBarItem> Items { get; set; }
private void AddItem()
{
Items.Add(new PanelBarItem()
{
Text = "Item 4"
});
Items = new List<PanelBarItem>(Items);
}
private void RemoveItem()
{
Items.RemoveAt(0);
Items = new List<PanelBarItem>(Items);
}
protected override void OnInitialized()
{
Items = GenerateData();
base.OnInitialized();
}
private List<PanelBarItem> GenerateData()
{
List<PanelBarItem> collection = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1.1"
},
new PanelBarItem()
{
Text = "Item 1.2",
Disabled = true,
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 1.2.1"
},
new PanelBarItem()
{
Text = "Item 1.2.2"
}
}
}
}
},
new PanelBarItem()
{
Text = "Item 2",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 2.1",
Items = new List<PanelBarItem>()
{
new PanelBarItem()
{
Text = "Item 2.1.1"
}
}
},
new PanelBarItem()
{
Text = "Item 2.2",
Url = "https://google.com"
}
}
},
new PanelBarItem()
{
Text = "Item 3"
}
};
return collection;
}
public class PanelBarItem
{
public string Text { get; set; }
public bool Disabled { get; set; }
public string Url { get; set; }
public List<PanelBarItem> Items { get; set; }
}
}- [ObservableCollection]({%slug common-features-observable-data%})
- INotifyCollectionChanged Interface
- Live Demos