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}"Admin edit: While this cannot become a built-in feature, you may find useful the following example: https://github.com/telerik/blazor-ui/tree/master/common/grpc-example
Hello Team;
As .Net Core 3 offers gRPC support, I'm suggesting that the Blazor Team, look into some of the components that could automatically talk to backend gRPC services to get data, i.e. Auto Complete or DropDown box.
This way it could simplify different ways of providing datasource to some of these data oriented components.
Hope this suggestion helps!
..Ben
I have a TelerikComboBox in an EditorTemplate within a Grid. Code looks like this:
<TelerikComboBox Data="@CustomerPayCodes"
@bind-Value="@PayItemMapInEdit.ClientPayCode.UniqueId"
Placeholder="Select..."
Filterable="true"
TextField="PayCodeDisplayName"
ValueField="UniqueId"
@ref="_clientPayCodeComboBox"
Width="auto"
Enabled="@(string.IsNullOrEmpty(_payItemTextBoxRef?.Value))">
</TelerikComboBox>
Where reference prop looks like this:
private TelerikComboBox<PayCode, Guid> _clientPayCodeComboBox;
When adding a new row, the Placeholder text becomes the empty GUID, until I click in the box and then outside, upon it changes to correct "Select...". The GUID is never supposed to be showed at all in the box, that is only the binded value.
See attached pictures.
Please advice.
Br,
Sten
I have an animationcontainer which I in overridden OnAfterRenderAsync(bool firstRender) call:
await AnimationContainerSettings.ShowAsync();
...since it is the only way to show the AnimationContainer from start. However, when I in some cases return to the page, the animationcontainer will only show itself if I delay the call with e.g. 1000 ms:
await Task.Delay(1000);
await AnimationContainerSettings.ShowAsync();
What could be possible reasons for this be? If I want my AnimationContainer to be visible as default when page is either Initialized or after rendering has occured, where and how should I call ShowAsync()?
Br,
Sten
I want to prevent users without WriteAccess to see the GridCommandColumn and a custom GridColumn containing some buttons.
Those two columns are the first in my grid.
If I add AuthorizeView tags like this
<AuthorizeView Policy="MyPolicy">
<GridCommandColumn ...>
...
</GridCommandColumn>
</AuthorizeView>
<AuthorizeView Policy="MyPolicy">
<GridColumn ...>
...
</GridColumn>
</AuthorizeView>
they will be hidden if the user does not comply to the policy but if he does comply the columns are displayed not as the first columns in the grid but as the last.
As a workaround I now don't hide the columns but their content (by moving the AuthorizeView tags inside the column tags). This is not a good solution though since I loose valuable horizontal screen-space for displaying empty columns.
Would be nice to have an Expansion Panel like this one:
https://material-ui.com/components/expansion-panels/
Hi!
I want to create a grid with multiselect options (controlled by checkboxes in the first column). I have used code from https://demos.telerik.com/blazor-ui/grid/selection but when i try this code in my project there are no checkboxes in the first column, just empty cells. Am i the only one with this problem?
Hi,
Any information on when the Layout Components available in AspNetCore will be available in Blazor?
I am currently putting a proposal together to purchase Telerik for Blazor and could really use some of those components to enhance the application than relying on 3rd-Party integrations.
Hello,
I have updated Blazor UI to the latest version (2.9.0) and some of my controls lost their state.
Let me explain:
I have a page with 4 tabs (TelerikTabStrip), if i choose the value of a dropdown (TelerikDropDown) in the first tab and move to the second tab and then come back to the first tab, the value would be lost and the dropdown is empty however, if i put a breakpoint and look at the model, it shows that the value is still preserved.
Is there something i am missing? is this an update gone wrong (on my side)?
I have downgraded back to 2.8.0 and it works as expected.
Thanks.
Using your tree view live sample, filter the list with "1", then try to expand "Test1" - crash.
I would expect "Test1" to apprear in the list but without the expandable icon or the expandable icon does nothing when clicked
According to the doc (https://docs.telerik.com/blazor-ui/components/grid/columns/width),
"When all column widths are explicitly set and the cumulative column width is greater than the available Grid width, a horizontal scrollbar appears and all set column widths are respected."
I have a grid with a width of 1500px and a cumulative column width of 1750 pixels:
<TelerikGrid Data="@datos"The horizontal scroll bar appears all right, but the column widths are not respected. As shown in the image, the columns on the right are squeezed
Any clues?
Thanks in advance
When a content is displayed in TelerikWindow and a TelerikTreeView`s item is expanded, the item`s content is above the window one due to higher z-index.
To fix it, use this CSS:
/* Telerik window content (with z-index 10001) above their animation container (with z-index 10002, used for example in tree view) */Now we can expand/collapsed tree view item using bound read/write model property.
We need to bind read-only property or controll expandability outside of tree view.
Examples:
Thank you
Submitted on customer behalf:
This line of code is taken directly out of your https://demos.telerik.com/blazor-ui/grid/editing-inline
What kind of magic updates the actual database?
privatevoidUpdateItem(GridCommandEventArgs args)
{
var argsItem = args.ItemasProductBindingModel;
var index =GridData.FindIndex(i => i.ProductId== argsItem.ProductId);
if(index !=-1)
{
GridData[index]= argsItem;
}
}"
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@SelectedValue" Width="100%" />
public string SelectedValue { get; set; }
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
protected IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });