I'm using the Telerik Blazor Grid with dynamic data (`Dictionary<string, object>`). Paging, sorting, and filtering work, but grouping doesn't.

It seems Telerik grouping relies on CLR properties (e.g., `Employee.Department`), while my data is stored as dictionary key/value pairs. I also tried using a `DataTable`, but grouping still doesn't work.

Has anyone successfully implemented grouping with `Dictionary<string, object>` or `DataTable`? Is there a supported solution for dynamic data?

@page "/1"
@using Telerik.Blazor.Components
@using Telerik.DataSource;
@using Telerik.DataSource.Extensions;

<TelerikGrid TItem="Dictionary<string, object>"
             Pageable="true"
             Groupable="true"
             Sortable="true" OnRead="OnLoadData"
             Navigable="true"
             PageSize="10"
             SortMode="Telerik.Blazor.SortMode.Single"
             
             FilterMode="@Telerik.Blazor.GridFilterMode.FilterRow"
             Height="500px">
    <GridColumns>
        @foreach(var col in Columns)
        {
            <GridColumn Field="@col.Key" Title="@col.Key" FieldType="typeof(string)" />
        }
    </GridColumns>
</AgirhDataGrid>

@code {

    public List<KeyValuePair<string, string>> Columns { get; set; }


    private Task OnLoadData(GridReadEventArgs args)
    {
        var request = new DataSourceRequest
        {
            Groups = args.Request.Groups,
        };
        // GetData it's a System.DataTable 
        var dataSource = GetData.ToDataSourceResult(request);
        args.Data = dataSource.AggregateResults ?? dataSource.Data; 
        args.Total = dataSource.Total;
        return Task.CompletedTask;
    }
}

14.0.0 changed the Template parameter of ChartSeriesLabels so it only supports JavaScript function names and not arbitrary JavaScript: Blazor Breaking Changes 14.0.0 - Telerik UI for Blazor

However, now that Template property is marked as deprecated in code, which causes warnings when developing and during the build. Obviously we want to reduce warnings wherever possible, but even if using Template properly, you will always get the obsolete warning when that property exists in your .razor file.

Is there any reason this change was communicated with the .NET obsolete attribute, which is now resulting in false positive warnings all over the place? Is there any recommendation on what to do with these warnings? I did not find any recommendations on this in the Telerik documentation for the chart, the 14.0.0 release notes, or the 14.0.0 breaking changes article. I don't want to suppress CS0618 project-wide, since it's very useful to have. Should I just write manual warnings suppressions around each use of ChartSeriesLabels across my project? Is Telerik planning to no longer obsolete the Template property in future versions, or is it actually being deprecated in favor of something else?

Hi, I am trying to port our app to Blazor from UI for Ajax. One of the glaring omissions is the FocusDate which we use heavily.

Use case: team is planning the travel a staff member to the Tour de France sometime in May. However, the race is in July. The Blazor UI will use the selected date however, there is no selected date yet. In the UI for Ajax version, we use the starting date of the race as the focus date which places the travel in the right neighborhood and most likely doesn't require the user to change the month making the process more productive.

The worst case scenario is when the team is planning a training camp and they have to change the view every single time for 200 people. That's not very nice.

I am wrapping the Telerik control within a component to be able to have better Placeholder feedback for the user.

Matt.

I love the feature, helps users know what they edited before saving changes, BUT ... it seems this "was edited" feature doesn't apply to many other controls like DropDownList, MultiSelect, CheckBox.

Am I stuck "as is" or is there something I can apply to make this UI feature work with other Telerik controls?

It was recently brought to my attention that a user did not know the stepper was a clickable item, they indicated that had it used a pointer instead of the standard mouse it would have made more sense.  I thought that it was odd that it was not that way by default.  Just wanted to put this out there to see if that could be changed in the standard Telerik themes?

Thanks for your consideration

Hi,

When I add a chart series of a different type to a telerik chart then there is a margin left and right of the plot area added. So between the y-axis and where the plot starts there is whitespace (the same on the right side, where the x-axis expands beyond the plot area).

Dependencies:

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0"/>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" PrivateAssets="all"/>
<PackageReference Include="Telerik.FontIcons" Version="2.1.0" />
<PackageReference Include="Telerik.UI.for.Blazor" Version="5.0.1" />

Example:

@page "/AreaChartDemo"
@using Telerik.Blazor
@using Telerik.Blazor.Components

<TelerikChart>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Area" Name="Chile" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="India" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="Haiti" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="foo" Data="@Data" Field="@nameof(ModelData.Idx1)" Margin="0" AutoFit="true" Padding="0"></ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis AxisCrossingValue="@AxisCrossingValue">
            <ChartValueAxisLabels Format="{0}%"></ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>

</TelerikChart>

@code {
    public class ModelData
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
        public double Idx1 { get; } = 0.0;
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };

    public object[] AxisCrossingValue = new object[] { -10 };


    public List<ModelData> Data = new List<ModelData>()
{
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 1.988,
            Series3 = -0.253
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 2.733,
            Series3 = 0.362
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 3.994,
            Series3 = -3.519
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 3.464,
            Series3 = 1.799
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 4.001,
            Series3 = 2.252
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 3.939,
            Series3 = 3.343
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 1.333,
            Series3 = 0.843
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = -2.245,
            Series3 = 2.877
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.339,
            Series3 = -5.416
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 2.727,
            Series3 = 5.59
        }
    };

}

Thanks

hi

‫I am using a TelerikDrawer in Push mode with MiniMode="true", but I could not find a way to control how fast it opens and closes.

Here is my code:
<style>

    .k-drawer .k-drawer-wrapper,
    .k-drawer-wrapperr {
        overflow-y: scroll;
        scrollbar-width: none; 
    }


    .k-drawer-mini .k-drawer .k-drawer-wrapper {
        width: 46px;
    }


    .k-drawer-mini .k-drawer.k-drawer-end,
    .k-drawer-expanded .k-drawer.k-drawer-end {
        border-inline-start-width: 0px;
    }


    .k-drawer-push .k-drawer {
        height: calc(100vh - 24px - 24px) !important;
    }

    .k-drawer-content {
        height: calc(100vh - 24px - 24px) !important;
        margin: 0px !important;
        padding: 0px !important;
        max-width: 100% !important;
        background-color: darkolivegreen;
    }





    .k-drawer-container {
        display: flex !important;
    }

    .k-drawer-content {
        flex: 1;
        overflow: hidden;
    }


    .k-drawer-end {
        box-sizing: border-box;
    }




    .k-drawer,
    .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important;
    }

    .k-drawer-container,
    .k-drawer-container .k-drawer,
    .k-drawer-container .k-drawer-wrapper,
    .k-drawer-container .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important; 
    }

    .k-drawer,
    .k-drawer .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

</style>



<TelerikRootComponent EnableRtl="true">

    <TAppBar  />



    <TelerikDrawer @ref="@Drawer"
                   Position="@DrawerPosition.End"
                   MiniMode="true"
                   Mode="@DrawerMode.Push"
                   TItem="DrawerItem"
                   Width="250"
                   @bind-Expanded="@IsSidebarOpen">

        <Template>
            <NewSidbar @bind-IsOpen="@IsSidebarOpen"></NewSidbar>
        </Template>


        <DrawerContent>
            <div style="flex:1;overflow:hidden !important; height:100%">
                <div style="flex:1; overflow:auto; margin: 0px;height:100%">
                    @Body
                </div>
            </div>
        </DrawerContent>

    </TelerikDrawer>

    <FoterLyout></FoterLyout>

</TelerikRootComponent>




@code {

    private bool IsSidebarOpen = true;

    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public bool Expanded { get; set; } = true;
    public class DrawerItem;


}

this CSS not work at all