Triggering Edit in a Grid bound to a DataTable and with edit mode set to Popup throws an unhandled exception. This started to occur in 4.1.0 - the same code runs fine on 4.0.1

To reproduce:

1. run https://blazorrepl.telerik.com/cduHQkPS34V0enTc50 (note this is the DataTable demo, but with changed edit mode)
   
2. trigger edit mode
   
3. observe the unhandled exception

Imagine a Grid with two editable columns, which are separated by a few non-editable ones. In the standard use case, tabbing from the first editable column should jump over the non-editable columns, and the user should end up in the second editable column.

However, if the Grid uses virtual columns and the second editable column is not rendered, tab-to-edit will stop working.

OnRowRender in version 4 style is applied through one line.

When I updated to the latest version I noticed that the FormItems in AuthorizedViews were moved to the bottom of the form, Quick example:

<TelerikForm>
    <FormItems>
        <AuthorizeView>
            <Authorized>
                <FormItem Field="First"/>
            </Authorized>
        </AuthorizeView>
        <FormItem Field="Second"/>
    </FormItems>
</TelerikForm>

will end up like

<TelerikForm>
    <FormItems>
        <FormItem Field="Second"/>
        <FormItem Field="First"/>
    </FormItems>
</TelerikForm>

Hi

Trying to update to the latest version but in output in GitHub Actions it shows:

The type 'DataSourceRequest' is defined in an assembly that is not referenced. You must add a reference to assembly 'Telerik.DataSource, Version=2.1.3.0

However in my csproj I am referencing <PackageReference Include="Telerik.DataSource" Version="2.1.3" />

Any ideas?

After the update

we're having this issue when trying to build our project.

The needed nuget package it's already added and even adding the Telerik.DataSource as a package that's not needed in theory we're not able to build.

Error CS0012 The type 'CompositeFilterDescriptor' is defined in an assembly that is not referenced. You must add a reference to assembly 'Telerik.DataSource, Version=2.1.3.0, Culture=neutral, PublicKeyToken=29ac1a93ec063d92'.

Here is a TelerikForm with a FormItem (1) for a boolean field. Another FormItem (2) should render, depending on the boolean field (1). This does not work with a TelerikForm, but works with a standard EditForm.

The workaround for a TelerikForm is to use a FormItem Template with a TelerikCheckBox. This is demonstrated below as well.

<EditForm Model="@_data">
    <label>Condition 1 (InputCheckbox):</label>
    <InputCheckbox @bind-Value="@_data.Value1" />
    <br />
    @if (_data.Value1)
    {
        <label>Result 2</label>
        <InputCheckbox DisplayName="Result 2:" @bind-Value="@_data.Value2"></InputCheckbox>
    }
</EditForm>

<h1>TelerikForm</h1>

<TelerikForm Model="@_data">
    <FormItems>
        <FormItem LabelText="Condition 1 (FormItem):" Field="@nameof(_data.Value1)"></FormItem>
        <FormItem>
            <Template>
                <label for="x">Condition 1 (TelerikCheckBox):</label>
                <br />
                <TelerikCheckBox Id="x" @bind-Value="_data.Value1" />
            </Template>
        </FormItem>
        @if (_data.Value1)
        {
            <FormItem LabelText="Result 2:" Field="@nameof(_data.Value2)"></FormItem>
        }
    </FormItems>
</TelerikForm>

@code {
    private ExampleDto _data { get; set; } = new ExampleDto();

    public class ExampleDto
    {
        public string TextValue { get; set; }
        public bool Value1 { get; set; }
        public bool Value2 { get; set; }
    }
}

Title: WCAG 4.1.2: Ensures elements with ARIA roles have all required ARIA attributes (.k-splitbar)
Tags: Accessibility, WCAG 4.1.2, aria-required-attr

Issue: Ensures elements with ARIA roles have all required ARIA attributes (aria-required-attr - https://accessibilityinsights.io/info-examples/web/aria-required-attr)

Target application: xxx

Element path: .k-splitbar

Snippet: <div tabindex="0" role="separator" class="k-splitbar k-splitbar-vertical k-splitbar-draggable-vertical">

How to fix: 
Fix any of the following:
  Required ARIA attribute not present: aria-valuenow

Environment: Microsoft Edge version 111.0.1661.41

====

This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

=================== code ===============================

Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (#\39 374a450-079d-4586-b823-d6bc7723505f)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: Hermes Home - https://localhost/TrafficLoss

Element path: #\39 374a450-079d-4586-b823-d6bc7723505f

Snippet: <div class="k-grid-aria-root" id="9374a450-079d-4586-b823-d6bc7723505f" role="grid" aria-label="Data table">

How to fix: 
Fix any of the following:
  Element has children which are not allowed (see related nodes)
  Element has no aria-busy="true" attribute

Environment: Microsoft Edge version 111.0.1661.41

====

This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

============================  code =============================

                           <TelerikGrid Data="@ViewModel.RDLInformation" TItem="TLSummary"
                                                        Pageable="true" 
                                                        Sortable="true" 
                                                        Groupable="false"
                                                        FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
                                                        Resizable="true" 
                                                        Reorderable="true"
                                                        Height = "100%">

....

                            </TelerikGrid>

Hello,

I seem to have stubled upon a strange bug in TelerikGrid. We have wrapped a TelerikGrid and the Columns are also wrapped to allow special actions.
The bug is present in "raw-telerik-code" as well.

We have an edge case where we have a TelerikGrid and some of its columns should be Locked (Stickied/Frozen) as a default behaviour.
But depending on user interaction we want to change the state. We cannot use a property for each column that we want to be Locked/Unlocked as it should be handled by the GridState.

When the Column is using default behaviour (not Templated), it works as intended. But as soon as you use a <Template> for the Column, the Locked state cannot be changed from the default/supplied value.

TLDR: Programmatically changing the Locked state of a column where the cell is templated will not change the locked state.

I have prepared two REPL examples. One for 3.7.0 as it is what we currently are using, and one for 4.0.1 as to prove that it still exists in the current itteration.

3.7.0
https://blazorrepl.telerik.com/cHEHurlI06olUsJ410

4.0.1
https://blazorrepl.telerik.com/cdYRuBvo07aB6BGY39

With best regards

I have a requirement to be able to select multiple values. I have filtering enabled, but I only want the user to be able to select valid values and not enter custom data. My approach would be to clear any invalid data when the control loses focus. I want the MultiSelect input to be cleared when it looses focus (similar to the ComboBox behavior).

=========================

ADMIN EDIT

=========================

In the meantime, such behavior could be achieved with a JavaScript function called through the JS Interop.

@inject IJSRuntime JsInterop

<TelerikMultiSelect Filterable="true" Data="@Countries"
                    @bind-Value="@Values"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" ClearButton="true" 
                    AutoClose="false" OnBlur="@OnBlurHandler">
</TelerikMultiSelect>


@if (Values.Count > 0)
{
    <ul>
        @foreach (var item in Values)
        {
            <li>@item</li>
        }
    </ul>
}

@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();

    async Task OnBlurHandler()
    {
        await JsInterop.InvokeVoidAsync("clearMultiselectInput");
    }

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");

        base.OnInitialized();
    }
}

You can include the following script tag in your index page or place the function in a separate JavaScript file in your project. This function will clear all instances of the Multiselect inputs, so you don't have to specify separate selectors for each of them. If you only want to work with one instance, you can use another approach.

<script>
        function clearMultiselectInput() {
            var inputs = document.querySelectorAll(".k-multiselect .k-input-values input");
            inputs.forEach(e => e.value = "")                     
        }
</script>

Sorry to bother you, but we found a problem when using the FileManager control. When you are in a directory hierarchy Home > Dir1 > DirA > DirX > DirY and you want to navigate to the parent directory say DirX using the breadcrumb, clicking on DirX, FileManager sends you to the root directory. I hope you can help me.

If there are a lot of child folders, the Breadcrumb navigation does not work correctly. The current directory does not respond to the selected one.

If the application expands TreeView items programmatically, and then the user tries to select multiple items, an exception will occur.

The issue is a regression that occurred in version 3.0.0. A possible workaround is to Rebind() the TreeView with a small delay after programmatic item expansion.

<TelerikTreeView @ref="@TreeViewRef"
                 Data="@FlatData"
                 @bind-ExpandedItems="@ExpandedItems"
                 SelectionMode="@TreeViewSelectionMode.Multiple"
                 SelectedItems="@SelectedItems"
                 SelectedItemsChanged="@((IEnumerable<object> items) => SelectedItemsHandler(items))" />

<TelerikButton OnClick="@ExpandAll">Expand All</TelerikButton>
<TelerikButton OnClick="@CollapseAll">Collapse All</TelerikButton>

@code {
    public TelerikTreeView TreeViewRef { get; set; }
    public IEnumerable<TreeItem> FlatData { get; set; }
    public IEnumerable<object> SelectedItems { get; set; } = new List<object>();
    public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();

    async Task ExpandAll()
    {
        ExpandedItems = FlatData.Where(x => x.HasChildren == true);

        await Task.Delay(1);
        TreeViewRef.Rebind();
    }

    void CollapseAll()
    {
        ExpandedItems = new List<object>();
        SelectedItems = new List<object>();
    }

    void SelectedItemsHandler(IEnumerable<object> items)
    {
        SelectedItems = items;
    }
    protected override async void OnInitialized()
    {
        FlatData = LoadFlat();
    }

    int TreeLevels { get; set; } = 3;
    int ItemsPerLevel { get; set; } = 3;
    int IdCounter { get; set; } = 1;
    List<TreeItem> LoadFlat()
    {
        List<TreeItem> items = new List<TreeItem>();
        PopulateTreeItems(items, null, 1);
        return items;
    }
    void PopulateTreeItems(List<TreeItem> items, int? parentId, int level)
    {
        for (int i = 1; i <= ItemsPerLevel; i++)
        {
            var itemId = IdCounter++;
            items.Add(new TreeItem()
            {
                Id = itemId,
                Text = $"Level {level} Item {i} Id {itemId}",
                ParentId = parentId,
                HasChildren = level < TreeLevels
            });
            if (level < TreeLevels)
            {
                PopulateTreeItems(items, itemId, level + 1);
            }
        }
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
    }
}

Here is a REPL test page. If the user navigates forwards and backwards via the Wizard buttons, the TreeView checkboxes persist their state. If the user navigates via the Stepper, the checkbox state is not retained.

The issue is triggered by the TabStrip.

A possible workaround is to prevent Stepper clicks with CSS:

.k-tabstrip .k-wizard .k-stepper .k-step {
  pointer-events: none;
}