Hello Team;

We are building a "Social Media" style application. One of the requirements, is to provide an easy and professional for user to traverse through an Image gallery.

I'd like to request for such feature that allows us:

• Ability to for us to provide a list of links (to physical location of images) to the Image Gallery component to display images in list format or individual image to traverse through the list.
• Ability for user to click on image to see image in full size in a window.
• Ability for user to download image.

It would be great if we don't have to resort to use the old jQuery implementation. We're trying to minimize to load jQuery, as Blazor client is already large enough.

Thank you in advance!
..Ben

Hi there,

i'm struggling with kendo theming. I'm trying to implement a material ui with telerik ui for blazor. I did follow the steps in the getting started pages but i'm getting a half baked ui which is missing essential parts like the focus animations for textboxes like shown in the textbox demo: https://demos.telerik.com/blazor-ui/textbox/overview.

My recent approach was to compile the files in the kendo theme Git repository but these also don't work.

What am i doing wrong? How exactly did you achieve the full material experience in the demos?

So lonG

Daniel

This error appears after update 15, in 14.1 it works correctly.

ADMIN EDIT:

This error occurs from the FilterMode set to FilterRow. As a workaround, until the fix is implemented, you could use the FilterMenu instead.

Regards

blazor.server.js:15 [2020-06-30T23:44:51.768Z] Error: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
   at System.Collections.Generic.List`1.get_Item(Int32 index)
   at Telerik.Blazor.Components.Grid.GridCellBase`1.get_Column()
   at Telerik.Blazor.Components.Grid.GridCellBase`1.get_BoundColumn()
   at Telerik.Blazor.Components.Grid.GridFilterCell`1.get_BoundColumnFilterCellTemplate()
   at Telerik.Blazor.Components.Grid.GridFilterCell`1.BuildRenderTree(RenderTreeBuilder __builder)
   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

https://docs.telerik.com/blazor-ui/components/grid/filtering?_ga=2.198924911.1399219233.1601890390-1967950312.1584602021#toolbar-search-box

You can add a search box in the grid toolbar that lets the user type their query and the grid will look up all visible string columns with a case-insensitive Contains operator, and filter them accordingly. You can change the filter delay, and the fields the grid will use - see the Customize the SearchBox section below.

-----

I have an int and a string field and would love to be able to let the user search in both at the same time.

Workaround is now:

public int number {get; set;}

public string numberString => number.ToString();

public string name {get; set;}

But I would love to see it without the need to use the numberString

I would like to be able to override the No Data message in DropDownList component when there are no elements in the Data.

--

ADMIN EDIT

Until this feature is implemented, here is a workaround.

If you already have localization in your project, just set "DropDownList_NoData" key to an empty string in your resources.

If you don't have localization, here are the steps you should do (shortened version of the documentation):

1. Create a class for your localizer: 

public class SampleResxLocalizer : ITelerikStringLocalizer
{
    public string this[string name]
    {
        get
        {
            return GetStringFromResource(name);
        }
    }

    public string GetStringFromResource(string key)
    {
        // this will override only DropDownList_NoData message and it will return other messages as they are
        if (key == nameof(Messages.DropDownList_NoData))
        {
            return string.Empty;
        }

            return Messages.ResourceManager.GetString(key, Messages.Culture); ;
        }
}

2. Override the existing Localizer. This step should be done when configuring your services after calling "AddTelerikBlazor()":

builder.Services.AddSingleton(typeof(ITelerikStringLocalizer), typeof(SampleResxLocalizer));

--

If I set the Visible parameter to false for either ToolBarButton or ToolBarToggleButton it does not hide them from the UI. 

<AdminEdit>

A workaround would be to use the Class parameter and add a display:none CSS rules. 

Code snippet for the workaround:

<style>
    .hidden-button{
        display:none;
    }
</style>

<TelerikToolBar>
    <ToolBarButton Class="hidden-button">Hidden button</ToolBarButton>
    <ToolBarButton Icon="@IconName.Star">Visible button</ToolBarButton>
    <ToolBarToggleButton Class="hidden-button">Hidden toggle button</ToolBarToggleButton>
    <ToolBarToggleButton @bind-Selected="@isSelected">Visible toggle button</ToolBarToggleButton>
</TelerikToolBar>

@code {
    public bool isSelected { get; set; } = true;
}

</AdminEdit>

I would like to have the Label property to all input components, like ComboBox, NumericTextBox, all date inputs and pickers and so on. Right now only TextBox have it.
There a hack using HTML labels and CSS to get that but I think it is necessary to unify and not have to deal with two different concepts within the same form.

Input with Label property:

<TelerikTextBox Label="Container Name" @bind-Value="@ContainerSettings.ContainerName"></TelerikTextBox>

Hack to get same result in other inputs:

<label class="k-label" for="port">
                    Port <br>
    <TelerikNumericTextBox Id="port" Arrows="false" @bind-Value="@ContainerSettings.Port"></TelerikNumericTextBox>

</label>

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 :

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; }
    }
}
 

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

--- FOR FUTURE REQUEST ---

Could be very useful to scrolling tha grid to a specific item\row (in Normal Grd and also in Virtual Grid mode, both)  programmatically. Whithout javascript.

For example after loading a grid that show 20 items, programmatically is it possible to go (and display in grid) not the first 20 rows but for example at row 100. So the vertical scrolling bar muso go dow sice arriving and show that row.

Best Regards

Paolo Leonesi

Have been pouring through all your release videos, (Great Job Sam, Ed Et Al...) to be better informed as to what project type to select for a new Enterprise Admin App. The FilterView control stood out as a means of potentially saving me more than a week of work, but I just can't see making a new forms app going forward. Blazor and Maui seem like the only logical choices going forward, please add if convenient...

Thanks.

This feature is requesting a Blazor version of the RadPropertyGrid, or a more modern Material Design(ish) equivalent.

https://docs.telerik.com/devtools/wpf/controls/radpropertygrid/overview

As  more customers are adopting Blazor, we're porting our rich design time tooling to the web in SaaS type offers.  No Blazor control vendor has this type of control today, and it's sorely needed.  Even finding a Web/Angular version of this type of control is practically impossible.

Having this control combined with the existing Telerik Blazor property editors (combo boxes, edit fields, boolean controls, color pickers, font pickers, etc.) would give you a strong leg up on your competitors.

Note: Our company is already licensing your Blazor controls and I speak to Maria every few months on the roadmap.

Hi team,

I know we have Diagram like Kendo UI for Blazor, But it's confusing and gets very messy with more customizations. I would be very helpful if we have native Blazor component for diagram rather than integrating JQuery with Kendo. Hence making a feature request. 

let me know if there is any plan in pipeline for this feature.

Regards,

Rikam

We would like a parameter for Grid to set the placeholder of the DateTime filter in FilterRow (e.g. instead of 'yyyy. MM. dd' an own pattern).

We think of a parameter like the FormatPlaceholder parameter of the DatePicker component.