Hi, 

is there a way to use css to change the telerik menu item border or color when user click on it. After user click on other menu item, the existing old menu item color will remove and the new selected menu item will change the color.

Issue Description: I'm encountering challenges with dynamically positioning the command column within the Telerik Blazor DataGrid while using a single grid component for two pages. Each page utilizes the same grid component but may have different sets of columns generated dynamically. Despite this setup, I'm unable to ensure that the command column consistently appears at the last position in the grid on both pages.

Background: In my application, I've implemented Telerik Blazor's DataGrid component to display tabular data across multiple pages. To streamline development and improve code maintainability, I've opted to use a single grid component shared between two pages. Each page may have a different set of columns generated dynamically based on the specific requirements of the page. Additionally, the data source for the grid is an ExpandoObject, and I'm using a loop to dynamically generate columns.

Current Approach: My current approach involves dynamically generating columns using a loop for each page's specific requirements. However, due to the shared nature of the grid component and the dynamic nature of the data source, I'm experiencing difficulties in ensuring that the command column, which contains actions like edit, delete, etc., is consistently positioned at the last column on both pages.

Expected Behavior: I expect to have precise control over the position of the command column within the DataGrid, even when using a single grid component shared between two pages and dynamically generating columns with ExpandoObject as the data source. Regardless of the page being accessed, the command column should always appear at the last position in the grid, providing users with a consistent interface for interacting with the data.

Request for Assistance: I'm seeking assistance from the Telerik community for guidance, insights, or potential workarounds on how to achieve the desired behavior of positioning the command column as the last column in the DataGrid consistently across two pages, even when utilizing a shared grid component and dynamically generating columns with ExpandoObject as the data source.

Any assistance or suggestions would be highly appreciated. Thank you for your support!

Hi

I want to use the TelerikMenu so I'm trying to create a list of menu items to pass to the Data property

<TelerikMenu Data=menuItems>
    
</TelerikMenu>

List<MenuItem> menuItems;

and I'm getting an error: "Using the generic type 'MenuItem<TItem>' requires 1 type arguments"

but in the docs, I see it'd be used without a generic parameter: https://docs.telerik.com/blazor-ui/components/menu/overview

Thanks

Hi

We have been using a form action to logout within our TelerikMenu:

<TelerikMenu Data="@MenuItems">
    <ItemTemplate Context="item">
        @{
            if (item.IsForm)
            {
                <form method="post" action="@item. Action">
                    <AntiforgeryToken />
                    <input type="hidden" name="ReturnUrl" value="/" />
                    <input type="submit" value="@item. Text"/>
                </form>
            }
            else
            {
                <NavLink href="@item.Url">
                    <span>@item.Text</span>
                </NavLink>
            }
        }
    </ItemTemplate>
</TelerikMenu>

But we are now struggling with the new `<AntiforgeryToken />`. It does not seem to be able to render itself. I don't know if it has anything to do with the way it constructs itself:

    private void RenderField(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "input");
        builder.AddAttribute(1, "type", "hidden");
        builder.AddAttribute(2, "name", _requestToken!.FormFieldName);
        builder.AddAttribute(3, "value", _requestToken.Value);
        builder.CloseElement();
    }

We have managed to create a work around by basically copying the AntiforgeryToken logic into our own component i.e.:

@inject AntiforgeryStateProvider antiforgeryStateProvider 

<input type="hidden" name="@_requestToken!.FormFieldName"value="@_requestToken.Value" />

@code {
    private AntiforgeryRequestToken? _requestToken;

    ??? (){
        _requestToken = antiforgeryStateProvider?.GetAntiforgeryToken();
    }
}
 

But this means that we would have to maintain that extra code and take on the responsibility of the security it provides. Is TelerikMenu the wrong component for this or is there any better way to get this working?

Thanks,

Mark

How do I set the background on the dropdown? 

<div class="container">
    <div class="row justify-content-md-end text-light gsi-background-color-darkgray">

        <div class="col">
        </div>
        <div class="col-md-auto">
            <TelerikMenu Data="MenuItems" 
                OnClick="@((TelerikMenuItem item) => OnMenuClicked(item))">
            </TelerikMenu>
        </div>
    </div>
</div>

    public class TelerikMenuItem
    {
        public string Text { get; set; }
        public bool Disabled { get; set; }
        public bool Separator { get; set; }
        public string Url { get; set; }
        public IEnumerable<TelerikMenuItem> Items { get; set; }
    }

Is there a plan to fix this in the long term? The "work-around" listed in your documentation, Configure the Render Mode per Page found at https://docs.telerik.com/blazor-ui/getting-started/web-app#configure-the-render-mode-per-page technically functions as the root component error goes away and site starts working... 

However, it misses the bigger issue in that it now loads the entire page including all of the layout code and components, re-executing them as well... put some components in the TelerikLayout and add break points to the OnInit functions to see what I am referring to. It will now do this for every single page in application now...

So... to my initial question... what is the plan to fix/address the TelerikRootComponent in the multiple rendering mode world that is .NET 8 now?

I will say it looks like the Blazor team added a new concept of using builder.Services.AddCascadingValues() to address this problem, I have used it with our internal RootComponent to fix this same concept with our internal code... thoughts?

builder.Services.AddTelerikCascadingParameters(); is referenced at url below:

https://github.com/dotnet/aspnetcore/issues/50724 by SteveSandersonMS, I realize he was just throwing out an idea, the above line of code doesn't actually exist to my knowledge, at least not yet... :)

Thanks in advance!

Hy telerik,

On touch screens there is no hover so you need to click an item to open the menu for the children items.

This is not taken into account by the current implemnentation of CloseOnClick.

Becouse if set to True, it never opens the nested menu items. 

For now I will set CloseOnClick=false in order to be able to open the submenus. But this will make the menu stay opened after clicking a item. With is a very anoying user experience. I can provide an exemple if necesary.

Eveything works as expected on Descktop, as the submenu opens with hover.

Is this a bug?

Will it be fxed?

Is there a way to close the menu programatically?

Any workaround?

I have no found a duplicate post.

Cheers!

I have a ItemTemplate for the menu item which defines background color. But the parent node define the Padding, so it has different background color. I want to remove that padding.

But I don't want to change the style for global Telerik class, the other places may not want the behavior.

For Telerik DropDownList, we can have DropDownListSettings to define a separated class for the dropdownlist, like this:

<TelerikDropDownList Class="@componentClass" >
        <DropDownListSettings>
            <DropDownListPopupSettings Class="@dropdownClass" />
        </DropDownListSettings>
<TelerikDropDownList >

Please provide the same for TelerikMenu as well, so we can style the item without affect the Telerik global class.

I'm trying to add a link that is outside of Blazor, in a menu component.  I think this is more of a Blazor routing issue than the menu component but I can't figure out how to work around it.  Blazor's default integration with AD includes a logout link.

<a href="MicrosoftIdentity/Account/SignOut">Log in</a>

I'm trying to add that link to the Menu component and I think its routing like an internal blazor page.  Below is the menu code and the last menu item is the logout.

    protected async override Task OnInitializedAsync()
    {
        var authState = await authenticationState;
        var user = authState?.User;
        IsAdmin = user.IsInRole("TaxonomyAdmin");

        var logoutUrl = string.Concat(Navigator.BaseUri, "MicrosoftIdentity/Account/SignOut");

        MenuItems = new List<MenuItem>()
        {
            new MenuItem{
                Url = "/",
                Icon = FontIcon.Menu,
                Items = new List<MenuItem>(){
                new MenuItem {Text = "Home", Url="/"},
                new MenuItem {Text = "New Request", Url="/newrequest"},
                new MenuItem {Text = "Admin", Url="/", Disabled = !IsAdmin },
                new MenuItem {Text = "Logout", Url=logoutUrl}
                }
            }
        };

        base.OnInitialized();
    }

It takes me to the correct url which is

https://localhost:7261/MicrosoftIdentity/Account/SignOut

and I get the routing error: "Sorry there is nothing at this address".   If I click return and rerun that URL it routes to the logout as expected.

Any suggestions?