Hi,
We use compact sized grid all the time in our application.
However, with sorting and filtering enabled, the icons take too much space in the header cell and make the actual header text hard to read.
Please consider scale down those icons and reduce padding.
Thanks and best regards,
Peili
Demo: https://blazorrepl.telerik.com/mSOIQZvO51cwrorJ49
===ADMIN EDIT===
To reduce the size of the icons and the font in a Compact Grid, you can follow the approach from the knowledge base article How to make Compact Grid elements smaller.
I've determined that the TelerikDateTimePicker does not work properly on mobile devices when using AdaptiveMode.Auto. Attached are videos of the component's behaviour in both modes (None, and Auto).
Immediately after interacting with the fullscreen popup of the datepicker, I see this error in the console:
RAW:
telerik-blazor.js:50 Uncaught TypeError: r.isParent is not a function
at p.isChild (telerik-blazor.js:50:1362352)
at f.closePopup (telerik-blazor.js:50:1398427)
at HTMLHtmlElement.onMouseDown (telerik-blazor.js:50:1397246)
Code:
@using Telerik.Blazor.Components
@using Telerik.Blazor
<TelerikFloatingLabel Text="Date & Time">
<TelerikDateTimePicker Id="date-picker" @bind-Value="MyFormModel.Date" Max="@DateTime.Now.AddDays(1)"
Format="@DATE_FORMAT" AdaptiveMode="AdaptiveMode.Auto"
FillMode="@Telerik.Blazor.ThemeConstants.DateTimePicker.FillMode.Flat" />
</TelerikFloatingLabel>
@code {
private FormModel MyFormModel { get; set; } = new FormModel();
private const string DATE_FORMAT = "MM/dd/yyyy HH:mm";
private class FormModel
{
public DateTime Date { get; set; }
}
}
Notes:
- If we remove all of the parent components wrapping the DatePicker, it seems to function properly, but the errors remain in the console. This isn't a solution, however.
On the NumericTextBox example here
If you put the NumericTextBox in edit mode and hold the up or down key on the keyboard, the value auto increments/decrements.
1/ Can you please replicate this when the mouse is held down when clicking the up down spinner buttons? Users don't want to always use keyboard for this function.
2/ Can you add an acceleration property, eg when mouse/key is held down it increments at rate n1 for first few seconds, then after time s1 it will increment at rate n2 for remaining time mouse/key held?
We would like to see all the Blazor controls support the ability to show the time in the browser's local time as a feature that can be enabled. It should support converted from both UTC and server time.
A question on how to do this has been asked at least twice on the forums:
- https://www.telerik.com/forums/using-client-side-time-zone-for-time-columns-in-blazor-server-grid
- https://www.telerik.com/forums/utc-datetimes-as-local-datetimes-and-vice-versa
Some examples of how other's have implemented this as a control can be founde here:
- https://www.meziantou.net/convert-datetime-to-user-s-time-zone-with-server-side-blazor-time-provider.htm
- https://github.com/dustout/BlazorTime
Thanks
hello
please add support for bind pivotgrid to datatable or expando objects (local mode)
We would like to have in our app Charts the same functionality that you have in StockCharts.
Navigator:
https://docs.telerik.com/blazor-ui/components/stockchart/navigator
Crosshairs:
https://docs.telerik.com/blazor-ui/components/stockchart/crosshairs
For example, selecting Bootstrap-Main-Dark theme in the Project Wizard does not apply the dark mode.
===ADMIN EDIT===
For the time being, a possible workaround is to manually add class="k-body" to the <body> tag of your application. This will ensure, that the dark mode is correctly applied. This is required because, by design, the Default theme does not enable the typography system. The "k-body" class is required for the typography system to work properly on the document level and apply the predefined typography values to the page. For more detailed information, refer to Design System Documentation.
Steps to reproduce:
- Insert a simple TelerikGrid on your page
- Add Columns with templates for each property
- Specify a Column Template
See https://blazorrepl.telerik.com/GyPvFMFr00zLEEdG00
Problem / Inconvenience
- Context has to be converted/cast before access to the each property is possible
- Grid columns are not generic which makes them hard to use sometimes
- Fields have to be specified by name (may lead to wrong names after changing)
Solution / Feature Request
- Provide new generic columns (to ensure no current implementations break)
- Add [CascadingTypeParameter(nameof(TItem))] to the TelerikGrid
- GridColumns automatically "inherit" the typeparam TItem
Idea from: Blazor QuickGrid
Benefits
- GridColumns can be specified with Expression
- Template context does not have to be cast anymore
- Renaming properties affect expression or an error is display (property does not exist)
<GridColumn For="@(t => t.Name)">
<Template>
<div>
@item.Name
</div>
</Template>
</GridColumn>
When following the Blazor UI code examples for the Grid, the source for index.cshtml contains the following:
@page "/grid/index"
@using Telerik.Blazor.Components.Grid
@using TelerikBlazor.Shared
@inject HttpClient Http
Notice that the using directive for the Shared component doesn't have a . separating Telerik and Blazor. It should read:
@using Telerik.Blazor.Shared
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit '_2TiBAG0g2G9PCcWgKc-G4zmfFAGiDJEO7pd7Jbjxpk'.
System.IO.FileLoadException: Could not load file or assembly 'Telerik.DataSource, Version=1.2.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8'. The located assembly's manifest definition does not match the assembly reference. (0x80131040)
File name: 'Telerik.DataSource, Version=1.2.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8'
at System.Signature.GetSignature(Void* pCorSig, Int32 cCorSig, RuntimeFieldHandleInternal fieldHandle, IRuntimeMethodInfo methodHandle, RuntimeType declaringType)
Did I miss installing something.
Used the installer telerik.ui.for.blazor.2.1.0.commercial.msi
In release 2.0.0 it was possible to set default property Visible to "true" for AnimationContainer. That is now gone. How do I make the AnimationContainer visible per default, i.e without calling ShowAsync() in some stage?
Br,
Sten
On the demo page, when I hover over menu items "Overview" and "Demos" and "Roadmap" it changes background color to gray. When I load it into a project with the verbatim demo code no background color change occurs except on "Roadmap".
<TelerikMenu Data="@MenuItems"
ParentIdField="@nameof(MenuItem.SectionId)"
IdField="@nameof(MenuItem.Id)"
TextField="@nameof(MenuItem.Section)">
</TelerikMenu>
@code {
public List<MenuItem> MenuItems { get; set; }
public class MenuItem
{
public int Id { get; set; }
public int? SectionId { get; set; }
public string Section { get; set; }
}
protected override void OnInitialized()
{
MenuItems = new List<MenuItem>()
{
new MenuItem()
{
Id = 1,
Section = "Overview"
},
new MenuItem()
{
Id = 2,
Section = "Demos"
},
new MenuItem()
{
Id = 3,
Section = "Roadmap"
},
new MenuItem()
{
Id = 4,
SectionId = 3,
Section = "What's new"
},
new MenuItem()
{
Id = 5,
SectionId = 3,
Section = "Roadmap"
},
new MenuItem()
{
Id = 6,
SectionId = 3,
Section = "Release History"
}
};
base.OnInitialized();
}
}
In data grids it can sometimes be quite helpful to be able to export the content for use outside of the application.
In these cases it can be common to export to CSV or PDF.
It would be helpful to have a TreeGrid control which is quite similar to a data grid however it allows hierarchy relationships among the items.
This would essentially have all the features of the standard data grid however one column would be expandable.
Hi,
Ran in to an issue here. To avoid modals getting hidden behind animation containers, we use a class for a div and "wrap" the modal in providing it with a higher z-index than the animation container(s).
However, when using a DatePicker inside this module the calender will be hidden behind the modal (since it is in an animation container).
Any suggestion how to overcome this problem?
Thanks & br,
Sten