When I create multiple tabs and each tab has the same type of component, the OnInitialized is only running for the first one I click on.
Here is a simplified example to demonstrate:
MAIN PAGE:
@page "/tabtest"
@using Telerik.Blazor.Components
<div>Product XYZ</div>
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top" @ref="productTabStrip" @bind-ActiveTabIndex="@ActiveTabIndex">
<TabStripTab Title="Details">
<div class="container sms-tab-content">
GENERAL PRODUCT INTRO STUFF HERE
</div>
</TabStripTab>
@foreach (var item in listOfWidgets)
{
<TabStripTab Title="@item.WidgetName" Disabled="false">
<Widget WidgetID="@item.WidgetID" WidgetName="@item.WidgetName" />
</TabStripTab>
}
</TelerikTabStrip>
<div style="margin-top: 15px;">
<div><b>Below is a flat non-tab example of repeating widgets:</b></div>
@foreach (var item in listOfWidgets)
{
<Widget WidgetID="@item.WidgetID" WidgetName="@item.WidgetName" />
}
</div>
@code {
Telerik.Blazor.Components.TelerikTabStrip productTabStrip;
public int ActiveTabIndex { get; set; } = 0;
protected class Widget
{
public int WidgetID { get; set; }
public string WidgetName { get; set; }
}
private List<Widget> listOfWidgets = new List<Widget>();
protected void GetData()
{
listOfWidgets.Add(new Widget { WidgetID = 1, WidgetName = "Cog" });
listOfWidgets.Add(new Widget { WidgetID = 2, WidgetName = "Wheel" });
listOfWidgets.Add(new Widget { WidgetID = 3, WidgetName = "Bloof" });
}
protected override void OnInitialized()
{
GetData();
}
}
WIDGET COMPONENT:
@page "/widget/{WidgetID:int}/{WidgetName}"<div>
<div>@WidgetID</div>
<div>@WidgetName</div>
<div>@ExtraWidgetInfo</div>
</div>
@code {
[Parameter] public int WidgetID { get; set; } = 0;
[Parameter] public string WidgetName { get; set; } = "Nothing";
private string ExtraWidgetInfo { get; set; } = "Stuff";
protected override void OnInitialized()
{
if (WidgetName == "Cog")
ExtraWidgetInfo = "This is good info about cogs.";
if (WidgetName == "Wheel")
ExtraWidgetInfo = "This is good info about wheels.";
if (WidgetName == "Bloof")
ExtraWidgetInfo = "This is good info about bloofs.";
}
}
ADMIN EDIT: see the title and the discussion on how this would be handled, it is not going to be a separate property.
As in e.g. WPF/UWP, it would be convenient to get the "actual width" of a component in order to arrange other elements to follow the same width (or height).
Consider a TelerikDropDownList with Width="100%" and I want the PopupWidth to have same width (PopupWidth="100%" will not result in same).
<TelerikDropDownList Width="100%" PopupWidth="@(Dropdown?.Width)" @ref="Dropdown" DefaultItem="@(new Country{Name ="Select..."})" Data="@Countries" ValueField="Abbreviation" TextField="Name" PopupHeight="400px" @bind-Value="@Employee.ContactDetails.CountryCode"></TelerikDropDownList>
public TelerikDropDownList<Country, string> Dropdown { get; set; }
Here, I would like to set PopupWidth as below, to avoid the result in attached image.
PopupWidth="@(Dropdown?.ActualWidth)
i wanted to know if it's possible to make fully rtl theme in ui for blazor or not i have been trying to make an rtl theme but i got some problems.
and also is it possible to use other types of calendar in datepicker (like arabic calendar)?
Hi,
Ran in to an issue here. To avoid modals getting hidden behind animation containers, we use a class for a div and "wrap" the modal in providing it with a higher z-index than the animation container(s).
However, when using a DatePicker inside this module the calender will be hidden behind the modal (since it is in an animation container).
Any suggestion how to overcome this problem?
Thanks & br,
Sten
In many cases users need to be able to specify a number which is easily visualized using a horizontal slider.
This allows the user to easily move the point to their desired location.
It can be helpful to allow this to also be constrained using a forced range selection.
Sometimes it is helpful to allow the user to pick colors for various purposes.
This control can display the RGB value along with allowing them to change the hue/brightness along with the alpha component.
Also the ability to select from a set of predefined colors would be very nice.
---
ADMIN EDIT
Here is a sample project that showcases how you can use Kendo widgets in Blazor and also contains samples of color pickers: https://github.com/telerik/blazor-ui/tree/master/common/kendo-in-blazor
---
Having the ability to specify sections and then allowing the user to expand the section can be very helpful for complex content or menus.
The sections can be expanded so 1 is visible always or multiple can be expanded.
A rich text editor style control would be very helpful in specific cases as I could allow the user to edit and style text.
---
ADMIN EDIT
A Web application (such as Blazor applications) are based on HTML and CSS, and the Telerik UI for Blazor suite already offers a component that outputs HTML: https://demos.telerik.com/blazor-ui/editor/overview. You can even import and export its content from/to an MS Word document (or other formats) through the Telerik Document Processing Libraries that come with your license) as shown here: https://github.com/telerik/blazor-ui/tree/master/editor/ImportExport.
---
In addition each cell is colored or styled based on the x,y combination.
It would be helpful to have a TreeGrid control which is quite similar to a data grid however it allows hierarchy relationships among the items.
This would essentially have all the features of the standard data grid however one column would be expandable.
In data grids it can sometimes be quite helpful to be able to export the content for use outside of the application.
In these cases it can be common to export to CSV or PDF.
In many cases in a grid you may have additional data that the user can view however you don't want to show it as a default.
In these cases it would be nice to create the column normally, set the visible="false", and then have a built in column chooser feature.
This chooser would be a simple popup with a list of columns where the user can check whether visible or not.
It would be helpful in some cases to specify which grid lines to display with a default of both:
None - No lines
Horizontal - Only horizontal row lines
Vertical - Only vertical column lines.
Both - H/V lines
Hello Team;
I'd like to suggest to offer us an easy way to use the different themes offered by Bootswatch (bootstrap themes) during development and also allow us to offer that capability to our user, so they can pick their own theme.
Hope this helps!
Thanks!
..Ben
On the demo page, when I hover over menu items "Overview" and "Demos" and "Roadmap" it changes background color to gray. When I load it into a project with the verbatim demo code no background color change occurs except on "Roadmap".
<TelerikMenu Data="@MenuItems"
ParentIdField="@nameof(MenuItem.SectionId)"
IdField="@nameof(MenuItem.Id)"
TextField="@nameof(MenuItem.Section)">
</TelerikMenu>
@code {
public List<MenuItem> MenuItems { get; set; }
public class MenuItem
{
public int Id { get; set; }
public int? SectionId { get; set; }
public string Section { get; set; }
}
protected override void OnInitialized()
{
MenuItems = new List<MenuItem>()
{
new MenuItem()
{
Id = 1,
Section = "Overview"
},
new MenuItem()
{
Id = 2,
Section = "Demos"
},
new MenuItem()
{
Id = 3,
Section = "Roadmap"
},
new MenuItem()
{
Id = 4,
SectionId = 3,
Section = "What's new"
},
new MenuItem()
{
Id = 5,
SectionId = 3,
Section = "Roadmap"
},
new MenuItem()
{
Id = 6,
SectionId = 3,
Section = "Release History"
}
};
base.OnInitialized();
}
}
In release 2.0.0 it was possible to set default property Visible to "true" for AnimationContainer. That is now gone. How do I make the AnimationContainer visible per default, i.e without calling ShowAsync() in some stage?
Br,
Sten
How can I show/hide or enable/disable a GridCommandColumn (e.g. Edit) per row.
For example, if a row is readonly, I don't want users to be able to click the edit button. There is no @context inside <GridCommandColumn>
Sample usage
<GridCommandColumn>
@{
var item = context as TheItem;
<GridCommandButton Command="Edit" Icon="edit" Enabled="@!item.ReadOnly">Edit</GridCommandButton>
}
</GridCommandColumn>