Hi,
When we use the TelerikDropDownList with a large amount of data (client side) in Blazor, the dropdown takes several seconds to open the popup. (*)
Even with the most simple version of the TelerikDropDownList component:
<TelerikDropDownList Data=@Logic.LuNacebelCodes
TextField="DisplayName"
ValueField="Id"
@bind-Value=@dto.Party.LuNacebelCodeId
Filterable="true" FilterOperator="@StringFilterOperator.Contains">
<DropDownListSettings>
<DropDownListPopupSettings Height="200px" />
</DropDownListSettings>
</TelerikDropDownList>But isn't it strange the same dropdownlist in Kendo for jQuery (AngularJS) with exactly the same dataset, doesn't react slow and opens on the fly..?
Is the DOM manipulation in Blazor that much slower then?
(*) We know Virtualization fixes this problem, but it has some limitations.
Thanks in advance.
Hi
I am trying to do very simple InCell editing of various columns string etc. In my model i have various Decimal? types fields. When i update the grid incell the
OnUpdate event fires but the property value is always null. Its like its not biding properly. Seems like you have had similar to this bug in previous versions. Seems like a very simple functionality that the grid should support.
Also it doesn't allow me to enter more than 1 digit after this also as if i type a decimal point it jsut clears it.
I have added a video showing this behaviour.
Please assist. This is the Grid code below.
@if (_stockOrderLinePOCO != null)
{
<TelerikGrid @ref="_stockOrderLineGrid"
Width="@AppStateService.ViewPortWidth"
Height="100%"
Data=@_stockOrderLinePOCO.Current
Sortable="@false"
FilterMode="@GridFilterMode.None"
Pageable="true"
Groupable="false"
PageSize="@AppSettings.Value.DataPageSize"
Resizable="true"
Reorderable="false"
EditMode="GridEditMode.Incell"
PageChanged="@StockOrderLineGridPageChangedHandler"
OnRowRender="@StockOrderLineGridRowRenderHandler"
OnUpdate="@StockOrderLineGridUpdateHandler" OnEdit="@StockOrderLineGridEditHandler" OnCancel="@StockOrderLineGridCancelHandler" OnDelete="@StockOrderLineGridDeleteHandler" OnStateInit="@((GridStateEventArgs<StockOrderLine> args) => OnStockOrderLineStateInitHandler(args))">
<GridColumns>
@{
foreach(PropertyInfo prop in (typeof(StockOrderLine)).GetProperties())
{
switch (prop.Name)
{
case "ID":
<GridColumn Field=@prop.Name Title=@Localizer["Line"] FieldType=@prop.GetType() Editable="false"> Width="1rem"</GridColumn>
break;
case "ProductID":
<GridColumn Field=@prop.Name Title=@Localizer["Product"] FieldType=@prop.GetType() Editable="true" Width="40rem">
<Template>
@{
CurrentlyEditedStockOrderLine = context as StockOrderLine;
@CurrentlyEditedStockOrderLine.ProductID @CurrentlyEditedStockOrderLine.ProductDescription
}
</Template>
<EditorTemplate>
@{
CurrentlyEditedStockOrderLine = context as StockOrderLine;
<div class="row">
<div class="col mr-0">
<TelerikComboBox @bind-Value="CurrentlyEditedStockOrderLine.ProductID" Data="@_priceListProducts" TextField="ProductID" ValueField="ProductID" FillMode=@ThemeConstants.DropDownList.FillMode.Outline Filterable="true">
<ItemTemplate Context="subContext">
@subContext.ProductID @subContext.Description_en_AU
</ItemTemplate>
</TelerikComboBox>
</div>
<div class="col ml-0">
<TelerikButton class="mb-0 ml-0" ButtonType="ButtonType.Button" Size="lg" FillMode="outline" Icon="search" @onclick="LookupItem">
</TelerikButton>
</div>
</div>
}
</EditorTemplate>
</GridColumn>
break;
case "ProductDescription":
<GridColumn Field=@prop.Name Title=@Localizer["Description"] FieldType=@prop.GetType() Editable="true"> </GridColumn>
break;
case "QuantityOrdered":
<GridColumn Field=@prop.Name Title=@Localizer["Qty"] FieldType=@prop.GetType() Editable="true"></GridColumn>
break;
case "SalePrice":
<GridColumn Field=@prop.Name Title=@Localizer["Price"] FieldType=@prop.GetType() Editable="true"></GridColumn>
break;
case "Value":
<GridColumn Field=@prop.Name Title=@Localizer["Amount"] FieldType=@prop.GetType() Editable="false"></GridColumn>
break;
default:
break;
}
}
<GridCommandColumn Width="4rem">
<GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
</GridCommandColumn>
}
</GridColumns>
</TelerikGrid>
}
Can you update the templates that come with Telerik Blazor?
For example, you are using an EditForm control instead of the telerik Blazor Form control.
There is an expression, eat your own dog food. I often spin up template projects to play with new features or tweak existing ones. Be nice take full advantage of current state of blazor components and provide samples that people can use as a learning tool or launching point.
Peter
Hello there,
I encountered an issue with the TelerikGrid component. This started to be an issue from version 4.1.0 and can be reproduced from here:
If this line from the example:
<GridColumn Field=@nameof(SampleData.Name) Title="Name" /><GridColumn Field=@nameof(SampleData.Name) Title="Name" Visible="@!isVisible">
<Template>
@((context as SampleData).Name)
</Template>
</GridColumn>you can see that once the template GridColumn is shown, its data overwrites the data of the "Hire Date" column when toggling the visibility of the columns. The header of the column is changing but the data stays the same.
To provide a visual context of the issue, I have attached a video.
Best regards,
Ivaylo
In a cascading parent/child scenario (both DropDownLists), the args.Request.Skip property in the child's OnRead handler is not reset after rebinding the child data from the OnChange of the parent. This is a problem when the Skip is larger than the total amount of child items that are available from the back-end for the new parent. The api that is called in the OnRead handler returns nothing when for example the Skip still is 15 and there are only 10 items available.
I tried many things (in many different orders) to clear the child's state properly:
- set the model property which is bound to the child to it's default value
- called StateHasChanged()
- played around with Task.Delay
- set the child's value to it's default value
- set the child's Data property to null
- set the child's Data property to an empty list
- called child.Refresh()
- called child.Rebind()
- even tried to use reflection to reset the private proteced Skip property
Sort of a workaround:
In the OnRead handler after the api call compare the total item count with the skip and refetch with skip = 0 when skip > total item cound. This gives me the data I need but it is still shown at the old Skip position (with a buch of empty lines before that).
This bugreport (https://feedback.telerik.com/blazor/1558042-cascading-virtual-dropdownlist-does-not-reset-scrollbar) seems similar. In a response we are advised to clear the scrollbar position maually (which sounds a bit like the Skip position).
Please advise on how to reset the state manually because I don't see how. And if this is not possible, please add some functionality to do so. Perhaps something like the DataGrid's GetState, SetState methods?
Regards,
Harmen
Currently, the Splitbar of the TelerikSplitter is rather small.
It can be adjusted with CSS as shown here (https://blazorrepl.telerik.com/wnEfmyYp50ldIHsF13) but if the overall height of the page is large, the small arrow-icon that needs to be clicked in order to expand a collapsed SplitPane must be scrolled into view first.
It would be great to add alternative ways to expand a SplitPane, e.g. on a Double-Click on the Splitbar or maybe an additional Button.
Hi Telerik Team,
it would be nice to have some sort of control if a map layer (marker, bubble) etc. is shown at the currently selected zoom level. Let's say you have some map marker layers that show only big cities. If zoom is far out you may want to see just a few but when zoomed in, then there should be others (more or less) visible. It seems that some marker layers won't scale that precise on far zoom levels and maybe you want to hide some layers then.
If you need further information, don't hesitate to get in contact.
Regards,
Thomas
I'd like to have an ExpansionPanel component where I can declare my desired panel instances and their content in the markup.
Similar to https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/
I would like to use the new structs that are part of .NET6 - the DateOnly and TimeOnly.
Their support should extend to all respective date and time pickers and more complex components like the Grid, Gantt, Scheduler, and other applicable components.
I'm looking for what you have in WPF as we migrate ourselves over to Blazor - https://www.telerik.com/products/wpf/conversational-ui.aspx
---
ADMIN EDIT
For the time being, you can consider using the Kendo Chat widget as described in this sample project.
---
When is Spreadsheet for Blazor available or can i use Kendo Spreadsheat?
Regards
Alois Seidler
Hello,
is there a way to use the kendo-popup from https://www.telerik.com/kendo-angular-ui/components/popup/ in Telerik UI for Blazor? Is it a planned feature for the future?
Thank you,
Christian
I saw a few other posts that requested this feature which in all of the cases was denied saying to use Enabled instead...
The reason we need a ReadOnly state is because the user can not highlight to select the text to copy/paste if desired... that would be the reason we need ReadOnly vs disabled...
Disabled does not allow you to select the text to copy/paste...
---
ADMIN EDIT
A workaround is to re-enable the pointer events and to, optionally, set a highlight color:
<style>
/* Re-enable selection and scrolling of disabled textboxes.
Apply text selection style.
Can cause some side effects with appearance of hover and focus states */
/* UI for Blazor 3.0 + */
.k-input-inner.k-disabled,
.k-disabled > .k-input-inner,
input.k-textbox[disabled] {
pointer-events: initial;
}
.k-input-inner[disabled]::selection {
color: #fff;
background-color: #ff6358;
}
/* UI for Blazor 2.30 - */
.k-input.k-state-disabled,
.k-state-disabled > .k-input,
.k-state-disabled > .k-dateinput-wrap > .k-input,
input.k-textbox[disabled] {
pointer-events: initial;
}
.k-input[disabled]::selection {
color: #fff;
background-color: #ff6358;
}
</style>
<TelerikTextBox @bind-Value="@tbText" Enabled="false" />
<TelerikTextArea @bind-Value="@taText" Enabled="false" />
<TelerikDatePicker @bind-Value="@dpDate" Enabled="false" />
<TelerikDropDownList @bind-Value="@ddlVal" Data="@ddlData" Enabled="false" />
@code{
string tbText { get; set; } = "lorem ipsum";
string taText { get; set; } = "lorem ipsum\ndolor sit amet\nlorem ipsum\ndolor sit amet";
DateTime dpDate { get; set; } = DateTime.Now;
List<int> ddlData { get; set; } = Enumerable.Range(1, 10).ToList();
int ddlVal { get; set; } = 2;
}---
Hi,
I noticed that using left or right arrow to position yourself between typed text does not work anymore in the GridSearchBox. Neither does SHIFT+left for selecting parts of typed text. Home or End key is also not working.
In previous versions this was still possible.
Can be estabished on the demo pages as well:
https://demos.telerik.com/blazor-ui/grid/searchbox
Thanks,
Tom
https://blazorrepl.telerik.com/cdkTuxEg30UJXWug36
When trying to expand the drop downs, some of them do not expand.
It is impossible to give a scenario that always behaves the same, but if
you keep expending the drop downs sooner or later some will stop working.
I can't find a way to reliably set focus after a tab change.
In the sample below it first sets focus based on the OnAfterRenderAsync code, but switching to tab 2 and then going back I can't get it to set focus again.
I suspect its because there is no render type of event on a specific tab that I can hook into?
I have tried javascript and blazor and can't seem to figure a way around it.
@page "/test"
<TelerikTabStrip ActiveTabIndex="@TabActiveIndex" Height="87vh" Class="ct-tabstrip" ActiveTabIndexChanged="@TabIndexChanged">
<TabStripTab Title="Orders Search">
<input type="text" @ref=orderSearchTextBox id="test"/>
<br />
<input type="text" />
<br />
<input type="text" />
</TabStripTab>
<TabStripTab Title="Orders Updated Today">
<text>Tab 2</text>
</TabStripTab>
</TelerikTabStrip>
@code {
private ElementReference orderSearchTextBox;
private int TabActiveIndex;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await orderSearchTextBox.FocusAsync();
}
}
public async Task TabIndexChanged(int NewIndex)
{
TabActiveIndex = NewIndex;
if (NewIndex == 0)
{
await orderSearchTextBox.FocusAsync();
}
}
}