Blazor first steps bug in documentation, Primary="true" gives an error.

https://docs.telerik.com/blazor-ui/getting-started/server-blazor

Step 3 - Add a Telerik Component to a View

<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>

Primary = "true" gives an error with version 3, sb different for .net 6 and use ThemeColor

PopupHeight is no longer a valid property.

DatePicker shows format string when no value is selected. If you have a form a DatePicker bound to a nullable DateTime, it will show the formatting string when no value is selected, instead of just showing an empty box.  This is very confusing to the end user compared to just an empty box. We have not found a way to change this.

In order to be able to easily work on mobile (tablet) and desktop browsers using touch it would be great if tree view supported multi select through a single click to select and click to unselect option without the need to hold down the ctrl key or anything like that

This can be worked around currently implementing a TreeView template and then the OnClick event to allow custom tracking of selected and unselected items but this feels like a common enough requirement for touch support that it would be great to support out of the box with the control

Would be nice to have a MapView for Blazor. Is this in the works?

---

ADMIN EDIT

In the meantime, you can use the Kendo Map widget in a fashion similar to this project.

---

In https://docs.telerik.com/blazor-ui/components/grid/manual-operations?_ga=2.192647914.1753502014.1641929648-330381368.1614276734

in the code section of Get Information From the DataSourceRequest you are using a @function instead of an @code.  Still works, but so 2019.

The second issue, typo in https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server readme, DataSourceRequet should be DataSourceRequest

See more details in the following KB article: https://docs.telerik.com/blazor-ui/knowledge-base/textbox-validate-on-change and if the behavior and solution there do not fit your needs, leave your comments and ideas on how you want this exposed for configuration and what the desired behavior is. Also, make sure to Vote for this enhancement so we can gauge the public interest in it.

Hi,

It seems when using popup form editing with the DataGrid, the displayformat is lost even though it is displayed correctly in non edit mode. This seem to be true regardless if you specify it with Data Annotations of as DisplayFormat in markup. 

It seems that the TabBar convers some parts of the popup form from the Grid. See image. If we move the grid outside of the TabBar, the problem goes away. 

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

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.

in blazor ui version 2.24.1 I use this code in program.cs for globalization:

public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");
            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddTelerikBlazor();

            // register a custom localizer for the Telerik components, after registering the Telerik services
            builder.Services.AddSingleton(typeof(ITelerikStringLocalizer), typeof(SampleResxLocalizer));

            var host = builder.Build();

            await SetCultureAsync(host);

            await host.RunAsync();
        }

 private static async Task SetCultureAsync(WebAssemblyHost host)
        {
            var jsRuntime = host.Services.GetRequiredService<IJSRuntime>();
            var cultureName =await jsRuntime.InvokeAsync<string>("blazorCulture.get");

            if (cultureName != null)
            {
                var culture = new CultureInfo("fa-IR");

                DateTimeFormatInfo info = culture.DateTimeFormat;
                info.AbbreviatedDayNames = new string[] { "ی", "د", "س", "چ", "پ", "ج", "ش" };
                info.DayNames = new string[] { "یکشنبه", "دوشنبه", "ﺳﻪشنبه", "چهارشنبه", "پنجشنبه", "جمعه", "شنبه" };
                info.AbbreviatedMonthNames = new string[] { "فروردین", "ارديبهشت", "خرداد", "تير", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };
                info.MonthNames = new string[] { "فروردین", "ارديبهشت", "خرداد", "تير", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };
                info.AMDesignator = "ق.ظ";
                info.PMDesignator = "ب.ظ";
                info.ShortDatePattern = "yyyy/MM/dd";
                info.FirstDayOfWeek = DayOfWeek.Saturday;
                CultureInfo.DefaultThreadCurrentCulture = culture;
                CultureInfo.DefaultThreadCurrentUICulture = culture;
            }
        }

when use TelerikDatePicker , id dosenot work properly. the code of my component in here:

<div class="demo-section k-form k-form-vertical">
    <div class="k-form-field">
        <label for="travel-date" class="k-label k-form-label">Travel Date</label>
        <div class="k-form-field-wrap">
            <TelerikDatePicker Min="@Min" Max="@Max" @bind-Value="@selectedDate" Id="travel-date"></TelerikDatePicker>
        </div>
    </div>
    <div class="k-form-field">
        <p>The selected travel date is: <strong>@selectedDate?.ToShortDateString()</strong></p>
        <p>The selected travel date is: <strong>@selectedDate?.ToString()</strong></p>
        <p>The selected travel date is: <strong>@selectedDate?.ToUniversalTime()</strong></p>
        <p>The selected travel date is: <strong>@selectedDate?.ToLongDateString()</strong></p>
    </div>
</div>

@code  {
    public DateTime Max = new DateTime(2050, 12, 31);
    public DateTime Min = new DateTime(1950, 1, 1);
    private DateTime? selectedDate=DateTime.Now;
}

when click the datepicker the date is not correct :

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.

Hello.

Is there a Timeline control for Blazor similar to this https://docs.telerik.com/devtools/wpf/controls/radtimeline/visual-structure ? If not, is there a plan for such control?

Thank you

I am getting a combination of these two errors below when instituting SignalR

   connection = new HubConnectionBuilder()
                                             .WithUrl(nm.ToAbsoluteUri("DataHub"))
                                             .Build();
                                            connection.On("ReceivedSyncRecord", this.OnReceiveSync);
                                            StateHasChanged();

                                            await connection.StartAsync();

Incremental Search A grid that can be searched incrementally as one types in the search box.

On-demand Sort It should have the ability to do a toggle between ascending and descending sort order when the user taps on a column header.

Pagination It should provide customizable pagination so only one page worth of data is fetched at any given time.

Did I describe the jQuery Datatable functionality? It is because it is so good and having the equivalent of its server-side implementation equivalent in Blazor will be awesome.

Implementation Thoughts The control sends a predefined model to an event bound function as parameter. The model has the information like requested page, column-sort request, letters the user typed into the search box etc. The function fetches data based on the model and the grid updates dynamically.

Currently working on moving from winform to Blazor and found a feature not supported in Telerik atm.

Getting current error when trying to enable Virtualiztion inside a grid

Groupable is not supported with the Virtualization feature of Telerik Grid

Where im already setting grouping on one of the columns