I have a master-detail draggable Grid scenario in which both Grids have RowDraggable="true". When the user starts dragging a row from the DetailTemplate Grid, a JavaScript error occurs:

TypeError: Argument 1 ('node') to Node.replaceChild must be an instance of Node

When using local data binding, all defined PivotGrid measures are checked by default and render in the Grid.

Please provide the ability to define measures, which are not checked and visible in the Grid area by default.

Currently, if a sub-menu is opened and the user moves the mouse back to a different parent item, the whole menu is closed.

Video: https://app.screencast.com/rcdHp9oklAU4z

Reproduction: https://blazorrepl.telerik.com/mxuClvaB36CB47v425

===

ADMIN EDIT

===

This bug also affects the ContextMenu component.

Hello, 

We are looking to port an angularjs web application to Blazor and I didn't see the diagram component similar to the one found in Kendo UI. It would be nice to see a viso-like component in UI for Blazor.

Thank you.

Please add group header template for the select components. There are two goals:

• Customize the group items' appearance.
• Implement custom behaviors, for example - batch select or unselect of all items in the group by clicking on the group header.

I previously raised an issue regarding the grid popup editor not linking the labels with the generated text inputs which was creating an issue with screenreaders. Since upgrading to version 7.1.0, I've seen that this issue has been fixed but in a way that breaks editor templates. Previously, the "for" attribute of the generated label was being set to the label text, but now everything is being set to a generated GUID.

This is fine for the generated fields since they can link the labels to the controls automatically (by setting the ID of the control to the GUID), but for templates, this means that we cannot link the generated label to the control since we cannot get access to the GUID in the template (as far as I know). Previously, when the "for" attribute on templates was the same as the label text, I could set the ID of the custom template control to the label text and the controls will be linked correctly.

===

ADMIN EDIT

===

• Not using Editor Templates, so the built-in editors are properly connected to their labels.
• Using a custom popup edit form, so you can control the rendering of the whole popup form.

I saw the FloatingActionButton Web control available in KendoUI and ASP.NET Core and I would like it in UI for Blazor: https://demos.telerik.com/kendo-ui/floatingactionbutton/index

When enabling/disabling a form element that is defined in a child component, the element is successfully disabled, however a console error occurs. The error occurs whether the child component makes the update or the parent makes the update through a passed parameter.  The error does not occur for form elements defined in the parent.  The error does not occur for basic html input elements defined in the child. 

Element definition:

<TelerikTextBox 
     Id="ElementMisc" 
     AutoComplete="new-password" 
     @bind-Value="@_searchModel.ElementMisc" 
     Enabled="!_elementSelectMode" 
     class="textbox-75"
     DebounceDelay="0">
 </TelerikTextBox>

Update Code defined in child:

 if (results.Data.Count > 1)
 {   
     _elementSelectMode= true;
     StateHasChanged();

 }

Console Error:

Uncaught (in promise) Error: Assertion failed - heap is currently locked
    at mr (blazor.web.js:1:158963)
    at Object.beginInvokeDotNetFromJS (blazor.web.js:1:157244)
    at w.invokeDotNetMethodAsync (blazor.web.js:1:3978)
    at C.invokeMethodAsync (blazor.web.js:1:5486)
    at r.invokeMethodAsync (telerik-blazor.js:22:1272553)
    at r.onBlur (telerik-blazor.js:22:1463592)
    at ye.setOrRemoveAttributeOrProperty (blazor.web.js:1:28630)
    at ye.applyAttribute (blazor.web.js:1:27574)
    at ye.applyEdits (blazor.web.js:1:24601)
    at ye.updateComponent (blazor.web.js:1:23606)

Hello,

Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/

It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02

===

Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.

Like https://docs.telerik.com/blazor-ui/components/combobox/custom-value and https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values/ so the user can input tags on their own without them being in the app data source.

---

ADMIN EDIT

The following sample may be useful in implementing this in the meantime: https://github.com/telerik/blazor-ui/tree/master/multiselect/add-new-item

---

We use QueryableExtensions.ToDataSourceResultmethod to load some data in our component. And at some moment we need to cancel data loading. But ToDataSourceResult method doesn’t support CancellationToken. So we are forced to use a workaround and just ignore the task's result. But task is still executing and causing the performance hit…

It would be great if you implemented support for this feature!

Describe the bug

The class 'k-tabstrip' item is missing in the rendering of the TabStrip component.

To Reproduce

1. Go to the following demo and open the DevTools:

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

2. Check the source of truth:

https://github.com/telerik/kendo-themes/blob/develop/tests/tabstrip/tabstrip.html 

Actual results

The class 'k-tabstrip-item' is missing.

Expected behavior

The class 'k-tabstrip-item' to be present.

Additional context

ThemeBuilder generates styles for the items of the TabStrip component with selectors like these:

.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item.k-tabstrip-item.k-active .k-link

This works in other technologies, such as Kendo React, but it doesn't take effect in Blazor applications because of the issue.

Reported through t.1672526.

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.

When you create or paste a table, you cannot move the cursor outside of it if there is no other content in the Editor.

----------ADMIN EDIT----------

Here is a possible workaround when using InsertTable() tool:

@using Telerik.Blazor.Components.Editor

<TelerikButton OnClick="@InsertTable">Insert Table</TelerikButton>

<TelerikEditor @ref="@TheEditor" Value="@TheContent" ValueChanged="@ValueChangedHandler"></TelerikEditor>

@code {
    TelerikEditor TheEditor { get; set; }

    string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";

    void ValueChangedHandler(string value)
    {
        var checkEnd = value.EndsWith("</table>");

        TheContent = checkEnd == true ? value + "<p></p>" : value;
    }

    async Task InsertTable()
    {
        await TheEditor.ExecuteAsync(new TableCommandArgs(4, 4));
    }
}

Steps:

• Use the Editor's ValueChanged event.
• See if the value ends with a closing </table> tag.
• Append an empty paragraph to the Editor value - "<p></p>".