I have a TelerikGrid inside of a Blazor component (this blazor component sits within a Telerik tab control which in turn sits on a Blazor page).  The last column in the grid is a button that pops up a context menu for that selected row.

The context menu code in the component looks like this:

<TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems" OnClick="@((TelerikGridContextMenuItem item) => OnContextMenuItemClick(item))"></TelerikContextMenu>

The code for the last grid column looks like this:

<GridColumn Width="60px" Filterable="false" Groupable="false" Reorderable="false" Locked="true">
    <Template>
        <span @onclick:stopPropagation="true">
            <TelerikButton Primary="true" OnClick="@((MouseEventArgs e) => ShowContextMenuOptionsForRow(e, context as TyreCatalogueInfo))" Icon="more-vertical"></TelerikButton>
        </span>
    </Template>
</GridColumn>

The MenuItems for the context menu are set in the OnInitializedAsync method for the component like this:

protected override async Task OnInitializedAsync()
{
    if (IsEnvironmentSet())
    {
        MenuItems = new List<TelerikGridContextMenuItem>
        {
            new() {Text = "Edit Tyre", Icon = "edit", Action = EditSelectedTyre}
        };

        await base.OnInitializedAsync();
    }
}

When any of the buttons in the last grid column are clicked this invokes the ShowContextMenuOptionsForRow which is on a base class which the Blazor component inherits from.

The code for that looks like this:

protected async Task ShowContextMenuOptionsForRow(MouseEventArgs e, TRowInfoType row)
{
    SelectedRowInfo = row;

    await ContextMenuRef.ShowAsync(e.ClientX, e.ClientY);
}

If I stick a breakpoint on the first line SelectedRowInfo = row; within the ShowContextMenuOptionsForRow method it pretty much immediately hits.  If I then hit F5 to continue it takes a further x seconds for the popup menu to appear.  I'm not sure where the time is being spent/lost.

See supporting video which demonstrates the slowness.

https://drive.google.com/file/d/1My5gpDx9qPRi2Fz4tpab7LEWGQZDG3eY/view

I have used this same pattern for other pages (pages that have the grid directly on it, with no other child Blazor components involved) and the speed of the popup is instantaneous.

UPDATE

The slow performance seems to be linked to the Blazor ShouldRender property which is defaulted to true in the Blazor framework.  If I override the ShouldRender property by setting private member field _shouldRender to false when the context menu is invoked by the user, then it appears on screen instantly.  I can reset the private member field _shouldRender back to true when the user click on one of the context menu items.  The issue I have is that once the context menu is invoked by the user they could click anywhere else on the page to dismiss the context menu and that would leave the private member field _shouldRender  as false and have a negative effect on other interactions that need the ShouldRender property to return true.

The code I originally posted I have updated as follows:

private bool _shouldRender = true;
protected override bool ShouldRender()
{
    return _shouldRender;
}

protected async Task ShowContextMenuOptionsForRow(MouseEventArgs e, TRowInfoType row)
{
    _shouldRender = false;

    SelectedRowInfo = row;

    await ContextMenuRef.ShowAsync(e.ClientX, e.ClientY);
}

protected async Task OnContextMenuItemClick(TelerikGridContextMenuItem item)
{
    _shouldRender = true;

    if (item.Action != null)
    {
        await InvokeAsync(item.Action);
    }
}

I have a div which has a couple of buttons contained within it on the lower left corner. I have a TelerikTooltip with the target selector pointed to my div. Most of the time the tooltip works fine but I have found that if I move the mouse onto the div from the lower left corner where the buttons are, the TelerikTooltip shows up correctly while the mouse is over the buttons but when I move the mouse farther into the div and away from the buttons the TelerikTooltip gets hidden and a default tooltip is displayed. It behaves this way whether I use a title on the div or a template on the TelerikTooltip. Any way to keep the TelerikTooltip visible and avoid the default tooltip from being displayed?

I have multiple grids in one view and would like to sync the columns widths. That is, if a user resizes a column, I want that column to be resized in all the grids in the view.

I bound the Width property to a field and while it sets the initial width, however, resizing the column does not change the bound value. Is this not supported? There also doesn't seem to be a Resize event either, so no way to workaround the problem.

Any suggestions?

Thanks in advance.

I am having an issue with my z-index, then freezing grid columns. 

There are obviously then becoming sticky,  which creates a new stacking context, and sticks to the nearest ancestor?  I think this may be where the problem lies. 

As a result when my fixed modal is activated this happens, and I just can't seem to fix the problem. 

Any ideas?

Thank you!

hi

I'm building a system where my users will be able to set up a repeating weekly schedule

I'm wondering if there are any good components suitable for this, i was thinking of making it look like the attached image

since doing it with buttons, would be hard on my users since there would be 168 of them

I am trying to implement a Popup TelerikForm that has a DropDownList of custom class objects. I can not for the life of me figure out why the values are not setting. If I click on a value in the dropdownlist, it defaults back to the first value. I recreated the error in a very simple demo. I want to create a User object, and the User object has a parameter of Position. The DropDownList should show a list of positions, which it does correctly, but the User should be able to click a position and it Bind to User.Position, which is where my problem is. If a position is clicked in the DropDownList, nothing happens.

EDIT:

The PopupLayout class is based heavily on the Telerik class. Removing the inheritance does not solve the problem. Changed HandleOnChange to actually update, I took the screenshots while troubleshooting. Even when HandleOnChange only printed the Position to the console, it never did. It seems that the Change event isn't even firing when the DropdownList is in a TelerikForm. Even using @bind-Value does not work.

Hi

is the only possibility to import my theme in Sass Theme Builder a json-file? Up to the last version I used the scss-variables. Or do i miss something?

Thank you!

Hi
It's necessary to set the color palette for the chart, the color data for the color palette is taken from the sql data source.
Is there any way to get all data in one go from sql data source in a user function?
 

I've noticed I cannot just use straight bootstrap with telerik components and I have noticed that the majority of demos/samples use styling/placement such as k-textbox, k-col-start-6 and much more.  I have no idea what these are doing or how they are used.

I've used bootstrap because there is excellent support for flex and the concepts are not overly difficult.

Is there any similar documentation for all the k- classes?

Trying to do a simple two-column layout.  each column has multiple field groups on a single row.

Pseudo-code

form-row

    col-md-6
        form-group col-md-6
            Label
            TelerikTextBox
        form-group col-md-2
            Label
            TelerikTextBox
        form-group col-md3
            Label
            TelerikTextBox
    col-md-6
        form-group col-md-6
            Label
            TelerikTextBox
        form-group col-md-2
            Label
            TelerikTextBox
        form-group col-md3
            Label
            TelerikTextBox

Ok, I got one step closer.  Use fieldset instead of trying to use grid system solely:

<div class="form-row">
    <div class="col-md-6">
        <fieldset id="LeftColumn" name="LeftColumn">
            <legend></legend>
            <div class="form-group">
                <label></label>
                <input/>
            </div>
            <div class="form-row">
                <div class="col-md-8">
                    <label</label>
                    <input />
                </div>
                <div class="col-md-2">
                    <label></label>
                    <input />
                </div>
                <div class="col-md-2">
                    <label></label>
                    <input />
                </div>
            </div>
        </fieldset>
        <fieldset id="RightColumn" name="RightColumn">
            <legend></legend>
            <div class="form-group">
                <label></label>
                <input/>
            </div>
            <div class="form-row">
                <div class="col-md-8">
                    <label</label>
                    <input />
                </div>
                <div class="col-md-2">
                    <label></label>
                    <input />
                </div>
                <div class="col-md-2">
                    <label></label>
                    <input />
                </div>
            </div>
        </fieldset>
    </div>
</div>

However, fieldset does NOT have the customary border around it.  So, we're back to trying to figuring out your CSS classes again. because there is no documentation.