Thanks
Vishnu Vardhanan
In a Telerik Grid, we had just implemented the new Grid Footer Template. However, any built-in filtering (filterrow, filtermenu, searchbox) we use now will cause the grid/page to crash when the input we type does not exist for any row in the grid. If the input we type does exist, the filtering works correctly. For instance, if wanted to filter the name "John Smith" and a row exists with that name, then that row will be filtered. If we typed in "John Smithasdf", then the grid crashes and we receive the following message from the DevTools window:
blazor.server.js:19 [2020-09-21T16:58:12.070Z] Error: System.InvalidOperationException: Nullable object must have a value.
at System.Nullable`1.get_Value()
at BudgetPak.Pages.User.Budgeting.HeadcountReview.<>c__DisplayClass0_4.<BuildRenderTree>b__43(RenderTreeBuilder __builder4)
at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
at Telerik.Blazor.Components.Grid.GridFooterCell`1.BuildRenderTree(RenderTreeBuilder __builder)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
From the highlighted text, we deduced the issue had to deal with the Grid Footer template. Not all of our columns are aggregated on the footer row, so we were thinking that's what the "Nullable object must have a value" message meant. When we removed the Grid Footer template, the filtering worked correctly. With one of our other grids, we added a temporary footer grid, and the same crash would occur.
Is there a work-around for this? The footer template otherwise is great, and we would like to use both that and filtering on our grids. Please let us know if you need any more info.
Thanks,
Steve
In our application, we have the need for aggregate functions in the grid which are determined at runtime, not design time. We were able to get this working for Group footers using a combination of the GroupFooterTemplate element and determining the applicable aggregates in OnStateInit and OnStateChanged. When our team saw that the FooterTemplate element was added, we were excited to bring "Grand Summary" functionality to this grid on top of the existing group summaries. As far as we have been able to determine, however, there doesn't appear to be a way, currently, to add AggregateDescriptors dynamically for the entire grid like we can for groups. We can do the aggregate operations manually against the data source, but this doesn't take into account and filtering which is applied to the grid. We have been unable to find any way of adding AggregateDescriptors for the overall Grid like we can for groups within the GridState's GroupDescriptor property.
Attached are two files: StateInitializationC#Code and gridRazor.txt, which contain relevant snippets of what we are currently doing.
Hi Team,
We tried to use the TelerikLoader in Blazor WASM app, but the loader is not appearing on the page. We tried the basic example given in the Demo but did not work.
We are using latest Telerik Version (2.20.0).
@if (IsLoading)
{
<TelerikLoader />
}
else
{
@Data
}
We have below references in index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>THOR.UI</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="css/toggle.css" rel="stylesheet" />
<link href="css/spinner.css" rel="stylesheet" />
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link id="theme" rel="stylesheet" href="./css/thor-light-theme-material.css" />
<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
<script src="./site.js"></script>
<script src="_content/BlazorInputFile/inputfile.js"></script>
<script src="_content/BlazorPro.BlazorSize/blazorSize.min.js"></script>
<script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script>
<script src="./scripts/download.js"></script>
</head>
I tried to follow this below article and add the reference as below and CDN also but it did not work.
<!DOCTYPE html>
<html>
<head>
. . .
<link href="/css/kendo-themes/default/dist/all.css" rel="stylesheet"/>
<!-- Choose only one of the themes -->
<!-- <link href="/css/kendo-themes/bootstrap/dist/all.css" rel="stylesheet" />
<link href="/css/kendo-themes/material/dist/all.css" rel="stylesheet" /> -->
</head>
Please let us know what changes we have to make this to work.
Thanks
Chandra Vanama
Telerik UI Blazor: 2.20.0
OS Windows 10
Google Chrome 90.0.4408.5
Framework Bootstrap v. 4.6.0
Kendo-theme-bootstrap 4.24.0
Registration bootstrap tooltip:
$(function () { $('[title]').tooltip() })
How to repeat? Click on a component, point to any day, wait from 1 to 1.5 seconds and select an item (click), do not move the cursor for 1 second.
Hi,
I tried today to upgrade version of Telerik.UI.for.Blazor. My previous, working version was 2.20.0. All my projects are using .NET 5.0 framework and it's running on linux.
It seems like kind of regression issue, all I did was to push packages to our private feed (I checked them all few times) and update Telerik.UI.for.Blazor from 2.20 to 2.22. It should just work.
➜ App git:(charts) ✗ dotnet add package Telerik.Documents.SpreadsheetStreaming -v 2021.1.222 Determining projects to restore... Writing /tmp/tmpgV3v8N.tmp info : Adding PackageReference for package 'Telerik.Documents.SpreadsheetStreaming' into project '/PathToProject/App/ProjectName.App.csproj'. info : Restoring packages for /PathToProject/App/ProjectName.App.csproj... info : GET https://api.nuget.org/v3-flatcontainer/telerik.documents.spreadsheetstreaming/index.json info : CACHE https://nuget.pkg.jetbrains.space/pozitive/p/hcs/nuget-with-telerik/v3/flatcontainer/telerik.documents.spreadsheetstreaming/index.json info : NotFound https://api.nuget.org/v3-flatcontainer/telerik.documents.spreadsheetstreaming/index.json 411ms error: NU1102: Unable to find package Telerik.Documents.SpreadsheetStreaming with version (>= 2021.1.222) error: - Found 1 version(s) in space-nuget-with-telerik [ Nearest version: 2020.3.1019 ] error: - Found 0 version(s) in nuget.org error: Package 'Telerik.Documents.SpreadsheetStreaming' is incompatible with 'all' frameworks in project '/PathToProject/App/ProjectName.App.csproj'.
For reference, here are csproj of my two projects (app and test)
App.csproj:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
<Nullable>enable</Nullable>
<WarningsAsErrors>nullable</WarningsAsErrors>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="AngleSharp" Version="1.0.0-alpha-844" />
<PackageReference Include="Blazored.Toast" Version="3.1.2" />
<PackageReference Include="Marten" Version="4.0.0-alpha.5" />
<PackageReference Include="Marten.NodaTime" Version="2.0.0-alpha.5" />
<PackageReference Include="Microsoft.AspNetCore.Components.DataAnnotations.Validation" Version="3.2.0-rc1.20223.4" />
<PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="2.2.0" />
<PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="5.0.1" />
<PackageReference Include="Telerik.UI.for.Blazor" Version="2.20.0" />
</ItemGroup>
<!-- Identity stuff-->
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="5.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="5.0.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="5.0.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="5.0.1">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
</ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\css\bootstrap" />
</ItemGroup>
</Project>
Tests:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
<IsPackable>false</IsPackable>
<Nullable>enable</Nullable>
<WarningsAsErrors>nullable</WarningsAsErrors>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.7.1" />
<PackageReference Include="NSubstitute" Version="4.2.2" />
<PackageReference Include="NSubstitute.Analyzers.CSharp" Version="1.0.14" />
<PackageReference Include="xunit" Version="2.4.1" />
<PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
<PackageReference Include="coverlet.collector" Version="1.3.0">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\App\AppName.App.csproj" />
</ItemGroup>
</Project>
Best Regards,
Rafał Kopczyński
G'day
Is there plans to implement browser size binding? (Similar to BlazorSize EdCharbeneau/BlazorSize )
For now, with the newly released exposed events on TelerikWindow; LeftChanged and TopChanged, I guess the solution could be to wrap everything in a TelerikWindow? Then run events on these change events?
Otherwise.... if we were to use BlazorSize on top of Telerik, would we place the BlazorSize root element inside the TelerikRootComponent or outside?
Just unsure if/how it would interfere......
I'm using trial licence to test your component, I just started today and the first thing I'm trying is the layout.
We need a customizable dashbord where we can place our "widget" and store its layout.
I see you have TileLayout component but it doesn't support a proper flexible dashboard design because everytime I resize an element (or reorder) the grid auto-adjust, while we need to be possible to have "holes" in between while designing the dashboard, otherwise it's difficult to have control over the design process and UX is bad.
A simple example to explain the problem, is if I want to design a dashboard starting to place a vertical widget on the right. It's not possible until I don't fill the left space with other controls.
That's not what we'd expect, is this because of a bad usage or because it's not supported? (I think the latter because I tried to play with different settings)
What I'd expect is, for example looking at your demo in https://demos.telerik.com/blazor-ui/tilelayout/overview, that if I resize the first panel (Page Views) the content on the right stays there and don't move to the left
In your documentation you say that you follow CSS Grid Layout but css grid layout allows you to have empty elements in your template, while I see this is a missing feature that would be really useful
Example of the unwanted behavior:
Starting point:
I'm going to resize (shrink) the Page Views panel
Actual result:
Expected result:
note the empty cell.
Basically components should be able to be placed freely on the grid and should be locked in place during resize (it could be an option)
Let me know if I've to give more details,
Thanks
So the Date Filter is not working.
I believe this is because my data has Time with it, I couldn't find any help on how to ignore the time part in the date filter.
<GridColumn Title="Date Visit" DisplayFormat="{0:D}" Field="DateOfVisit">
<Template>
<label class="gridLabel">Date Visit:</label>
@{
if ((context as Visit).DateOfVisit!= null)
{
@((context as Visit).DateOfVisit.Value.ToShortDateString())
}
}
</Template>
</GridColumn>
I wasn't sure if I should report this as a bug or not. With a modal window, you can tab beyond the modal window into the URL, and then continue on into the page behind the modal window itself. I was able to recreate this on the Modal demo, and fire a search, even though I couldn't click to get there. As I saw in another post that it is essentially a viewport modal (https://feedback.telerik.com/blazor/1510450-prevent-the-user-from-dragging-a-window-out-of-the-viewport), would it be possible to force modal to be system modal, as was available back in the ancient Winforms days?
---
ADMIN EDIT
That's how a web page behaves. Code in a web page cannot and should not prevent the user from using their OS. The browser chrome (address bar, buttons and so on) are part of the OS, and as such are beyond the sandbox of the web app. The web app is limited to the viewport, it cannot go out of it, or interact or control elements outside of it. Anything else would be a severe security issue.
A system-wide modal dialog is only possible though a native application, but not in a web application.
---
The attributes that the Telerik Input components, FormItem, and FormGroup should all be consistent in the attributes that are supported. For example, the TelerikSlider component doesn't support an Id property. The FormGroup component doesn't support a Class property.
If I place the Slider inside a FormItem Template and provide my own label. I can't associate the label with the Slider since there is no Id property.
Also, if I am using a FormGroup to make sure that two input controls are shown horizontally install of vertically, I can't override the gray horizontal rule that shows with the group, especially when I am not providing LabelText. I don't want to override this at the TelerikForm as I would like the default behavior in specific instances.
The attached screen shot highlights the issue. Here is the razor component markup. Note: Replace the custom RecSetSelector component with a dropdownlist.
@{
var model = ViewModel.Model;
}
<TelerikForm EditContext="@EditContext"
Columns="2"
ColumnSpacing="20px"
Orientation="FormOrientation.Vertical"
OnValidSubmit="OnValidSubmit">
<FormValidation>
<FluentValidationValidator />
</FormValidation>
<FormItems>
<FormGroup LabelText="Set options">
<FormItem>
<Template>
<label class="k-label k-form-label" for="setName">Set Name</label>
<TelerikTextBox Id="setName" @bind-Value="@model.SetName"></TelerikTextBox>
</Template>
</FormItem>
<FormItem>
<Template>
<TelerikDateRangePicker @bind-StartValue="@model.StartDate"
@bind-EndValue="@model.EndDate"
Min="@ViewModel.MinStartDate"
StartId="startDate"
EndId="endDate"
DisabledDates="@ViewModel.DisabledDates">
</TelerikDateRangePicker>
</Template>
</FormItem>
<FormGroup Columns="2">
<FormItem>
<Template>
<label class="k-label k-form-label" for="allowAutoFill">Allow Auto Fill</label>
<TelerikCheckBox Id="allowAutoFill" @bind-Value="@model.AllowAutoFill"></TelerikCheckBox>
</Template>
</FormItem>
<FormItem Field="@nameof(model.RequiredRecsToExpire)">
<Template>
<label class="k-label k-form-label">Required Recs to Expire</label>
<TelerikSlider @bind-Value="@model.RequiredRecsToExpire"
Min="0"
Max="20"
SmallStep="1"
LargeStep="5"
ShowButtons="false"/>
</Template>
</FormItem>
</FormGroup>
</FormGroup>
<FormGroup LabelText="Initial starting point">
<FormItem LabelText="existingSets">
<Template>
<label class="k-label k-form-label" for="existingSets">From existing recommendation sets:</label>
<RecSetSelector AvailableSets="@ViewModel.AvailableSets"
IsNew="true"
SelectedSetId="@ViewModel.SelectedSetId"
OnSetSelected="@OnSetSelected" />
</Template>
</FormItem>
<FormItem>
<Template>
<label class="k-label k-form-label" for="eanList">From a list of EANs:</label>
<TelerikTextArea Id="eanList"
@bind-Value="@ViewModel.EanList"
AutoSize="true">
</TelerikTextArea>
</Template>
</FormItem>
</FormGroup>
<FormItem ColSpan="2" Field="@nameof(model.Comment)">
<Template>
<TelerikTextArea Id="comment"
@bind-Value="@model.Comment"
AutoSize="true">
</TelerikTextArea>
</Template>
</FormItem>
<ValidationSummary />
</FormItems>
<FormButtons>
<div class="justify-content-end">
<TelerikButton ButtonType="ButtonType.Button" OnClick="OnCancel">Cancel</TelerikButton>
<TelerikButton ButtonType="ButtonType.Submit" Primary="true">Save</TelerikButton>
</div>
</FormButtons>
</TelerikForm>
It would be really cool to be able to edit documents much like the WPF syntax editor.
Our use case is that we use blazor for our admin tools and we need to give a better look and feel (color coding) to some stored SQL and XML. Nothing fancy just a better experience.
Hi,
I have a grid, it has quite a few columns - maybe 10-15, and this is causing 2 problems which are kind of related.
First problem is it tries to squash them all onto the screen making them all narrow and that hides the header text - I have played with horizontal scrollbar but so far I've only managed to resize them after it loads (or to workaround that I have tried save state after I've resized them with some success, but i'd really prefer the default starting point to be wider than the screen - if you have an example you can show me how to do this?)
Next problem is when I add a filter row to it - its basically unusable. Even though the columns are narrow, they look like they should be wide enough, but instead what happens is the filter button appears in the middle by itself and nothing else appears - sometimes I see " ___ Y " but most of the time its " Y ". It seems very poor use of space by default. This is the material theme.
Can you help? I did try with the filter menu but it is more complicated for our users and they prefer the idea of filterrow, plus it also crashes intermittently (see below for callstack).
Intermittent crash in filter menu - happens when user clicks the menu then clicks filter, before the filter menu is displayed.
Hi !,
I just installed and started to use Telerik Blazor , all controls are working fine but when trying to use the Dialog Component, after adding the cascading parameter in the code section i getting the following error :
Thank you for your support.
Regards,
Alberto
I am getting a combination of these two errors below when instituting SignalR
connection = new HubConnectionBuilder()
.WithUrl(nm.ToAbsoluteUri("DataHub"))
.Build();
connection.On("ReceivedSyncRecord", this.OnReceiveSync);
StateHasChanged();
await connection.StartAsync();
System.IO.InvalidDataException: Invalid negotiation response received. ---> System.Text.Json.JsonReaderException: '<' is an invalid start of a value. LineNumber: 2 | BytePositionInLine: 0. at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes) at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker) at System.Text.Json.Utf8JsonReader.ReadFirstToken(Byte first) at System.Text.Json.Utf8JsonReader.ReadSingleSegment() at System.Text.Json.Utf8JsonReader.Read() at Microsoft.AspNetCore.Internal.SystemTextJsonExtensions.CheckRead(Utf8JsonReader& reader) at Microsoft.AspNetCore.Http.Connections.NegotiateProtocol.ParseResponse(ReadOnlySpan`1 content) --- End of inner exception stack trace --- at Microsoft.AspNetCore.Http.Connections.NegotiateProtocol.ParseResponse(ReadOnlySpan`1 content) at Microsoft.AspNetCore.Http.Connections.Client.HttpConnection.NegotiateAsync(Uri url, HttpClient httpClient, ILogger logger, CancellationToken cancellationToken) at Microsoft.AspNetCore.Http.Connections.Client.HttpConnection.GetNegotiationResponseAsync(Uri uri, CancellationToken cancellationToken) at Microsoft.AspNetCore.Http.Connections.Client.HttpConnection.SelectAndStartTransport(TransferFormat transferFormat, CancellationToken cancellationToken) at Microsoft.AspNetCore.Http.Connections.Client.HttpConnection.StartAsyncCore(TransferFormat transferFormat, CancellationToken cancellationToken) at System.Threading.Tasks.ForceAsyncAwaiter.GetResult() at Microsoft.AspNetCore.Http.Connections.Client.HttpConnection.StartAsync(TransferFormat transferFormat, CancellationToken cancellationToken) at Microsoft.AspNetCore.Http.Connections.Client.HttpConnectionFactory.ConnectAsync(EndPoint endPoint, CancellationToken cancellationToken) at Microsoft.AspNetCore.Http.Connections.Client.HttpConnectionFactory.ConnectAsync(EndPoint endPoint, CancellationToken cancellationToken) at Microsoft.AspNetCore.SignalR.Client.HubConnection.StartAsyncCore(CancellationToken cancellationToken) at Microsoft.AspNetCore.SignalR.Client.HubConnection.StartAsyncInner(CancellationToken cancellationToken) at System.Threading.Tasks.ForceAsyncAwaiter.GetResult() at Microsoft.AspNetCore.SignalR.Client.HubConnection.StartAsync(CancellationToken cancellationToken) at TexicanInc.Pages.UserPages.ActiveWorkQueue.OnInitializedAsync() in C:\Users\ShawnRye\source\repos\TexicanInc\TexicanInc\Pages\UserPages\ActiveWorkQueue.razor:line 548
Is it possible to show (modal confirmation) handle filtering before apply? Show pop-up modal, and when Confirm, start filtering, othewise cancel!!
Currently when setting up a new Blazor app I need to go to the docs each time or look at a reference project to remember the resource paths for the CSS files. Additionally once you have a project if you are relying on a CDN but later update the NuGet package your app will be referencing the wrong css bundle unless you remembered to also update your layout.
Instead of having this as a magic string that is required in each project, it would be great if a new helper class could be introduced. As an example it might look something like:
public class TelerikResources
{
public class Cdn
{
public class Default
{
public string Path = "";
}
public class Bootstrap
{
public string Path = "";
}
public class Material
{
public string Path = "";
}
}
public class Local
{
public class Default
{
public string Path = "";
}
public class Bootstrap
{
public string Path = "";
}
public class Material
{
public string Path = "";
}
}
}
This would have the benefit that in the layout you might simply have:
<link href="@TelerikResources.Cdn.Bootstrap.Path" rel="stylesheet" />
This has a few benefits. It's easier to remember, easier to discover the other available prebuilt styles, and removes issues with pointing at the wrong path after updating library versions (assuming that you're using the Cdn rather than local resource).
Hi,
I have found some evidence of a bug which I believe add to the portrait of this issue which has already been reported but declined. Could you please have a look at my recent comments and report it to follow on it (so it remains active)?
https://feedback.telerik.com/blazor/1532895-initcheckbox-was-undefined
Regards.
Maurice.