As we are porting many of our applications from Telerik MVC to Blazor, our clients are complaining about particular features no longer being available.

One of which is the multiline edit for incell edit that is available in Telerik-MVC.

This feature is nice as it allows the grid to have a very "excel - like" feel to it, with a small triangle in the corner to indicate the cell/view-model has been edited.

As is, the user is forced to edit the data line-by-line, and save per line.

In real client work, data is not necessarily modified in this linear/per-row fashion.

Take for example, a client has a list of delivery dates which need to be updated down 1 column, current functionality is painful, as you need to edit 1 date, click save, then move onto the next row instead of just moving down the rows and clicking save after you have finished your edits (like you can with Telerik MVC grid).

My rationale for this feature add: The "big data" age is upon us - and blazor is very well suited for these types of applications being strongly typed/c# etc; would be great to see Telerik lead in rich data input components for data heavy applications, and the grid is the most core UI component hence should be the most feature rich and performant.

Hello

I have just received some feedback from a client re. the DateInput -Blazor control whereby they are describing the default behaviour as "strange" - and on having a closer look I tend to agree / believe there to be bugs with this.

Please see video and below notes - let me know if there are any workarounds to these things.
I do see there is an existing bug report which may partially cover these issues (DatePicker loses focus when used as data editor in the Grid and the input date starts with 0 (telerik.com)) , however, it seems this is "unplanned" ?

QA Telerik DateInput:

• Try entering in M =  1 then 1 SLOW = works ok
  
  
• Try entering in M =  1 then 1 FAST = focus moves to the end of the date
  
  
• Try entering 0 in the month or day  = Whole date disappears 
  (Data loss - for in-cell edit mode this is a big deal)
  
  
• Try entering DD = 11 then its ok for 1st edit, but 2nd edit of the DD, 
  then the focus moves to the end????
  
  
• Try entering M = 1, D = 8, Y=2021 without using the mouse 
  (its not possible as 01 would move focus to end of date).... 
  and if you choose to type 01 and its not fast enough, the whole date will disappear on entry of 0

Entering a date without using the mouse to move focus is quite important for big data-entry in grids where you are tabbing or clicking over from field to field in large quantities.

Cheers
Phil

Wè would like to have the Fluent UI style available for Blazor. We are using the Telerik UI controls in a large project werd the UI has to be very similar to the one of Microsoft D365 Customer Service.

Regards, Henk

Can you add Debounce to the filtering?

---

ADMIN EDIT

At the moment, you can use the OnRead to implement custom filtering and also debounce the operations: https://docs.telerik.com/blazor-ui/components/combobox/events#onread and the particular example the article links is shown here: https://docs.telerik.com/blazor-ui/knowledge-base/combo-debounce-onread

You may also want to look at item virtualization in the dropdowns - Follow it here: https://feedback.telerik.com/blazor/1457808-combobox-virtualization

There is also a sample attached of implementing debouncing in a WASM app as a reference too.

---

A stack panel component that creates a layout of items that are vertically positioned.

It could also have a wrap layout to make the items horizontal with wrapping

or horizontal without wrapping

Create code snippets for all Blazor controls.

Provide either automation for installing into the Visual Studio toolbox or just provide as a web page for users to copy paste them into the Toolbox.

<TelerikDatePicker Id="startDate" @bind-Value="@StartDate" Width="160px" Format="dd-MMM-yy"></TelerikDatePicker>

DateTime StartDate=DateTime.Now

When our users type to click on the year and type another one they lose one of the digits - so if they try typing 19 or 18 for instance then it sets the date to year 01

I am implementing custom filtering by column in a data grid. The data source is very large so the filtering will be done by a stored procedure in the database. In order to avoid excessive calls to the procedure it would be great if the TextBox had a DebounceDelay property like the one in the SearchBox.

---

ADMIN EDIT

While not technically useful for the grid itself (see the bottom of this thread for more ideas and information on that, a built-in feature is coming there as well), there can be benefit in adding that to the inputs (e.g., the Editor has something like that already by default because it is designed for large content).

Thus, I am reopening this so we can gauge the interest.

In the meantime, using a few lines of application code can achieve debouncing of expensive api calls. Using the OnChange or OnBlur event may also be suitable workarounds, depending on the goal you are after.

---

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.

For example, I want to set the Sunday day to red or any other date to a special color.

<AdminEdit>

Here is a workaround that can be used until the feature is released

<style>
    .hide-calendar {
        display: none;
    }

    .special {
        color: red;
        font-weight: bold;
    }
</style>

<div style="width: 400px">
    <TelerikDateInput @bind-Value="@DateValue" Width="90%"></TelerikDateInput>
    <TelerikButton Icon="calendar"
                   OnClick="@( () => isClicked = !isClicked )">
    </TelerikButton>
</div>

<TelerikCalendar Class="@(!isClicked ? "hide-calendar" : "")"
                 @bind-Value="@DateValue"
                 OnCellRender="@OnCellRenderHandler"
                 Min="@(new DateTime(2000, 1, 1))"
                 Max="@(new DateTime(2090, 1, 1))">
</TelerikCalendar>

@code {
    private void OnCellRenderHandler(CalendarCellRenderEventArgs args)
    {
        if (args.View == CalendarView.Month)
        {
            args.Class = args.Date.Day % 3 == 0 ? "special" : "";
        }
        else if (args.View == CalendarView.Decade)
        {
            args.Class = args.Date.Year == 2020 ? "special" : "";
        }
    }

    private DateTime DateValue { get; set; } = DateTime.Today;

    private bool isClicked { get; set; }
}

</AdminEdit>

After update to 3.0.0 TextArea autosize no longer works.

AutoSize is no longer one of the available properties.

Also Label is no longer an available property.

We are based in the US; but want to display values in a numeric text box based on the culture of the place where the data was entered.

So if the data was entered in the UK, we want the number to be formatted according to UK culture, etc.  That way, it's easy to tell that number is representing pounds vs dollars, etc.

Can we please get the ability to set culture to specific controls?  We don't want to change the current thread culture for everything on the page, just for one control.

thanks!

Hello everyone,

at the moment the TooltipTemplateContext isn't very useful and hard to work with:

Problem: As you can see, "start" and "end" only contains a weired pre-build string.
As a developer I can't parse this (at least the year is missing), so I'd like to suggest, that you replace the Dictionary of <string,string> with an <string,object> and add the start and end as DateTime.

An alternative would be to pass a custom parameter or have the task item accessable directly.
In our use-case we have no need for the time (it's a gantt not a time table!) and the tasks won't end at the end of the year.

Regards

When a column is filtered, I'd like a better visual indicator of that fact.

The solid background to the menu button is not appealing, and it is applied whether a column is sorted or filtered.

The only full-featured Blazor DataGrid | Telerik UI for Blazor

I'd like a distinct indication of whether a column is filtered -- perhaps a filter icon next to the header text similar to how you might see an arrow when sorted.

---

I've attempted to create this myself using OnStateChangedHandler to iterate through the columns and call a Javascript function that finds the right column header and appends a filter icon. It kind of works sometimes, but I'm not sure I'll able to get it working consistently. Even so, it feel like a fragile hack that will probably break in a future update.

Ideally this would be an added feature, but in the meantime is there a way I can accomplish this myself?

Hi Telerik Team

We will transfer the Pivot Grid from aspx to Pivot Grid Blazor Grid.

We couldn't found the Pivot Grid Blazor. Can you tell us, when it will be ready ?

Best regards

ATT

Hi I was wondering if there is a way for us to have the functionality of CloseOnOverlayClick like on Dialogs for the Create/Edit Popup in the TelerikGrid?

I can't seem to find the option within the TelerikGrid -> GridSettings -> GridPopupEditSettings component

Thanks,

Daniel