I have a Blazor Server app using TelerikGrid. The grid has lots of columns and I have FilterMode set to FilterRow and the default filtering works great. However, since the grid is also set to ScrollMode Virtual, there is no immediate indication of how well the filter is defined. To fix this I want to display the number of records that are actually "filtered in" in comparison to the total number of records possible so that the user can tell if they've (for example) selected nearly all the records.
I've looked everywhere and I cannot find a way to ask the grid how many records are currently filtered in.
It seems like I could take the FilterDescriptors, convert them to SQL for a where clause, and run the query every time they change the filter, but that seems like such a waste to essentially run the filter twice every time it reloads. Even though my dataset is currently small enough that I cache the whole thing on the server, I'm still doing twice the work to get to a number the grid must know.
Here is a snippet from my Razor file:@code {
privateint _filteredCount = 0; // How to set this?
}
<TelerikGrid Data="@_applications"
Pageable="false"
Sortable="true"
Resizable="true"
FilterMode="@GridFilterMode.FilterRow"
Width="100%"
ScrollMode="@GridScrollMode.Virtual"
OnStateInit="(GridStateEventArgs<ApplicationListDTO> args) => StateInitHandler(args)"
OnStateChanged="(GridStateEventArgs<ApplicationListDTO> args) => StateChangedHandler(args)"
Height="540px" RowHeight="60">
<GridColumns>
Column definitions left outfor brevity
</GridColumns>
</TelerikGrid>
<div class="applicationCount">@(_applications.Count()) applications found, @_filteredCount listed</div>
Suggestions?
I am trying to create a new project using Telerik C# Blazor Application template in Visual Studio 2022. I am able to go through the template steps however on finish no project is created. The message bar at the bottom of visual studio says it was successful. I have Telerik UI for Blazor Extension installed and enabled.
Is there a way to have a dropdownlist item be a color based on some criteria?

Hi @all,
I am currently trying to create a TreeDropDownComponent.
so far it works, but I have the problem that it doesn't make sense inside a grid.
I am currently trying to create a TreeDropDownComponent.
so far it works, but I have the problem that it doesn't make sense inside a grid.
Because this component inside the grid cell
and so the popupElement is not above the grid. Does anyone have an idea how I can fix this?
here is my css and code:
@using Telerik.Blazor
@using Telerik.Blazor.Components
<div id="treeSelectorComponent">
<span class="telerik-blazor k-dropdownlist k-valid k-picker k-picker-solid k-picker-md k-rounded-md"
onclick="@ToggleDropdown">
<span class="k-input-inner @( DropDownShown ? "k-state-focused" : "" )">
<span class="k-input-value-text">@GetSelectedItemsText()</span>
</span>
<button class="telerik-blazor k-button k-input-button k-button-solid k-button-md k-button-solid-base k-icon-button"
type="button">
<span class="telerik-blazor k-button-icon k-icon k-i-caret-alt-down"></span>
</button>
</span>
<TelerikAnimationContainer @ref="dropdown" Class="k-popup treeView-scrollable-element" >
<TelerikTreeView Data="TreeItems"
SelectionMode="TreeViewSelectionMode.Single"
OnItemClick="OnTreeItemClicked">
<TreeViewBindings>
<TreeViewBinding ParentIdField="ParentId"
TextField="Text"
IdField="Id">
<ItemTemplate>
@{
TreeItemSelector item = context as TreeItemSelector;
<span>@item!.Text</span>
}
</ItemTemplate>
</TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
</TelerikAnimationContainer>
</div>
@code {
private bool DropDownShown { get; set; }
private TelerikAnimationContainer dropdown;
[Parameter, EditorRequired]
public List<TreeItemSelector> TreeItems { get; set; } = new List<TreeItemSelector>();
[Parameter]
public int TreeId { get; set; } = default!;
[Parameter]
public EventCallback<int> TreeIdChanged { get; set; }
async Task ToggleDropdown()
{
DropDownShown = !DropDownShown;
await dropdown.ToggleAsync();
}
string GetSelectedItemsText()
{
return TreeItems.FirstOrDefault(p => p.Id == TreeId)?.Text!;
}
private async Task OnTreeItemClicked(TreeViewItemClickEventArgs arg)
{
var item = arg.Item as TreeItemSelector;
TreeId = item!.Id;
if(TreeIdChanged.HasDelegate)
await TreeIdChanged.InvokeAsync(TreeId);
await ToggleDropdown();
}
public class TreeItemSelector
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
}
}
#treeSelectorComponent {
.k-popup {
&.treeView-scrollable-element{
overflow-y: auto;
max-height: 300px;
}
}
}
Hello, good afternoon.
I'm following this page's documentation to build a hierarchy grid. I just copied and pasted the code from the "Expand Rows From Code" example into my project just to see how it works (we are migrating Razor projects to Blazor).
I can see the grid is displayed with the "+" button to expand child grids on each row and even the button to expand all the rows at the top as it is shown in the image below:
Both do nothing, and DetailTemplate doesn't show up.
Some technical stuff:
I hope this helps. I tried following the documentation without success.
I have a TelerikGrid and the TelerikLoader is showing when data is OnRead.
My rows have detail template, that when you expland the row, I want another Loader window displayed while the detail data is retrieved.
I have tried the samples from Telerik but cannot get it to work. Either the Loader does not show at all, OR, I can get it to show and never hide
pls halp
G



Hello,
I want to create a grid like this with Telerik Blazor Grid:
Is it possible to do this using Multi Column Header function ?
here's my code :
@{
strMonth = string.Empty;
iWeek = 0;
<GridColumn Field="@dtGrid.Columns[0].ColumnName" FieldType="@dtGrid.Columns[0].DefaultValue.GetType()" Width="150px"></GridColumn> //Member
<GridColumn Field="@dtGrid.Columns[1].ColumnName" FieldType="@dtGrid.Columns[1].DefaultValue.GetType()" Width="150px"></GridColumn> //Project
for (int colMonth = 2; colMonth <= dtGrid.Columns.Count - 1; colMonth++)
{
if (DateTime.TryParse(dtGrid.Columns[colMonth].ColumnName, out dt))
{
if (strMonth != dt.ToString("MMMM"))
{
strMonth = dt.ToString("MMMM");
<GridColumn Title="@strMonth" FieldType="@dtGrid.Columns[0].DefaultValue.GetType()">
<Columns>
@{
iWeek = Helper.Common.GetWeekOfYear(dt);
for (int colWeek = colMonth; colWeek <= dtGrid.Columns.Count - 1; colWeek++)
{
if (DateTime.TryParse(dtGrid.Columns[colWeek].ColumnName, out dt))
{
if (strMonth != dt.ToString("MMMM"))
{
colMonth = colWeek;
break;
}
if (iWeek != Helper.Common.GetWeekOfYear(dt))
{
colMonth = colWeek;
break;
}
<GridColumn Title="@string.Format("Week {0}", iWeek)" FieldType="@dtGrid.Columns[0].DefaultValue.GetType()">
<Columns>
@for (int iDay = colWeek; iDay <= dtGrid.Columns.Count - 1; iDay++)
{
if (DateTime.TryParse(dtGrid.Columns[iDay].ColumnName, out dt))
{
if (iWeek != RR.BusinessLogicLayer.Helper.Common.GetWeekOfYear(dt))
{
colWeek = iDay;
break;
}
<GridColumn Field="@dt.Day.ToString()" FieldType="@dtGrid.Columns[colWeek].DefaultValue.GetType()" Width="150px"></GridColumn>
}
}
</Columns>
</GridColumn>
}
}
}
</Columns>
</GridColumn>
}
}
}
}Above code only can get me until Month Column, when i debug it iWeek only fires after all column rendered ? so , it can't create the Child Column of Months Column.
How can i fix it so it can show Multi Header of Months, Week and Day