Telerik Forums
UI for Blazor Forum
1 answer
7 views

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

Misho
Telerik team
 updated answer on 22 May 2024
0 answers
4 views

Hi

I want to know. What is control over javascript when you use Blazor.

If I create web application on blazor in 2024 and after few years is blazor generate new javascript version.is there any browser combability ?

Is Blazor generate new javascript version ?

 

king regards,

Manish

 

 

Manish
Top achievements
Rank 1
 asked on 22 May 2024
0 answers
5 views

Hi Team,

is it possible to use a custom image inside the map control to place markers on?

Next to the world map, we would like to provide some detailed information for buildings and use the building layout to place markers inside rooms.

Thank you very much in advance!

Alex

Alexander
Top achievements
Rank 1
Iron
 asked on 22 May 2024
1 answer
15 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

Svetoslav Dimitrov
Telerik team
 answered on 22 May 2024
1 answer
17 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)

Tsvetomir
Telerik team
 answered on 21 May 2024
1 answer
15 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

 

 

Nansi
Telerik team
 answered on 21 May 2024
0 answers
4 views

Data has 6 columns, A, B, C with a value and a date.

AValue - double
ADate - datetime
BValue - double
BDate - datetime
CValue - double
CDate - datetime

Client requests that one of the 3 values A, B, C is chosen by drop down.

In a code-behind we group by a particular Value and then sort descending so that the highest value is on top of the grouping. Easy.

But then inside the grouping of Value are to be rows from the data that are not matched by Value but by a Search based on date range +- 5 minutes.

Example: client selects A

  1. Grid groups by AValue and then sorts DESC
  2. Inside Group[0] the client wants to Search all the GridData and display BValue and CValue that fall within a date range +- 5 minutes from Group[0].ADate

Right now I see SearchFilter inside the GridState class (for the whole Grid) but I think for what the client needs we would have a SearchFilter inside of GroupDescriptor (for that Group)?

Is this possible? 

If that is not possible, would it be possible to use 1 GridData as the source for the Grid and another GridData as the source for the Grid that appears inside each grouping?

 

Note: for one row in the data, the max value may be A, B or C.  But the date times in that row do not match up.  They are 3 different date time values.

Jonathan
Top achievements
Rank 1
 updated question on 20 May 2024
1 answer
7 views

I have a Blazor grid for which I populate an option dropdown. I use the OnAdd="@AddHandler" to add a new row. There are two other columns in the grid that have calculated values based on Name grid and 2 others, but once the option is populated, the only way for the calculations to work is to select another name, then come back to the first value. Is there a way to default the value to text that says "Select name" and make the user choose something?

                           <EditorTemplate>
                               @{
                                   CurrentlyEditedRecord = context as Record;
                                   <select @bind="@CurrentlyEditedRecord.Name">
                                       @foreach (var item in Products)
                                       {
                                           <option value="@item">@item</option>
                                       }
                                   </select>
                                      }
                           </EditorTemplate>

Sara
Top achievements
Rank 1
Iron
 answered on 20 May 2024
1 answer
13 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 }
            }
        }
    };
}

Nansi
Telerik team
 answered on 20 May 2024
0 answers
4 views

I'm currently trying to integrate telerik tilelayout inside telerik tabstrip dynamically?

for example

        <TabStripTab Class="@(filteredRows.Any() ? GetTabWidth() : "auto")"  Title="@tabtitle1["tabtitle"].ToString()">
                 <TelerikTileLayout Columns="12"
               RowHeight="auto"
               Resizable="true"
               Reorderable="true">
<TileLayoutItems>
                    @foreach (DataRow row in filteredRows)
                    {

                        <_Data columnspan='Convert.ToInt32(row["columnspan"])' rowspan='Convert.ToInt32(row["rowspan"])' pageId="@pageId" oDt="row" encryptQueryString="@data"></_Data>
                    }
                </TileLayoutItems>
            </TelerikTileLayout>
                </TabStripTab>
            }                                   
            @if (filteredRows2.Any())
            {

        <TabStripTab Title="@tabtitle2["tabtitle"].ToString()">

            <TelerikTileLayout Columns="12"
                               RowHeight="auto"
                               Resizable="true"
                               Reorderable="true">
                <TileLayoutItems>
                    @foreach (DataRow row in filteredRows2)
                    {

                        <_Data columnspan='Convert.ToInt32(row["columnspan"])' rowspan='Convert.ToInt32(row["rowspan"])' oDt="row" data="@data"></_Data>
                    }
                </TileLayoutItems>
            </TelerikTileLayout>

                </TabStripTab>

when i set persist content to true it reloads the components which invoke the database calling ?I s there any way to do without component being refreshed?

                                             
Leo
Top achievements
Rank 1
 asked on 20 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?