Questions on UI for Blazor Forum

1 answer

214 views

I've got a TelerikGrid that occasionally loads a very large amount of data and when this happens it will freeze the entire webpage. I was wondering if there is a way to load the grid asynchronously, to allow users to still be able to click other things, or if there is a way to indicate to the user that a loading is occurring. Below is the code for my TelerikGrid and even though I have the line `EnableLoaderContainer="@ShowLoading"` it does not indicate that the grid is loading.

<TelerikGrid 
                    Data="@model.DegradeTableRows" 
                    @ref="@Grid"
                    Width="100%"
                    Height="100%"
                    EnableLoaderContainer="@ShowLoading"
                    Groupable="true"
                    Pageable="false" 
                    Sortable="true"
                    FilterMode="@GridFilterMode.FilterMenu">
                    <GridColumns>
                        <GridColumn Field="unitNumb" Width="110px" FieldType="@typeof(int)" Title="Unit Number"/>
                        <GridColumn Field="grade" Width="100px" Title="Grade" FieldType="@typeof(string)" />
                        <GridColumn Field="length" Width="100px" FieldType="@typeof(string)" Title="Length"/>
                        @if (SizeColumnNames is not null && SizeColumnNames.Any())
                        {
                            foreach (var sizeColumnName in SizeColumnNames)
                            {
                                <GridColumn Width="100px" Field="@sizeColumnName" FieldType="@typeof(int)" Title="@sizeColumnName"/>
                            }    
                        }
                        <GridColumn Width="150px" Field="GrandTotal" FieldType="@typeof(decimal)" Title="Grand Total"/>
                    </GridColumns>
                </TelerikGrid>

Grid

answered on 01 Sep 2022

1 answer

208 views

TelerikTabStrip returns ArgumentOutOfRangeException when changing first tab to invisible

Telerik Blazor version: 3.4.0, 3.5.0

I'm currently encountering a bug within Telerik Blazor with the TabStrip component. If the first Tab of the TabStrip's visibility is set to false, the component throws an exception:
ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

With some debugging, I found what went wrong within Telerik's code. But first, the scenario:

Setup

Create a TelerikTabStrip with three TabStripTab components inside: A, B, C.

Scenario A

Tab A: Visible = false
Tab B: Visible = true
Tab C: Visible = true

Scenario B

Tab A: Visible = true
Tab B: Visible = false
Tab C: Visible = true

Result

Scenario B works fine. Scenario A does not. Why? Basically, it looks like this happens:

Tab => SetParameters() => VisibleChanged = true (because that parameter is set) => TabStrip.OnTabVisibiltyChanged => IsTabActive = true (because it's the first tab) => FindFocusable => this method has only one tab in the list (the first tab) and not the other two tabs because it's still early in the component lifecycle => FindIndex can't find a tab that is visible and not disabled => returns index -1 => this is out of range and throws an exception

Why scenario B works:

Tab A => SetParameters() => VisibleChanged = false (because the parameter is not changed to the default) => basically done
Tab B => SetParameters() => VisibleChanged = true (because we changed that) => TabStrip.OnTabVisibilityChanged => IsTabActive = false (not the first tab, so not active) => basically done

@page "/TabStripTest"

<PageTitle>Telerik tabs error</PageTitle>

<TelerikTabStrip @ref="_stripRef">
    <TabStripTab Title="A" Visible="true">
        Tab A
    </TabStripTab>

    <TabStripTab Title="B" Visible="false">
        Tab B
    </TabStripTab>

    <TabStripTab Title="C" Visible="true">
        Tab C
    </TabStripTab>
</TelerikTabStrip>

@code {
    private TelerikTabStrip _stripRef;
}

Full stacktrace:

System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
   at Telerik.Blazor.Components.TelerikTabStrip.FocusActiveTab()
   at Telerik.Blazor.Components.TelerikTabStrip.set_CurrentActiveTabIndex(Int32 value)
   at Telerik.Blazor.Components.TelerikTabStrip.Telerik.Blazor.Components.TabStrip.ITabContainer.OnTabVisibleChanged(ITab tab)
   at Telerik.Blazor.Components.TabStripTab.OnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.HandleExceptionViaErrorBoundary(Exception error, ComponentState errorSourceOrNull)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task, ComponentState owningComponentState)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.HandleExceptionViaErrorBoundary(Exception error, ComponentState errorSourceOrNull)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task, ComponentState owningComponentState)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(Int32 componentId, ParameterView initialParameters)
   at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.CreateInitialRenderAsync(Type componentType, ParameterView initialParameters)
   at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c__11`1.<<InvokeAsync>b__11_0>d.MoveNext()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, Object parameters)
   at Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)
   at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, Int32 i, Int32 count)
   at TelerikTabStripBug.Pages.Pages__Host.ExecuteAsync() in C:\Users\Thimo.Koolen\source\repos\TelerikTabStripBug\TelerikTabStripBug\Pages\_Host.cshtml:line 6
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
   at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

TabStrip

answered on 01 Sep 2022

0 answers

149 views

Workaround? Ability to set WorkDayStart/WorkDayEnd for individual days on the Scheduler in other views than single day.

Has anyone found a way to handle this without it being an official feature yet?

Scheduler

asked on 01 Sep 2022

1 answer

103 views

More packages to Install

Hi

Except of these 2 packages, are there any packages that are recommended to install?

Eric

General Discussions

answered on 01 Sep 2022

1 answer

452 views

Treeview parent/child relationship not working

I created a treeView but for some reason, the data children are not included in the drop-down but separate. How would I set this up to have the children fall under their parent?

@code {

IEnumerable<TreeItem> FlatData { get; set; }
IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>();

private void CreateDeviceTreeList()
{
List<TreeItem> items = new List<TreeItem>();

int count = 0;
foreach(var a in devices.Items)
{
items.Add(new TreeItem(){
Id = count,
Parent = null,
Text = a.Name,
HasChildren = true
});
count++;
items.Add(new TreeItem(){
Id = count,
Parent = count-1,
Text = a.Group,
HasChildren = false
});
count++;
items.Add(new TreeItem(){
Id = count,
Parent = count-1,
Text = a.Sensor,
HasChildren = false
});
count++;
}
FlatData = items;
ExpandedItems = FlatData.Where(x => x.HasChildren == true).ToList();
StateHasChanged();

}

protected async override void OnInitialized()
{

CreateDeviceTreeList();

}

TreeView

answered on 01 Sep 2022

0 answers

150 views

Force multiselect not to create new row when there is no data

I have a multiselect component that I'm trying to filter based on the options chosen in another multiselect component that I'm having trouble with. In my code I got the multiselect to only display text for the options I want but there are still empty rows included where I did not display text. I was wondering if there is a way to remove rows that do not have any text or if I'm just going about filtering the multiselect the wrong way. I've included the code below and a picture of the blank rows.

<TelerikMultiSelect Class="lightBlueGray col-2"  Width="200px"  Data="@MonthOptions" @bind-Value="@model.Months">
                    <ItemTemplate Context="ITContext">
                        @if (model.Year.Count() > 0)
                        {
                            @if (model.Year.ElementAt(0) != "(All)")
                            {
                                int validMonth = 0;
                                int i = 0;
                                while (i < model.Year.Count())
                                {
                                    if (ITContext.Contains(model.Year.ElementAt(i)))
                                    {
                                        validMonth = 1;
                                    }
                                    i++;
                                }
                                if (validMonth == 1)
                                {
                                    @ITContext
                                }
                            }
                            else
                            {
                                @ITContext
                            }
                        }
                        else
                        {
                            @ITContext
                        }
                    </ItemTemplate>
</TelerikMultiSelect>

MultiSelect

asked on 31 Aug 2022

1 answer

122 views

Grid UI does not reflect to changed state

dojo:

https://blazorrepl.telerik.com/?_ga=2.175076642.1694966489.1661590183-1931469790.1620243254

as you can see on example above, the grid is filtered (during the onInitState event), but user look & feel still unchanged, i mean the filter button is not highlited, if you click on the filter button to expand, the filter item 1 is not selected

Grid

answered on 31 Aug 2022

1 answer

124 views

How to disable specific rows base on a condition.

I am using CRUD operations where my grid has default data so, when it is displayed, will have two rows .

I can add , edit and delete more rows but, I can not edit or delete the default specfic rows that I got:

USER001 and USER002 can not be edited or deleted. How can I disable those two rows?

Grid

answered on 31 Aug 2022

1 answer

152 views

Create a editable tooltip system

Hi, I would like to get some input on creating an editable tooltip system.

Each input field should have a question mark icon on the right. That shows some text when you hoover over it.

Text should be stored in a database and users should be able to edit the text directly on the form.

For edit, I imagine this: Hoover over should show the help text but also a small pencil ikon if the have the right to edit the text. Edit should show a new popup.

For identifying the field in the database I could maybe use classname.fieldname and get it using reflection.
The text should be fetch and set on mouse over.

Can I get the classname.fieldname from the binding to the input field? and then use it in the function to get the text for the tooltip?

Link to tooltip documentation

Let os brainstorm together 😊

Tooltip