Description

After the user selects a color in the color tools, the popup does not close automatically. The user has to click on the Editor's toolbar for the popup to close.

Steps To Reproduce

1. Run this example: https://blazorrepl.telerik.com/GTYXPsFv59loxN7v37
2. Highlight a word in the Editor's content and use the color tools. Change either the text color or the background color.

Actual Behavior

After selecting a color, the color tool's popup remains open.

Expected Behavior

The color tool's popup closes.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

I'm using an OnRead grid with ExpandoObjects. The error happens on the backend when trying to process the result of ToDataSourceResult(...)

When trying to access the Items property of AggregateFunctionsGroup in a multi level grouping scenario, using ExpandoObject, and the top level group has a null key, trying to access the Items property will result in a NullReferenceException. I've made this helper, but it cannot process the subgroups because of this error.

private static void FlattenGroup<T>(AggregateFunctionsGroup group, List<T> result)
{
    if (group == null)
    {
        return;
    }

    if (group.HasSubgroups)
    {
        foreach (var sub in group.Items.OfType<AggregateFunctionsGroup>())
        {
            FlattenGroup(sub, result);
        }
    }
    else
    {
        result.AddRange(group.Items.OfType<T>());
    }
}

In a scenario where I have an ExpandoObject with properties A and B, where A = 1 and B = null; grouping by A then B works. Grouping by A or B alone also works. But grouping by B then A causes the NullReferenceException when trying to access the group.Items. 

When a DatePicker input is cleared by using the keyboard and the control loses focus, the state of a non-nullable DateTime property is inconsistent with the control. 

This behavior is appropriate; however, it can cause user confusion when the underlying value is used to query for data based on a value the user no longer sees.

My proposed solution (bug fix) is to return the value of the DatePicker to the last known good value when the control loses focus.

StateHasChanged() by itself does not cause a re-render of the component, however changing the @key value of the DatePicker does.

See this REPL for a demonstration of the issue and workaround/fix: https://blazorrepl.telerik.com/czEjvVlK18i471S622

I was hoping to use the new AllowCustom feature to let users name a few areas, save those names in the backend and later show them as preselected when the user comes back so they don't have to retype the names every time they do an operation. But alas, the AllowCustom seems to only allow preselecting from what's in the Data list of values.

So code like below doesn't actually show a chip for Rome even though it's preselected. There is a workaround of setting the Data property to a list that contains the custom values I need preselected, but it feels clumsy and with the custom values I feel Multiselect should also check the selected values list for chips to render.

<TelerikMultiSelect 
   @bind-Value="@SelectedCities"
   TItem="string" TValue="string"
   AllowCustom="true"                   
   Width="400px">
</TelerikMultiSelect>

<span>Selected: @SelectedCities.Count</span>

@code {
    private List<string> SelectedCities { get; set; } = new() {"Rome"};
}

I am using the TreeList Control and loading the Children on Demand provided in the sample I provided. When I load on the first run, UI displays the Expand/Collapse option but after applying any filter, Expand/Collapse is not visible. 

How to make Expand/Collapse visible always irrespective of having Children or not. 

Sample Code:

Apply any Column Filter and notice the Expand/Collapse Icon is not visible. I want Expand/Collapse Icon to be visible always.

https://blazorrepl.telerik.com/GJYCbRvb48xy8T7d09 

Just add the FilterMenuType="FilterMenuType.Menu"

The Chart tooltip template receives incorrect context for another data item when there is a missing data item for the current category and the series has MissingValues="@ChartSeriesMissingValues.Zero".

Test page: https://blazorrepl.telerik.com/QzOtFwln362xLl7q57

Compare with the Kendo UI jQuery Chart: https://dojo.telerik.com/qZCFVOPQ 

Possible workarounds include:

• Check the FormattedValue property of the tooltip context. If it's "0", while the value in the DataItem is not zero, then there is a missing data item.
  

  <TelerikChart Height="200px">
      <ChartSeriesItems>
          <ChartSeries Type="ChartSeriesType.Line"
                       Data="@Series1Data"
                       Field="@nameof(SalesData.Revenue)"
                       CategoryField="@nameof(SalesData.TimePeriod)"
                       MissingValues="@ChartSeriesMissingValues.Zero">
              <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
              <ChartSeriesTooltip Visible="true">
                  <Template>
                      @{ var point = context.DataItem as SalesData; }
                      @if (point is not null && context.FormattedValue != "0")
                      {
                          <span>@point.Revenue</span>
                      }
                      else
                      {
                          <span>0 (no data item)</span>
                      }
                  </Template>
              </ChartSeriesTooltip>
          </ChartSeries>
      </ChartSeriesItems>
  
      <ChartCategoryAxes>
          <ChartCategoryAxis Min="@ChartCategoryAxisMin" Type="@ChartCategoryAxisType.Date"></ChartCategoryAxis>
      </ChartCategoryAxes>
  
  </TelerikChart>

• Set MissingValues to Gap or Interpolate.
  
• Provide dummy data items with a zero or null value. These dummy items depend on the Min and Max axis values and can be appended after the Chart data is retrieved from the data source, so that they are not hard-coded there.
• Do not use a Chart tooltip template.

Hello I want to close a TelerikDialog using Esc key and this does not work sometimes. Run this REPL snippet please https://blazorrepl.telerik.com/cnYrwUYq54FZ70xP17. Click into dialog title for instance and press Esc key. Nothing happens.

Very thanks.

Miroslav

When Virtual Scrolling is enabled and the grid is set to inline editing, clicking the Add button does not start editing on the first click. The button must be clicked twice for a new row to enter edit mode.

Steps to Reproduce:

1. Open this example - https://blazorrepl.telerik.com/QfaZEibY50abpby200

2. Scroll down the grid.

3. Click the "Add" button.

Upon the first click, a new row is inserted but then immediately closed. You have to click it a second time to insert a new row.

Description

Regression introduced in version 10.0.0.

Steps To Reproduce

1. Run this example: https://blazorrepl.telerik.com/GJkCGCvE51aGglud38
2. Filter a Grid column and observe the log below the component.

Actual Behavior

The OnStateChanged event fires 4 times

Expected Behavior

The OnStateChanged event fires 2 times (see https://www.telerik.com/blazor-ui/documentation/components/grid/state#onstatechanged).

Browser

All

Last working version of Telerik UI for Blazor (if regression)

9.1.0

I am testing with a Blazor WASM Standalone app that uses Telerik UI for Blazor. I have a sample page with a button on click of which a predefined dialog (for example, alert) is shown. If you make some change on the page and hot reload is enabled, the button click no longer opens the predefined dialog. The dialog is shown only if I navigate to a different page.

Hello,

 it seems that something is missing to get it working in "SpeecToTextButton". 

how to reproduce:

• tested in different browser(edge,vivaldi,ff), even in private mode https://www.telerik.com/blazor-ui/documentation/components/speechtotextbutton/integration
• load the page

1. click start recording
2. allow microphone access for the first time
3. nothing recorded(it stays max at 2secs in recording state), goto 1

it flickers for a while(at system taskbar, there is also indication of recording) but nothing is "recorded/transcribed".

Is there any additional setup at clientside?

We are experiencing an issue where the ExportToPdfAsync() method on TelerikGrid is returning Excel data (XLSX format) instead of PDF data. This is causing MIME type errors when trying to process the exported data as a PDF.

===ADMIN EDIT===

Workaround

In the meantime, a possible workaround would be to use the document processing library (make sure the correct packages are installed for it) and import the xlsx file to a workbook, and then export the workbook to PDF. Here is an improvised example that demonstrates this by saving the file in your wwwroot folder as a pdf.

@inject IWebHostEnvironment HostingEnvironment

<TelerikGrid Data="@bookList" Height="75svh" Resizable="true" Sortable="true" Pageable="true" PageSize="15"
             FilterMode="@GridFilterMode.FilterMenu" SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedBooks" @ref="@BookGrid"
             SelectedItemsChanged="@((IEnumerable<BookInfo> sel) => OnRowSelect(sel))">
    <GridToolBarTemplate>
        <TelerikButton OnClick="@GenerateReport">Generate PDF</TelerikButton>
    </GridToolBarTemplate>
    <GridExport>
        <GridPdfExport AllPages="true" PageOrientation="GridPdfExportPageOrientation.Landscape"
                       PaperSize="GridPdfExportPaperSize.A3" />
    </GridExport>
    <GridColumns>
        <GridCheckboxColumn CheckBoxOnlySelection="true"></GridCheckboxColumn>
        <GridColumn Field="ISBN">
            <HeaderTemplate><b>ISBN</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="Author">
            <HeaderTemplate><b>Author</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="Title">
            <HeaderTemplate><b>Title</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="Genre">
            <HeaderTemplate><b>Genre</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="PublishedYear">
            <HeaderTemplate><b>Year</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="CopiesAvailable">
            <HeaderTemplate><b>Copies</b></HeaderTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private async Task GenerateReport()
    {
        isLoading = true;
        var pdfStream = await BookGrid.ExportToPdfAsync();

        // The stream is actually XLSX, so convert it to PDF
        using var ms = new MemoryStream(pdfStream.ToArray());

        var xlsxProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx.XlsxFormatProvider();
        var workbook = xlsxProvider.Import(ms);

        var rootPath = HostingEnvironment.WebRootPath;
        var saveLocation = Path.Combine(rootPath, "LibraryBooks.pdf");
        var pdfProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.PdfFormatProvider();
        using (var fileStream = new FileStream(saveLocation, FileMode.Create))
        {
            pdfProvider.Export(workbook, fileStream);
        }
    }

    public class BookInfo
    {
        public string ISBN { get; set; }
        public string Author { get; set; }
        public string Title { get; set; }
        public string Genre { get; set; }
        public int PublishedYear { get; set; }
        public int CopiesAvailable { get; set; }
    }

    private List<BookInfo> bookList = new()
    {
        new BookInfo { ISBN = "978-0451524935", Author = "George Orwell", Title = "1984", Genre = "Dystopian", PublishedYear = 1949, CopiesAvailable = 4 },
        new BookInfo { ISBN = "978-0439139601", Author = "J.K. Rowling", Title = "Harry Potter and the Goblet of Fire", Genre = "Fantasy", PublishedYear = 2000, CopiesAvailable = 7 },
        new BookInfo { ISBN = "978-0140449266", Author = "Homer", Title = "The Odyssey", Genre = "Epic Poetry", PublishedYear = -800, CopiesAvailable = 2 }
    };

    private TelerikGrid<BookInfo> BookGrid;
    private List<BookInfo> SelectedBooks = new();
    private bool isLoading = false;

    private void OnRowSelect(IEnumerable<BookInfo> selected)
    {
        SelectedBooks = selected.ToList();
    }
}

There is a bug with clear button in TelerikNumericTextBox. Steps to reproduce:

1. enter value
2. click on clear btn. to clear value
3. click outside input
4. click on input, at this point value appears again

code:

<TelerikNumericTextBox @bind-Value="@Price1" ShowClearButton=true/>
<p>Price: @Price1</p>
@code {
    private decimal? Price1 { get; set; }
}

Here is a short demo:

Entering dates in the Blazor spreadsheet act weird if you enter a 2 digit year. It seems to subtract a day when you remove focus from the cell.

Start by entering a date like 2/2/25:

Then hit enter or otherwise remove focus from the cell and this is what it changes it to. Notice it subtracts a day:

Then put focus back on the cell:

Now look at the editor at the top:

I note that when you enter a two digit year in Excel it defaults the century to 20 when you enter a year less than 30. It defaults a century of 19 when you enter a year >= 30. It appears that with the Telerik Blazor spreadsheet it always defaults the century to 19. You can make arguments on either side of that but the real issue here is that it subtracts a day when you enter a two digit year. It doesn't do that when you enter a 4 digit year.

The related thing that becomes an issue is when you export the spreadsheet to a byte array and evaluate the cell RawValue. When you enter a 4 digit year, you get a raw value that is a positive number and you can use FormatHelper.ConvertDoubleToDateTime to get the date value. When you enter a 2 digit year and get the raw value, it is a negative number, and when you call FormatHelper.ConvertDoubleToDateTime it returns null.

Can you please comment on the rhyme or reason the spreadsheet behaves this way? Or is this a bug(s)?

Thanks.

The Editor converts new lines in the HTML content to empty paragraphs if the Value is set after the component is initialized and rendered.

Here is a test page with the possible workarounds. The app can either display the Editor after its Value becomes available, or strip the new lines before setting the component Value.

https://blazorrepl.telerik.com/QzuXOPPE06y6JCR942