Telerik Forums
UI for Blazor Forum
0 answers
1 view

I'm trying to convert an existing Blazor project to use Telerik components.  Following this article Convert Project Wizard but the Telerik UI for Blazor > Convert to Telerik Application menu option doesn't show up on either the project context menu or Extensions Menu in the Solution Explorer.

VS2022 V17.9.7

The fully licensed Telerik Extensions are installed in VS2022

The project file includes the package reference  <PackageReference Include="Telerik.UI.for.Blazor" Version="6.0.0" />

How do I get the Convert Project Wizard?

Thanks

John
Top achievements
Rank 1
 asked on 17 May 2024
0 answers
6 views

Hi, i need to design a class to handle pagination in my api endpoints, so i have a question about 2 properties of DataSourceRequest.

Page: I assume it's used only in pagination to set the page number.

Skip: I assume it's used only on virtual pagination to define the records to skip. 

I think this 2 properties as mutual exclusive (if used Page, Skip is ignored, if used Skip, Page is ignored).

Is this true or there are situations where are both used?  

and if one exclude the other... why you have not handled the pagination only with Skip / Take properties (assumed who Take correspond to PageSize in classic pagination, Page can be calculated as (Skip / Take) + 1)?

i need this answers because if this properties are multual exclusive i assume i can design my pagination class with only 2 properties (Skip / Take) instead of 3 (Page / PageSize / Skip) as done in DataSourceRequest object.

Thanks

 

Thanks

 

 

Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
 updated question on 17 May 2024
0 answers
3 views

Hi there,

Is there a way to handle  the click anywhere on TelerikCard without wrapping it with a div and handling div.onclick?

 

Regards,

Igor

Igor
Top achievements
Rank 1
 asked on 17 May 2024
0 answers
6 views

If i revert to 2024 Q1 the error disappears...

 

2024-05-16 19:54:03,530 [ERROR] Unhandled exception in circuit 'S77usknbj_EFjppCUa4yC1LlVuSlrA3J5HkaJib6jRs'.
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initListView' ('initListView' was undefined).
Error: Could not find 'TelerikBlazor.initListView' ('initListView' was undefined).
    at http://localhost:5242/_framework/blazor.server.js:1:734
    at Array.forEach (<anonymous>)
    at l.findFunction (http://localhost:5242/_framework/blazor.server.js:1:702)
    at _ (http://localhost:5242/_framework/blazor.server.js:1:5445)
    at http://localhost:5242/_framework/blazor.server.js:1:3238
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (http://localhost:5242/_framework/blazor.server.js:1:3201)
    at Xt._invokeClientMethod (http://localhost:5242/_framework/blazor.server.js:1:61001)
    at Xt._processIncomingData (http://localhost:5242/_framework/blazor.server.js:1:58476)
    at Xt.connection.onreceive (http://localhost:5242/_framework/blazor.server.js:1:52117)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikListView`1.InitListView()
   at Telerik.Blazor.Components.TelerikListView`1.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
2024-05-16 19:54:03,838 [WARN ] Unhandled exception rendering component: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikTextArea.SetJsValueAsync()
   at Telerik.Blazor.Components.Common.TextBoxBase.OnAfterRenderInternalAsync(Boolean firstRender)
   at Telerik.Blazor.Components.Common.TextBoxBase.OnAfterRenderAsync(Boolean firstRender)
   at Telerik.Blazor.Components.TelerikTextArea.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

JKattestaart
Top achievements
Rank 1
 asked on 17 May 2024
0 answers
6 views
I am using a DateTime ChartSeries (ScatterLine). I would like to be able to click on the chart area at any point and get a XY position. Is there any way to do this?
Jeremy
Top achievements
Rank 1
 asked on 15 May 2024
0 answers
6 views

When editing a text field on a Blazor Grid in inline edit mode, pressing the backspace key will cause the cell edit to cancel, similar to what the escape key does. To reproduce, enter edit mode and press the backspace key, or keep pressing the backspace key until  the edit cancels.

This is usual behavior since the backspace key is very often used to clear the text before entering new text and it is unexpected when pressing the key causes the edit to suddenly cancel. It there a way to prevent this unwanted behaviour?

Bryan

 
Bryan
Top achievements
Rank 1
 asked on 15 May 2024
0 answers
6 views

Could there be an option to NOT close the filter dropdown when the clear button is pressed?

I just got a request for this, and their thought is they will have a filter set, then want to click clear and then still pick new items to filter before leaving the dropdown.

Also, watching him on a touch device made it also especially painful.

Anthony
Top achievements
Rank 1
 asked on 15 May 2024
0 answers
3 views

Issue: The chart SVG or canvas suddenly disappears.

Reproduction of the Problem

Use the Blazor UI from Telerik trial version.
Perform actions such as hiding the chart line or adding values.

Current Behavior

At seemingly random intervals, the chart SVG or canvas disappears. This occurs when performing actions like hiding the chart line or adding values. The issue does not occur consistently or under obvious conditions.

Expected/Desired Behavior

The chart should behave as expected and not disappear unexpectedly.

Environment

  • Telerik UI for Blazor version: 5.1.1 (Trial)
  • Browser: All
  • App Type: Server

 

Video: https://www.veed.io/view/7782882d-6522-4fa6-a9df-8413695486ed?panel=share


<div style="width: 1100px; height: 500px;" class="graphBorder shadow">
    <TelerikChart Height="95%" Transitions="false">   
        <ChartSeriesItems>
            @foreach(var item in ChartData)
            {
                <ChartSeries
                    Visible="@item.ShowLine"
                    Style="ChartSeriesStyle.Smooth"
                    Type="ChartSeriesType.ScatterLine"
                    Name="@item.LineName" Data="@item.Data"
                    Color="@item.Color"
                    XField="@nameof(Data.X)" YField="@nameof(Data.Y)">
                    <ChartSeriesMarkers Size="0"/>
                    <ChartSeriesTooltip Visible="true"/>
                </ChartSeries>
            }
        </ChartSeriesItems>

        <ChartTitle Text="TestChart"></ChartTitle>

        <ChartXAxes>
            <ChartXAxis Type="date"
                        BaseUnit="minutes"
                        MajorUnit="30"
                        Min="@(new TimeOnly(0,0,0))"
                        Max="@(new TimeOnly(3,0,0))">
                <ChartXAxisTitle Text="TestChart"></ChartXAxisTitle>
                <ChartXAxisLabels Format="{0:HH:mm}"></ChartXAxisLabels>
            </ChartXAxis>
        </ChartXAxes>

        <ChartYAxes >
            <ChartYAxis Max="@(100 + 5)" Min="0" MajorUnit="10">
                <ChartYAxisLabels/>
                <ChartYAxisTitle Text="TestChart"></ChartYAxisTitle>
            </ChartYAxis>
        </ChartYAxes>

        <ChartLegend Visible="false"/>

    </TelerikChart>
     <div class="Legend d-flex justify-content-sm-around flex-row">
            @foreach(var item in ChartData)
            {
                <div>
                    <TelerikCheckBox Id="myCheckBox" @bind-Value="@item.ShowLine"/>
                    <label for="myCheckBox">@item.LineName</label>
                </div>
            }
        </div>
</div>

@code {
    public List<GraphData> ChartData = new()
    {
        new GraphData
        {
            LineName = "Stroom 1",
            ShowLine = true,
            Color = "green",
            MinDate = new TimeOnly(0, 0),
            TimeBetweenMinAndMax = new TimeSpan(4, 0, 0),
            Data = new List<Data>
            {
                new() { X = new TimeOnly(0, 0), Y = 10 },
                new() { X = new TimeOnly(0, 15), Y = 20 },
                new() { X = new TimeOnly(0, 30), Y = 12 },
                new() { X = new TimeOnly(0, 45), Y = 3 },
                new() { X = new TimeOnly(1, 0), Y = 10 },
                new() { X = new TimeOnly(1, 15), Y = 12 },
                new() { X = new TimeOnly(1, 30), Y = 14 },
                new() { X = new TimeOnly(1, 45), Y = 15 },
                new() { X = new TimeOnly(2, 0), Y = 16 },
                new() { X = new TimeOnly(2, 15), Y = 40 }
            }
        }
    };
}

robin
Top achievements
Rank 1
 asked on 15 May 2024
0 answers
5 views

When using Mini Mode for the Telerik Drawer, is there a way to make the Telerik Drawer expand/close with the @onmouseenter and @onmouseleave events?

I have the following layout...

<TelerikDrawer Data="@DrawerItems"
			   MiniMode="true"
			   Mode="@DrawerMode.Push"
			   SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
			   @ref="@DrawerRef"
			   Class="my-drawer">
	<ItemTemplate Context="item">
		<span class="icon-container drawer-tooltip-target" title=@item.Text>
			<TelerikSvgIcon Icon="@item.Icon" Class="drawer-icon" />
		</span>
		<span class="k-item-text">@item.Text</span>
	</ItemTemplate>
	<DrawerContent>
		<div class="content">
			@Body
		</div>
	</DrawerContent>
</TelerikDrawer>

I tried the following...

<TelerikDrawer Data="@DrawerItems"
			   MiniMode="true"
			   Mode="@DrawerMode.Push"
			   SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
			   @ref="@DrawerRef"
			   Class="my-drawer">
	<ItemTemplate Context="item">
		<div @onmouseenter="() => DrawerRef.ExpandAsync()"
			 @onmouseleave="() => DrawerRef.CollapseAsync()">
			<span class="icon-container drawer-tooltip-target" title=@item.Text>
				<TelerikSvgIcon Icon="@item.Icon" Class="drawer-icon" />
			</span>
			<span class="k-item-text">@item.Text</span>
		</div>
	</ItemTemplate>
	<DrawerContent>
		<div class="content">
			@Body
		</div>
	</DrawerContent>
</TelerikDrawer>

 

But that affects the layout as shown below, and does not appear to fully wrap the Drawer which causes the expand/collapse to be bit twitchy.



It also appears that I'm unable to attach @onmouse events to the <ItemTemplate> tag ( I get an unrecognized attribute error).

Any ideas?

Ryan
Top achievements
Rank 1
 updated question on 13 May 2024
0 answers
13 views

 

I'm looking at the demo for NumericTextBox, when I hold mouse button the number only increments once.

i/ is there any plans for a setting to allow the value to keep incrementing/decrementing when the mouse is held down? This would be more useful in some instances rather than clicking hundreds of times. I know you can type but some users want ability to only use mouse.

ii/ related, is there any plans for a setting to control acceleration of how quickly the value increments/decrements based on how long mouse is held for? Eg if mouse is held longer than say 5 seconds then value changes at faster rate.

Cirrus
Top achievements
Rank 1
 asked on 13 May 2024
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?