Hi,

I have found some evidence of a bug which I believe add to the portrait of this issue which has already been reported but declined. Could you please have a look at my recent comments and report it to follow on it (so it remains active)?

https://feedback.telerik.com/blazor/1532895-initcheckbox-was-undefined

Regards.

Maurice.

Hello

Just seeing if it would be easy to separate the "StockChartNavigator" component that currently sits within the "TelerikStockChart" component.

So in other words, have a generic "ChartNavigator" component; the navigator is very good as a standalone and could be applied to many things such as grids, non-telerik charts (not only stock data) etc.

Alternatively, if there were a way to override the chart template of the TelerikStockChart, that would achieve the same result?

Cheers
Phil

Provide ability to define icons for input prefix and suffix. Thus, provide mechanism for built-in validation icon as well.

Example image with suffix icons to give you better perspective of the feature.

I have a column grouped by groupname of producttype having values likes diesel,electric,gas,petrol but i want specific order in groups to appear like diesel,petrol,electric,gas 

Using  

Protected void onstateinithandler(gridstateeventargs <prdouctmodel> args)

{

gridstate <productmodel> statetobe = new gridstate <productmodel>()

{

GroupDescriptors = new list <groupdescriptor>()

{

new GroupDescriptor()

{ Member= "producttype",

Membertype =typeof (string)

}

},

Collapsedgroups =enumerable.range (0,4).tolist ()

};

args.gridstate = statetobe

}

Hello

The column group headers functionality is great, however it messes with the export to excel/csv, as the headers no longer align on the 1 row.

Just seeing if there was a way to export to csv/excel but ignore the column group headers? Maybe a feature on the <GridCsvExport ExportGroupHeaders=false /> option?

Or is there a way to turn off column group headers programmatically? Then this could be removed then readded on the events; OnBeforeExport, OnAfterExport

Cheers

Phil

I would like to use the new structs that are part of .NET6 - the DateOnly and TimeOnly. 

Their support should extend to all respective date and time pickers and more complex components like the Grid, Gantt, Scheduler, and other applicable components. 

Further to issue reported in https://feedback.telerik.com/blazor/1545177-selected-items-are-not-preserved-when-loading-the-state-when-the-component-is-bound-to-expandoobjects wrt Expando Object, the column menu reset also does not work when grid is bound to Expando Object

Regards

Naved

I am experiencing this problem with version 2.29 when the dropdown list is in a "component"

It seems to be intermittent but dependent on how long the async method takes to complete.

 Edit page

@page "/"
@using System.Diagnostics
@using System.Threading
@using BlazorApp1.Components

<h1>Hello, world!</h1>

<EditForm class="form-inline" Model="@Model">
    <MyComponent />
</EditForm>

Welcome to your new app.

@code {
    object Model = new();
    private Guid InstanceId;

    public Index()
    {
        InstanceId = Guid.NewGuid();
        Debug.WriteLine($"Index - {InstanceId}");
    }

    protected override Task OnInitializedAsync()
    {
        Debug.WriteLine("Index - OnInitializedAsync");
        return base.OnInitializedAsync();
    }

    protected override Task OnParametersSetAsync()
    {
        Debug.WriteLine("Index - OnParametersSetAsync");
        return base.OnParametersSetAsync();
    }
}

Component

@using System.Diagnostics
<h3>My Component</h3>
<br />
<TelerikDropDownList @bind-Value=_selectedValue Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" TValue="int" TItem="MyDdlModel"></TelerikDropDownList>
<br />
<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton><br />
@helloString
<br />

@code {
    private Guid InstanceId;
    MarkupString helloString;

    int _selectedValue { get; set; } = 2; // Preselected value
    IEnumerable<MyDdlModel> myComboData { get; set; } = Enumerable.Empty<MyDdlModel>();

    void SayHelloHandler()
    {
        string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
        helloString = new MarkupString(msg);
    }

    public MyComponent()
    {
        InstanceId = Guid.NewGuid();
        Debug.WriteLine($"MyComponent - {InstanceId}");
    }

    protected override async Task OnInitializedAsync()
    {
        Debug.WriteLine("MyComponent - OnInitializedAsync");
        myComboData = await LoadData();
        await base.OnInitializedAsync();
    }

    protected override Task OnParametersSetAsync()
    {
        Debug.WriteLine("MyComponent - OnParametersSetAsync");
        return base.OnParametersSetAsync();
    }

    private async Task<IEnumerable<MyDdlModel>> LoadData()
    {
        await Task.Delay(100);
        return Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
    }

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}
 

Hi.

I'd like to request the ability to use a TimeSpanPicker component in Blazor.

For example, see https://www.telerik.com/maui-ui/timespanpicker

Thank you.

Can we have the Image Gallery control like the ASPX AJAX, please? The slide show feature with various transitions is very useful. Thanks.

https://www.telerik.com/products/aspnet-ajax/image-gallery.aspx

Currently when setting up a new Blazor app I need to go to the docs each time or look at a reference project to remember the resource paths for the CSS files. Additionally once you have a project if you are relying on a CDN but later update the NuGet package your app will be referencing the wrong css bundle unless you remembered to also update your layout.

Instead of having this as a magic string that is required in each project, it would be great if a new helper class could be introduced. As an example it might look something like:

public class TelerikResources
{
    public class Cdn
    {
        public class Default
        {
            public string Path = "";
        }

        public class Bootstrap
        {
            public string Path = "";
        }

        public class Material
        {
            public string Path = "";
        }
    }

    public class Local
    {
        public class Default
        {
            public string Path = "";
        }

        public class Bootstrap
        {
            public string Path = "";
        }

        public class Material
        {
            public string Path = "";
        }
    }
}

This would have the benefit that in the layout you might simply have:

<link href="@TelerikResources.Cdn.Bootstrap.Path" rel="stylesheet" />

This has a few benefits. It's easier to remember, easier to discover the other available prebuilt styles, and removes issues with pointing at the wrong path after updating library versions (assuming that you're using the Cdn rather than local resource).

With the default templates for a blazor project there are options for security.  

We really need this for the telerik blazor templates or a sample telerik blazor projects using the different types of security.  

Rendering the TelerikCalendar control produces HTML with ARIA roles like so:

• tbody - 'rowgroup'
  • tr - 'presentation' <--- this should be 'row'
    • td - 'gridcell'

Documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_role

This seems small, but looks bad on accessibility reports, especially when a calendar has 42 'gridcells', The impact is significant when seen in summary.

Alternatively, or in addition, can ARIA roles be turned of for specific controls? In this case including role attributes in the markup is not actually necessary as the roles can be implied by the HTML tags. Including roles that are incorrect is more work for more confusion.

The demos and examples for storing and retrieving GRID state uses the JavaScript localStorage.setItem and localStorage.getItem that work great.  As part of .NET 5 there's a Microsoft equivalent for accessing Local Storage using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage.  I've found the behavior of these demos and examples will not work by simply replacing the JavaScript with .NET equivalents.  My experience is getting Circuit Handler exceptions that make these example not work.  

Although not a requirement since there's a JavaScript solution for local storage, I would like to recommend that since you partner closely with .NET team at Microsoft.  That your GRID development team test and provide examples with the Microsoft .NET 5 out-of-the-box local storage solution and resolve any incompatibilities for developers not wanting to use 1st party local storage solutions embedded within Microsoft Blazor.

----
ADMIN EDIT

I made a sample test and things seemed to work for me, so I made a public example, you can find it in this pull request until it gets merged. I'm also attaching it to this post, but for anyone seeing this after a time - the public repository linked above is a better place to look for this in case more updates and information have been added since the time of writing this.

---

Is it possible to show (modal confirmation) handle filtering before apply? Show pop-up modal, and when Confirm, start filtering, othewise cancel!!

Reloading the page described down below cause memory leak. Commenting lines with telerik button prevents the problem.

@page "/"

<h3 style="position:absolute; top: 0; z-index: 1000; margin-top: 10px">Home</h3>

↓ commenting these lines prevents the memory leak
<div>
    <TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
    <div>@helloString</div>
</div>
↑ commenting these lines prevents the memory leak

@code {
    List<string> strings = new List<string>();

    MarkupString helloString;

    protected override void OnInitialized()
    {
        // Attempt to clear memory with Garbage Collector
        GC.Collect();
        GC.WaitForPendingFinalizers();
        for (int i = 0; i < 1000000; i++)
        {
            string a = "asdasdasdasdddddddddasasdasdasdasdddddddddasasdasdasdasdddddddddasasdasdasdasdddddddddasasda";
            strings.Add(a + "b");
        }


        base.OnInitialized();
    }

    void SayHelloHandler()
    {
        string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use <b><u><i>C#</i></u></b> to write front-end!", DateTime.Now);
        helloString = new MarkupString(msg);
    }
}

MainLayout.razor:

@layout TelerikLayout
@inherits LayoutComponentBase


<style>
    .navmenu .k-drawer-items {
        margin-top: 3.5rem;
    }

    .navmenu .k-widget.k-drawer {
        background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    }

    .k-drawer-container {
        height: 100vh;
    }

    .btn-margin, .btn-margin:hover {
        width: 48px;
        height: 56px;
        color: #FFF;
    }

    .navmenu .k-drawer {
        color: #ffffffd6;
    }

    .navmenu .k-drawer-item:hover, .navmenu .k-drawer-item.k-state-hover {
        color: #ffffffd6;
        background-color: #f0f0f012;
    }

        .navmenu .k-drawer-item:hover.k-state-selected {
            color: #ffffff;
            background-color: #7bafff94;
        }

    .navmenu .k-drawer-item:not(:hover).k-state-selected {
        color: #ffffff;
        background-color: #7bafffbd;
    }

    .navmenu .k-drawer:hover .k-drawer-wrapper {
        width: 240px;
    }

    .navmenu .k-drawer .k-drawer-wrapper {
        transition-duration: 300ms !important;
    }
</style>


<TelerikDrawer Data="@NavigablePages" MiniMode="true" Mode="@DrawerMode.Push" SelectedItem="SelectedItem" Class="navmenu sidebar"
                SelectedItemChanged="ChangeSelectedItem" TItem="DrawerItem">
    <Content>
        <div class="page">

            <div class="main">
                <div class="top-row px-4 auth">
                </div>


                <div class="content px-4">
                    @Body
                </div>
            </div>
        </div>
    </Content>
</TelerikDrawer>



@code {
    List<DrawerItem> NavigablePages { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "Home", Url = "/", Icon = "home" }
        };

    public class DrawerItem
    {
        public string Text { get; set; }
        public string Url { get; set; }
        public string Icon { get; set; }
        public bool IsSeparator { get; set; }
    }
    DrawerItem SelectedItem { get; set; }

    private void ChangeSelectedItem(DrawerItem chosenItem)
    {
        SelectedItem = chosenItem;
    }
}

This code is example. The main problem was with TelerikGrid. Usage of any telerik component caused the same memory leak.

Hi,

If Telerik can, at some point, develop a design tool like the Radzen Design Time, that would really be nice!

Thanks