Please add TreeList Export to Excel

Regards

Andrzej

I'd like to have an ExpansionPanel component where I can declare my desired panel instances and their content in the markup.

Similar to https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/

The PDF standard allows two ways to configure Acro fields and relate them to inputs (widget annotations):

1. The field can be independent of the input widget. There can even be multiple inputs that point to the same field.
2. The field and the widget can be represented by the same object in the PDF file.

Adobe Acrobat supports both options. Telerik PdfProcessing supports only the first option, which is more commonly used. The PDF Viewer supports only the second option. If the PDF Viewer loads a file with the first configuration, the component saves new field values in such a way that they can't be retrieved by PdfProcessing. Moreover, if the PDF file is opened locally, it looks like the new values are there, but when you click on a field, the original value shows. The new value behaves like a placeholder rather than a real value.

To Reproduce

1. Open a file with Acro fields in the PDF Viewer with enabled form filling
2. Edit the fields and save the file.
3. Open the file with a desktop client like Adobe Acrobat Reader.
4. Click on a textbox.
5. Result - the old value shows. Instead, the new value should persist.
   

Currently, on mobile devices (where is no hover), to open the child menu you need to click/tap the parent and the only way close it afterwards is if you click away. This is not very convenient for mobile usage. I want to be able to close the child menu on click/tap of the parent as well.

When you select a date in DropDownList with dates in it (List<DateTime>), the @bind-Value is shaving off the milliseconds.

===ADMIN EDIT===

In the meantime, as a workaround for displaying milliseconds correctly, you can bind the DropDownList to a model. This way, you can use the "Id" to retrieve the selected item and display its precise milliseconds. Below is an example I've prepared to demonstrate this approach:

Selected value: @myDdlData.ToList().Where(x => x.Id == selectedValueId).FirstOrDefault()?.MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff")
<br />

<TelerikDropDownList Data="@myDdlData" 
                     TextField="MyTextField" 
                     ValueField="Id" 
                     @bind-Value="selectedValueId">
</TelerikDropDownList>

@code {
    public class MyDdlModel
    {
        public int Id { get; set; }
        public DateTime MyValueField { get; set; }
        public string MyTextField => MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff"); // Display formatted DateTime
    }

    private int selectedValueId { get; set; } = 1;

    private IEnumerable<MyDdlModel> myDdlData = GenerateRandomDateTimes(20);

    private static IEnumerable<MyDdlModel> GenerateRandomDateTimes(int count)
    {
        Random random = new Random();
        DateTime startDate = DateTime.Now;

        return Enumerable.Range(1, count)
            .Select(x => new MyDdlModel
            {
                Id = x, // Unique integer Id
                MyValueField = startDate.AddDays(x)
                    .AddMinutes(random.Next(0, 60))
                    .AddSeconds(random.Next(0, 60))
                    .AddMilliseconds(random.Next(0, 1000))
            }).ToList();
    }
}

• If you select a row and then unselect that row (SelectedItems is empty), and hit the incorrectly enabled delete button, it removes a row that has not been selected. When there is no selected row, the delete tool should be disabled.

• If you use multiple selection, the delete tool will delete the last row, which is unexpected. It should delete all selected rows.

Workaround:

<TelerikGrid Data="@GridData"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedItems"
             SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
             Height="300px">
    <GridToolBarTemplate>
        <TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" />
        <GridColumn Field="Name" Title="Name" />
        <GridColumn Field="Team" Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
    {
        EmployeeId = i,
        Name = $"Employee {i}",
        Team = $"Team {i % 3}"
    }).ToList();

    private List<Employee> SelectedItems { get; set; } = new();

    private void OnSelectedItemsChanged(IEnumerable<Employee> items)
    {
        SelectedItems = items.ToList();
    }

    private void DeleteSelectedEmployees()
    {
        if (SelectedItems.Any())
        {
            GridData = GridData.Except(SelectedItems).ToList();
            SelectedItems.Clear();
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
        public override int GetHashCode() => EmployeeId.GetHashCode();
    }
}

Telerik input components inside EditorTemplate render the whole grid on each keystroke

<AdminEdit>

As a workaround, you can use the standard Input components provided by the framework together with a CSS class that would visually make them like the Telerik Input Components. An example for the TextArea:

<InputTextArea class="k-textarea" @bind-Value="@myValue"></InputTextArea>

</AdminEdit>

The AutoComplete component does not update the category grouping header, even when the data within that group has been removed. As a result, the outdated group header remains visible until you scroll down to another group, at which point the first group header refreshes and disappears as expected.

Repro: REPL link.

Bug report

Reproduction of the problem

(bug report only)
Regression introduced in 9.0.0.

1. Run the code posted below and export the Grid.
2. Open the exported Excel file.

<TelerikGrid Data=@GridData
             Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             ShowColumnMenu="true" FilterMode="@GridFilterMode.FilterMenu"
             Width="800px" Height="400px">
    <GridToolBar>
        <GridToolBarExcelExportTool>
            Export to Excel
        </GridToolBarExcelExportTool>
    </GridToolBar>
    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="false" />
    </GridExport>
    <GridColumns>
        <GridColumn Title="Personal Information">
            <Columns>
                <GridColumn Field=@nameof(Customer.FirstName) Title="First Name" Width="100px" />
                <GridColumn Field=@nameof(Customer.LastName) Title="Last Name" Width="100px" />
            </Columns>
        </GridColumn>
        <GridColumn Title="Company">
            <Columns>
                <GridColumn Field=@nameof(Customer.CompanyName) Title="Name" />
                <GridColumn Field=@nameof(Customer.HasCompanyContract) Title="Has Contract" Width="120px" />
            </Columns>
        </GridColumn>
        <GridColumn Title="Contact Details">
            <Columns>
                <GridColumn Field="@nameof(Customer.Email)" Title="Email"></GridColumn>
                <GridColumn Field="@nameof(Customer.Phone)" Title="Phone"></GridColumn>
                <GridColumn Field="@nameof(Customer.City)" Title="City"></GridColumn>
            </Columns>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public List<Customer> GridData { get; set; }

    public class Customer
    {
        public int Id { get; set; }
        public string PasswordHash { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public bool HasCompanyContract { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string City { get; set; }
    }

    // generation of dummy data
    protected override void OnInitialized()
    {
        GridData = GenerateData();
    }

    List<Customer> GenerateData()
    {
        var data = new List<Customer>();

        string[] fNames = new string[] { "Nancy", "John", "Orlando", "Jane", "Bob", "Juan" };
        string[] lNames = new string[] { "Harris", "Gates", "Smith", "Caprio", "Gash", "Gee" };
        string[] cNames = new string[] { "Acme", "Northwind", "Contoso" };
        string[] cities = new string[] { "Denver", "New York", "LA", "London", "Paris", "Helsinki", "Moscow", "Sofia" };
        Random rnd = new Random();

        for (int i = 0; i < 150; i++)
        {
            string fName = fNames[rnd.Next(0, fNames.Length)];
            string lName = lNames[rnd.Next(0, lNames.Length)];
            string cName = cNames[rnd.Next(0, cNames.Length)];
            data.Add(new Customer
            {
                Id = i,
                PasswordHash = "not shown",
                FirstName = fName,
                LastName = lName,
                CompanyName = cName,
                HasCompanyContract = i % 3 == 0,
                Email = $"{fName}.{lName}@{cName}.com",
                Phone = $"{rnd.Next(100, 999)}-555-{rnd.Next(100, 999)}",
                City = cities[rnd.Next(0, cities.Length)]
            });
        }

        return data;
    }
}

Current behavior

(optional)
The “Personal Information”, “Company”, “Contact Details” headers are not exported.

Expected/desired behavior

The multi-column headers are exported.

Environment

• Kendo/Telerik version: 14.0.0
• Browser: [all ]

The TabStrip ActiveTabIdChanged event fires when the user navigates to another page.

The workaround is to detect app navigation and prevent the business logic execution. The example below is for the general case. If the app navigates programmatically with NavigationManager.NavigateTo(), you can set the IsNavigating flag immediately before that.

@implements IDisposable
@inject NavigationManager NavManager

<TelerikTabStrip ActiveTabId="@ActiveTabId"
                 ActiveTabIdChanged="@TabStripActiveTabIdChanged">
    @for (int i = 1; i <= TabCount; i++)
    {
        int tabIndex = i;

        <TabStripTab @key="@tabIndex" Title="@($"Tab {tabIndex}")" Id="@($"tab{tabIndex}")">
            <h2>Tab @tabIndex</h2>
        </TabStripTab>
    }
</TelerikTabStrip>

@code {
    private string ActiveTabId { get; set; } = "tab1";

    private bool IsNavigating { get; set; }

    private const int TabCount = 3;
    

    private async Task TabStripActiveTabIdChanged(string newActiveTabId)
    {
        if (IsNavigating)
        {
            return;
        }

        ActiveTabId = newActiveTabId;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            locationChangingRegistration = NavManager.RegisterLocationChangingHandler(OnLocationChanging);
        }
    }

    private IDisposable? locationChangingRegistration;

    private ValueTask OnLocationChanging(LocationChangingContext context)
    {
        IsNavigating = true;

        return ValueTask.CompletedTask;
    }

    public void Dispose() => locationChangingRegistration?.Dispose();
}

Would it be possible to have the ability to create compact TreeList's similar to how we can now in a Grid? Since Size=ThemeConstants.Grid.Size.Small is available a Grid now it seems natural this would be a next step. If we can be provided with a work around for the time being that would be great.

The FileManager crashes with a null reference exception when the selected file is deleted while the preview pane is open.

https://demos.telerik.com/blazor-ui/filemanager/overview

Error: System.NullReferenceException: Object reference not set to an instance of an object.
   at System.Object.GetType()
   at Telerik.Blazor.Components.TelerikFileManager`1.ConvertToFileEntry(Object dataItem)
   at Telerik.Blazor.Components.TelerikFileManager`1.GetSelectedEntryForDetails()
   at Telerik.Blazor.Components.TelerikFileManager`1.<BuildRenderTree>b__397_15(RenderTreeBuilder __builder3)
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Telerik.Blazor.Components.TelerikSplitter.BuildRenderTree(RenderTreeBuilder __builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Reproduction with Data parameter

https://blazorrepl.telerik.com/GJYPlrEW485dZtjX55

Reproduction with OnRead

I made a Blazor REPL reproduction: https://blazorrepl.telerik.com/mcuCGpYr4223mhWY49. Run and observe the person label is overlapping the dropdown.

How to reproduce:

1. Get code from the Remote Data Example.
2. Surround the ComboBox with a TelerikFloatingLabel, it will then look like this:

   <TelerikFloatingLabel Text="Person">
   <TelerikComboBox 
                   TItem="@Person" TValue="@int"
                    ScrollMode="@DropDownScrollMode.Virtual"
                    OnRead="@GetRemoteData"
                    ValueMapper="@GetModelFromValue"
                    ItemHeight="30"
                    PageSize="20"
                    TextField="@nameof(Person.Name)"
                    ValueField="@nameof(Person.Id)"
                    @bind-Value="@SelectedValue"
                    Filterable="true" FilterOperator="@StringFilterOperator.Contains">
       <ComboBoxSettings>
           <ComboBoxPopupSettings Height="200px" />
       </ComboBoxSettings>    
   </TelerikComboBox>
   </TelerikFloatingLabel>