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.
Hello team;
Can you please tell us in what version or approximate time of arrival of the new Toolbar?
Suggestion: It would be helpful if the roadmap list is sorted by "In progress" status. This way we can plan accordingly.
Thanks!
.png){kind=avatar}
Hello
Just a minor request re. the Grid search box :)
The typical UI behaviour of a search box, is that when you start typing in it, an "X" will appear within the box, allowing you to clear the value.
This would also be consistent with the Blazor combo-box behaviour.
Cheers
Phil
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
I would like to pass a defined piece of data in when I add a new row in a hierarchical Blazor grid. in the example below, I have a hierarchy of Agency > District > School. When I add a new school within a district, I would like to pass the District ID so that the user does not have to select it or type it in.
I have a district ID column in the schools grid, but (a) it would be better if the user did not see this and (b) when I click "Add school" that field is always passed as empty. Is there any way to pass the
districtSchools.Dist.DISTRICT_ID
variable when I add a row?
<TelerikGrid Data="@Agencies" Sortable="true" Reorderable="true" OnUpdate="@UpdateHandlerAgency">
<DetailTemplate Context="granteeAgency">
@{
var leadAgency = granteeAgency as Agency;
<TelerikGrid Data="leadAgency.Districts" OnUpdate="@UpdateHandlerDistrict" OnRowRender="@OnRowRenderHandlerDistrict">
<GridColumns>
<GridColumn Field="@(nameof(District.Dist.DistrictName))" Editable="false">
<Template>
@((context as District).Dist.DistrictName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(District.DistAlloc))">
<Template>
@((context as District).DistAlloc.ToString("C"))
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
<DetailTemplate Context="districtSchools">
<TelerikGrid Data="districtSchools.Schools" OnCreate="@CreateHandlerSchool" OnDelete="@DeleteHandlerSchool" OnUpdate="@UpdateHandlerSchool" OnRowRender="@OnRowRenderHandlerSchool">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add School</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field="@(nameof(School.SchoolName))">
<Template>
@((context as School).SchoolName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(School.SchoolAlloc))">
<Template>
@((context as School).SchoolAlloc.ToString("C"))
</Template>
</GridColumn>
<GridColumn Field="" Visible="true">
<Template>
@districtSchools.Dist.DISTRICT_ID
</Template>
<EditorTemplate>
@districtSchools.Dist.DISTRICT_ID
</EditorTemplate>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
</DetailTemplate>
</TelerikGrid>
}
</DetailTemplate>
<GridColumns>
<GridColumn Field="@(nameof(Agency.AgencyName))" Editable="false">
<Template>
@((context as Agency).AgencyName.ToString())
</Template>
</GridColumn>
<GridColumn Field="@(nameof(Agency.AgencyAlloc))">
<Template>
@((context as Agency).AgencyAlloc.ToString("C"))
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
Hi Telerik team,
in our Blazor App we have implemented the skip handling logic according to your documentation, but we have noticed an issue. When the sum of the skip and the page size is bigger then the total count of the items and we try to set the Skip property for the second time, some of the top items are not shown.
To demonstrate this, we have created a simple app: https://github.com/0rce/blazor-app-telerik-grid-skip-bug.git
Please clone the repo, start the application and follow the steps displayed above the grid to reproduce the bug.
Do you think it is a bug or is our implementation wrong?
Best regards,
Orce
---
ADMIN EDIT
I have linked this case in the Limitations section of the documentation and you can find more details and a path forward in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/grid-large-skip-breaks-virtualization.
Considering this and why the grid cannot and should not change this value for you, I am marking this with the "Won't Fix" status - I acknowledge it is behavior that is less than ideal, yet it stems from application logic and the grid cannot fix that.
If someone is looking at the provided repository - please also be aware that it showcases an invalid approach for fetching grid data that I strongly advise against. Review the rest of the thread for more details.
---
Greetings, tell me, I can't figure out what's the matter.
When using the TelerikDatePicker component together with the bootstrap tooltip, the tooltip continues to hang until the page is reloaded.
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
Hi,
I have seen Form - Auto-Generated sample in Blazor which is nice and handy, but what should I do, if I need to define a Dynamic event by code for a dropdown change for example ?
I might need to define and handle an event for each control that is dynamically generated. I hope someone can help.
Regards
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
I would like to suggest couple of helpful features on the OnRowRender event on the grid component. I know these can be done with a custom row template. But if a couple of additional properties would be tacked on to "GridRowRenderEventArgs args", it would be helpful.
- Columns and Cells collection
Would like to override the display of a databound item, but not the underlying data. - Selection
Based on props of the databound item, it would be helpful to disable the ability to select the row.
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>
Hello
I noticed the DateRangePicker "OnChange" fires "on blur".
Confirmed by the docs;
https://docs.telerik.com/blazor-ui/components/daterangepicker/events#onchange
Is it possible to expose OnInput even for a "react style" onchange event?
https://linguinecode.com/post/onblur-vs-onchange-react-text-inputs
I think the StartValueChanged and EndValueChanged events have the same behaviour so unbinding might not be a solution..?
Attached is a use case where it is confusing because the events are not in sync... You'll see the grid data changes (data bound), but OnChange after you click out.