Hi,
I haven't been able to find this as a request or as a topic of discussion (If it iss feel free to point me to it and close this request) but I feel the Grouping feature is limiting. If I use the group field in say the DropDownList the grouping works fine but it orders it alphabetically.
I propose adding a number of features to enhance this. The first being a GroupAscending or GroupDescending tag. Takes a boolean value and allows you to change the order to ascending (default/True) or descending (False).
The second, and more complicated feature upgrade could be a GroupOrder tag. This would take a List of the group field names ordered in the way you require and apply that order to the grouping in the DropDownList. for instance if you had the list ordered as Category 1, Category 3, Category 2 it would display the items in each grouping in that order top to bottom.
Regards,
Luke
Can a feature like this capability in the Winforms Radmap be added?
I know smart components are still in preview but please make this available as soon as you can in the editor component. This would be a HUGE deal!
Github link
Need feature parity in the Blazor rich text editor similar to the Angular rich text editor. Need access to add custom schema elements and tag highlighted text with those new schema elements.
https://www.telerik.com/kendo-angular-ui/components/editor/schema/
currently am able to do this with custom Marks in the angular version.
The current privot grid is a good start, but it is missing some key features.
- Being able to resize columns
- Have custom column and row header/footers
- Export to excel
For reasons unknown, our TelerikGrid rows all render with each <tr> element having the "k-alt k-table-alt-row" classes associated with them. This causes the background colour for each row to be the same, rather than alternating between two colours.
For example, the following block of code...
<TelerikGrid Id="@(Utility.CleanCssId("CrewGrid"))"
DetailTemplate="GridDetailTemplate"
EnableLoaderContainer="@ShowLoading"
Groupable="false"
Height="100%"
OnRead="@OnGridRead"
OnStateChanged="@OnGridStateChanged"
OnStateInit="@OnGridStateInit"
Pageable="true"
PageSize="@PageSize"
PageSizeChanged="@OnGridPageSizeChanged"
Reorderable="IsLargeScreen"
Resizable="IsLargeScreen"
SelectionMode="GridSelectionMode.Single"
ShowColumnMenu="IsLargeScreen"
Size="@GetGridSize"
Sortable="true"
SortMode="SortMode.Multiple"
TItem="CrewListItem"
@ref="Grid"
@bind-SelectedItems="@SelectedItems"
OnRowRender="OnRowRender">
<NoDataTemplate>
<strong>@RecordsMessage</strong>
</NoDataTemplate>
<GridSettings>
<GridColumnMenuSettings Lockable="false" FilterMode="ColumnMenuFilterMode.None" />
<GridPagerSettings InputType="PagerInputType.Buttons" PageSizes="@PageSizes" ButtonCount="5" Adaptive="false" Position="PagerPosition.Bottom" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(CrewListItem.Color)"
Width="@(IsLargeScreen ? "40px" : "50px")"
Resizable="false"
ShowColumnMenu="false"
Groupable="false"
ShowColumnChooser="false"
Sortable="false"
HeaderClass="k-text-transparent"
OnCellRender="OnGridCellRender">
<Template>
@{
var item = (CrewListItem)context;
<M360ListColumnColor Color="@item.Color" IsLargeScreen="IsLargeScreen" />
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(CrewListItem.Name)" Title="@TMessages.Crew" OnCellRender="OnGridCellRender" VisibleInColumnChooser="false">
<Template>
@{
var item = (CrewListItem)context;
<div class="k-d-flex k-h-full @(IsLargeScreen ? "k-align-items-stretch" : "k-align-items-center")">
<M360ListColumnLink Url="@string.Concat("crew/", item.Id)" Text="@item.Name" EntityType="Crew" IsPrimary="true" />
</div>
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(CrewListItem.DivisionsJson)" Title="Division(s)" Sortable="true" Visible="IsLargeScreen" OnCellRender="OnGridCellRender">
<Template>
@{
var item = (CrewListItem)context;
<M360ListColumnList Items="@item.Divisions.ToList()" />
}
</Template>
</GridColumn>
.
.
.
</GridColumns>
</TelerikGrid>...results in markup like this...
<tbody class="k-table-tbody" role="rowgroup">
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="0"
aria-rowindex="1"
>
. . .
</tr>
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="1"
aria-rowindex="3"
>
. . .
</tr>
<tr
role="row"
class="k-master-row k-table-row k-alt k-table-alt-row"
data-render-row-index="2"
aria-rowindex="5"
>
. . .
</tr>
. . .
</tbody>
I can see that the "aria-rowindex" increments by two, yet the "data-render-row-index" increments by one. Are we missing something simple, yet crucial here? What could cause the skipping of rows during render?
Many thanks,
Nem
Sometimes the Gantt provides better visibility when we can split tasks into segments on the same row. This is a new feature to SyncFusion and would be very useful to extend the possibilities of the Telerik Gantt as well.
This is an example of what it looks like:
I could make use of this in a couple of ways. Some of my tasks require to get to a preliminary point at a certain time and a finished point later. Those are not continuous buckets of work, but they are so closely related that it would make visual presentation more intuitive and simpler if they were displayable that way.
I might also use this as a method of displaying a higher level read-only gantt where I want to condense a few milestones or task windows into a single row.
Sometimes we need custom filter logic.
The advised approach currently is to use the OnRead event and have to manage the fetching of data manually https://docs.telerik.com/blazor-ui/components/grid/manual-operations
If we could set a column to use a filter function that has Func<GridDataType, Bool>? then we could apply this complex filter without having to repeatedly query the database and apply filters server side.
For example, if I wanted to filter a column that related to an object that had a property that was a Collection<T> I could check the values of this collection against a filter UI I have made somewhere in the grid or outside of it. Then when the columns filterdescriptior was reviewed it would check my Func which returned True if any of the Rows Collection<T> matched my custom filter UI options.
Example use case that this feature would allow;
We have edit dialogs with editable fields on them, and we want to display a confirmation dialog if the user tries to close the edit dialog without saving. Simplified code to illustrate the issue:
Please consider refactoring Telerik.DataSource to allow for Dynamic Linq expressions rather than fixed Member.
1. You don't have to reinvent the wheel in creating lambda expressions. You can simplify Telerik.DataSource code to just use Dynamic Linq.
2. Allows support for Sorts & Grouping to be expressions such as "Math.Abs(field ?? 0)" rather than just "field".
Trying to group by some nullable column. Expanding the group returns the entire dataset instead of only these rows with value == null.
Use case: Some users can not be assigned to any Team. Want to group by Teams and see users not assigned to any Team.
Steps to reproduce:
- Using Virtual Scrolling with OnRead method.
- Have a nullable column e.g. string?.
- Trying to group by this column gives unexpected results.
Expected results:
Expanding the group by not assigning Teams returns only these users what doesn't have any teams by applying filtering.
Actual results:
Expanding the group by not assigning Teams returns all users without filtering.
Code:
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
Scroll through the groups or expand them to load their data on demand
<TelerikGrid TItem="@object"
LoadGroupsOnDemand="true"
Groupable="true"
OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
OnRead="@ReadItems"
ScrollMode="@GridScrollMode.Virtual" PageSize="20" RowHeight="60"
Navigable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Height="600px">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" FieldType="@typeof(string)" Groupable="false" />
<GridColumn Field="@nameof(Employee.Team)" FieldType="@typeof(string)" Title="Team" />
<GridColumn Field="@nameof(Employee.Salary)" FieldType="@typeof(decimal)" Groupable="false" />
<GridColumn Field="@nameof(Employee.IsOnLeave)" FieldType="@typeof(bool)" Title="On Vacation" />
</GridColumns>
</TelerikGrid>
@code {
List<object> GridData { get; set; }
protected async Task ReadItems(GridReadEventArgs args)
{
// sample data retrieval, see comments in the service mimic class below
DataEnvelope<Employee> result = await MyService.GetData(args.Request);
if (args.Request.Groups.Count > 0)
{
args.Data = result.GroupedData.Cast<object>().ToList();
}
else
{
args.Data = result.CurrentPageData.Cast<object>().ToList();
}
args.Total = result.TotalItemCount;
}
void OnStateInitHandler(GridStateEventArgs<object> args)
{
// set initial grouping
GridState<object> desiredState = new GridState<object>()
{
GroupDescriptors = new List<GroupDescriptor>()
{
new GroupDescriptor()
{
Member = "Team",
MemberType = typeof(string)
},
new GroupDescriptor()
{
Member = "IsOnLeave",
MemberType = typeof(bool)
}
}
};
args.GridState = desiredState;
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string? Team { get; set; }
public bool IsOnLeave { get; set; }
public decimal Salary { get; set; }
}
public class DataEnvelope<T>
{
public List<AggregateFunctionsGroup> GroupedData { get; set; }
public List<T> CurrentPageData { get; set; }
public int TotalItemCount { get; set; }
}
public static class MyService
{
private static List<Employee> SourceData { get; set; }
public static async Task<DataEnvelope<Employee>> GetData(DataSourceRequest request)
{
if (SourceData == null)
{
SourceData = new List<Employee>();
var rand = new Random();
for (int i = 1; i <= 3; i++)
{
SourceData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 100,
IsOnLeave = i % 3 == 0,
Salary = rand.Next(1000, 5000)
});
}
SourceData.Add(new Employee()
{
EmployeeId = 3,
Name = "Employee " + 3.ToString(),
Team = null,
IsOnLeave = 3 % 3 == 0,
Salary = rand.Next(1000, 5000)
});
}
await Task.Delay(500);// deliberate delay to showcase async operations, remove in a real app
// retrieve data as needed, you can find more examples and runnable projects here
// https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
var datasourceResult = SourceData.ToDataSourceResult(request);
DataEnvelope<Employee> dataToReturn;
if (request.Groups.Count > 0)
{
dataToReturn = new DataEnvelope<Employee>
{
GroupedData = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList(),
TotalItemCount = datasourceResult.Total
};
}
else
{
dataToReturn = new DataEnvelope<Employee>
{
CurrentPageData = datasourceResult.Data.Cast<Employee>().ToList(),
TotalItemCount = datasourceResult.Total
};
}
return await Task.FromResult(dataToReturn);
}
}
}
Greetings,
I find input adornments very useful. However I noticed that when I click them, the control doesn't get the focus. E.g., with this code:
<TelerikTextBox>
<TextBoxPrefixTemplate>
First name
</TextBoxPrefixTemplate>
</TelerikTextBox>Clicking on First name doesn't do anything. I would expect the control to be focused when I do that.
You will find an image in attachment showing a green area that, when clicked, brings focus on the textbox. Input adornment is in dark gray. I'm using it as a label for the control but even if it was simply an icon, it would be strange to not be able to focus on the control when clicking it.
The following code successfully renders the pdf viewer when the edit form is commented out, but when indside the pdf viewer it fails to render and gives the following error:
"Telerik.Blazor.Components.TelerikComboBox`2[Telerik.Blazor.Components.PdfViewer.Models.PdfViewerZoomLevelDescriptor,System.String] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.See more at https://docs.telerik.com/blazor-ui/knowledge-base/requires-valueexpression ."
@page "/pdfBug"
@* <EditForm Model="_fakeContext"> *@
<TelerikPdfViewer Data="@PdfSource"
OnDownload="@OnPdfDownload"
Height="600px"></TelerikPdfViewer>
@* </EditForm> *@
@code {
private byte[] PdfSource { get; set; }
private async Task OnPdfDownload(PdfViewerDownloadEventArgs args)
{
args.FileName = "PDF-Viewer-Download";
}
protected override void OnInitialized()
{
PdfSource = Convert.FromBase64String(PdfBase64);
base.OnInitialized();
}
private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy00MCAtNjQgMjYwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihUZWxlcmlrIFBkZlZpZXdlciBmb3IgQmxhem9yKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA1CjAwMDAwMDAwMDAgNjU1MzUgZgowMDAwMDAwMDIxIDAwMDAwIG4KMDAwMDAwMDA4NiAwMDAwMCBuCjAwMDAwMDAxOTUgMDAwMDAgbgowMDAwMDAwNDkwIDAwMDAwIG4KdHJhaWxlciA8PCAgL1Jvb3QgMSAwIFIgL1NpemUgNSA+PgpzdGFydHhyZWYKNjA5CiUlRU9G";
private FakeContext _fakeContext = new FakeContext() { Name = "Test" };
public class FakeContext
{
public string Name { get; set; }
}
}
I use TelerikMultiSelect as a component for custom filter:
<FilterMenuTemplate>
<TelerikMultiSelect Value="@(AlreadySelectedFilterValues(context.FilterDescriptor))"
OnRead="@OnReadWrapper"
ValueMapper="@ValueMapperWrapper"
TItem="@FilterItemDto"
TValue="@TFilterValue"
ValueField="@nameof(FilterItemDto.Id)"
TextField="@nameof(FilterItemDto.Name)"
AutoClose="true"
Filterable="true"
ClearButton="true"
DebounceDelay="500"
OnChange="@((object newValue) => OnMenuFilterChange(newValue, context))"/>
</FilterMenuTemplate>
Trying to render already selected filters gives two "magic" items in context.FilterDescriptor in AlreadySelectedFilterValues:
These items appear only if TelerikMultiSelect is empty. If I select some from MultySelect these two items disappear and everything works as expected.
GridState has an empty list of FilterDescriptos.
AggregatedAccountNames - string? column.
TFilterValues can be int, int? or string, no matter, the same behavior.
TFilterItemDto - class with int? Id and and string Name fields.
As expected value I expect to have empty FilterDescriptos if nothing was selected.
We find this in our infrastructure but it can be reproduced even in Telerik docs.
Docs page: https://docs.telerik.com/blazor-ui/components/grid/grouping/overview try to drop all three columns using drag and drop in sequence: Team, Name, On Vacation.
Expected sequence: Team, Name, On Vacation
Expected sequence: Team, On Vacation, Name
All Elements are always added as 1 item. It is an important feature for us, as our customers use it frequently.
===
TELERIK EDIT:
A possible workaround is to intercept the grouping and reorder the groups:
@using Telerik.DataSource
<p>Group by a third column, so that it should come last in the Group Panel:</p>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Sortable="true"
Groupable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )"
OnStateChanged="@( (GridStateEventArgs<Employee> args) => OnGridStateChanged(args) )">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" />
<GridColumn Field="@nameof(Employee.Team)" />
<GridColumn Field="@nameof(Employee.Salary)" />
<GridColumn Field="@nameof(Employee.OnVacation)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Employee>? GridRef { get; set; }
private List<Employee> GridData { get; set; } = new();
private void OnGridStateInit(GridStateEventArgs<Employee> args)
{
args.GridState.GroupDescriptors = new List<GroupDescriptor>();
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.Team),
MemberType = typeof(string)
});
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.OnVacation),
MemberType = typeof(bool)
});
}
private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
{
if (args.PropertyName == "GroupDescriptors" && args.GridState.GroupDescriptors.Count > 2 && GridRef != null)
{
var secondGroupDescriptor = args.GridState.GroupDescriptors.ElementAt(1);
args.GridState.GroupDescriptors.Remove(secondGroupDescriptor);
args.GridState.GroupDescriptors.Add(secondGroupDescriptor);
await GridRef.SetStateAsync(args.GridState);
}
}
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Employee()
{
Id = i,
Name = "Name " + i,
Team = "Team " + (i % 4 + 1),
Salary = (decimal)rnd.Next(1000, 3000),
OnVacation = i % 3 == 0
});
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Team { get; set; } = string.Empty;
public decimal Salary { get; set; }
public bool OnVacation { get; set; }
}
}
The OnRowClick event of the TelerikGrid is only triggered when clicking the row with the left mouse button as discussed on the following forum post:
https://www.telerik.com/forums/grid-onrowclick-event-for-middle-mouse-button-click
Please add support to the OnRowClick event to trigger it for a middle mouse button click (and pass the mouse button clicked in the eventargs) or add a separate OnRowClick event that is triggered on middle mouse button click.
Hi,
As the subject says, when our app is on the Chinese localization `zh-CN` it causes the date picker to default.
By default I mean the default date becomes 01 01 0001 and you cannot change it no matter what you select.
On any of our other localizations such as es-ES, en-US, fr-FR, etc. (zh-CN is the only one is what I'm getting at) we don't get this issue.
If the Datepicker's binded value is a DateOnly type, the Min and Max should follow that type.
