The Telerik animation containers get placed on the body using position:absolute and have a z-index that is set based on other animation containers.  (https://feedback.telerik.com/blazor/1548718-showing-the-context-menu-via-its-api-method-does-not-set-its-z-index?_)

So they seem to get set to be a value like 2.

I am using a ui framework that has some elements on the body with z-indexes > 1000. Eg a side menu.

I am using the Telerik grid. The column menu's use the animation container, and because the animation containers get placed directly on the body with a z-index of 2, they always appear behind this side menu.

I do not want to set a blanket CSS rule like `.k-animation-container { z-index: 2000 !important; }` because it will break any other behaviour that Telerik animation containers have. When i don't use `!important`, eg like here (https://feedback.telerik.com/blazor/1514877-css-class-does-not-render-on-the-topmost-element) the inline style overrides it anyway.

Could this be solved by any of these:

1.  Set a default z-index value for animation containers, and have all subsequent animation containers base themselves off of that value? Eg a config setting, or a CSS variable, or a dummy animation container being placed into the dom with a set z-index value so that all others are based on it

Or,

2. A parameter as part of the grid column menu that lets me pass an extra class to the animation container, I can then use this class to specifically set the z-index for only column menu instances of the animation container.

The DateRangeSelector does not offer any properties that allows us to change the Label for start or end date on the TelerikDateRangePicker.

Are there any other options beside using JavaScript?

What I am thinking at the moment is using the following properties:

Then OnAfterRenderAsync, calling into JavaScript with the Id for each and pass in the new display value.

In my case: "Check-In Date" and "Check-Out Date"

I need to be able to cancel row selection and there is no SelectedItemsChanging event that proceeds the SelectedItemsChanged event.  I am trying to handle it in the OnRowClick event handler, but while I can prevent other changes, the row selection change still happens.

I have a grid, and if the user clicks on a row it opens and loads a detail component below the grid.  If the detail component is visible and the user clicks in the grid on a different record I show a confirmation dialog to let them know about potentially lost changes since they have not saved.

I do this in the onrowclick handler, and if the clicked row does not equal the selected row (and the selected row is not empty then I show the confirmation after saving the selected row in a new variable

If they opt to lose the changes I proceed with the change and update the SelectedItems to the newly clicked on row.

If they opt to not proceed, then I set the SelectedItems to a new list and add the

<TelerikGrid @ref="RolesGrid"
             TItem="@GetRoles.Response"
             Pageable="true"
             Sortable="true"
             OnRead="@ReadRoles"
             EnableLoaderContainer="@IsGridLoading"
             SelectionMode="GridSelectionMode.Single"
             OnRowClick="@HandleRolesGridRowClick"
             SelectedItems="SelectedItems">

private async Task HandleRolesGridRowClick(GridRowClickEventArgs args)
{
var clickedRole = args.Item as GetRoles.Response;
var selectedRole = SelectedItems.FirstOrDefault();
bool allowSelection =
selectedRole == null ||
await Dialogs.ConfirmAsync($"Switching roles will lose unsaved changes in the {selectedRole.Name} role",
"Lose Unsaved Changes?");
if (allowSelection)
{
DisplayRole(clickedRole.RoleId, clickedRole.Name);
SelectedItems = new List<GetRoles.Response>(){clickedRole};
}
else
{
SelectedItems = new List<GetRoles.Response>() { selectedRole };
}
args.ShouldRender = allowSelection;

}

Based on another suggestion elsewhere,  I tried adding the following to the Grid's definition and and empty method to handle it and it still makes the selection change.

SelectedItemsChanged="@((IEnumerable<GetRoles.Response> selectedRecords) => HandleRoleSelection(selectedRecords))

Any help would be appreciated.

Hello,
I am trying to check some custom validation when a value is adjusted on a TelerikForm. And I am using
EditContext.OnFieldChanged += HandleFieldChanged;

But the value is still the old value,  it looks like the TelerikInputBase is firing the notification before the change is actually applied.

    private protected void TriggerChange(T value)
    {
      if (this.ValidateOn == ValidationEvent.Change)
        this.CascadedEditContext?.NotifyFieldChanged(this.FieldIdentifier);
      this.OnChange.InvokeAsync((object) value);
    }

Is there a better way to be doing this? 
I do not want to have to add the validation check on every input OnChange.


I have also tried OnFormUpdate with the same issue, this is the function I am using where EditContext still has the old values

protected async Task OnFormUpdate(FormUpdateEventArgs args)
{
    if (!IsUpdating)
    {
        IsUpdating = true;
        DataHasChanged = true;
        var type = args.Model.GetType();
        var property = type.GetProperty(args.FieldName);
        if (property != null)
        {
            if (property.GetCustomAttributes(typeof(SkipMessageCheckAttribute), true).FirstOrDefault() is not SkipMessageCheckAttribute)
            {
                await CheckMessagesAsync();
            }
        }
        IsUpdating = false;
    }
    DataIsValid = !EditContext.GetValidationMessages().Any() && Messages.All(m => m.Priority != PageMessagePriority.Error);
}

Thanks,

Matt

What is the best way to resize a div within a TabStripPage to the size of the tab ?

I am still struggeling with css...

I have a data structure of orders and are listing those each in a tab within a tabstrip. From there I have 4 separate grids for 4 parts of the order. I don't know if this is related to being added in a tabstrip, but I cannot get tooltips to show in the grids or the editor template to show in edit when I click the GridCommandButton for Edit. 

Here is an example of my tooltip:

                     if (item.WORK_ORDER != null)
                     {
                         <span title="@item.WORK_ORDER"></span>
                         <TelerikTooltip TargetSelector="@( "#tooltip-target" +  item.ID)"
                         Width="350px" Height="250px" Position="@TooltipPosition.Right">
                         </TelerikTooltip>
                     }

And here is an example of how I have added into my tabstrip:

<TelerikTabStrip ActiveTabIndex="@activeTab" ActiveTabIndexChanged="@TabChangedHandler" Scrollable="true" TabPosition="@TabPosition.Right" Width="100%" Height="100%">
@{
     foreach (OrderData item in OrdersData)
     {
       <TabStripTab Class="@(item.TITLE == Title ? "selected" : "")" Title="@item.TITLE" Visible="@(item.PatternRecords.Count > 0 ? true : false)" @key="@item">
   }
}

We are updating the data bound to the treeview dynamically which has CheckParents and CheckChildren set to true . Issue is it appears the binding is ignoring these flags. screenshot show it ignoring CheckParents. This REPL shows it ignoring CheckChildren https://blazorrepl.telerik.com/GyuKmVPY13f8gREi18

                  <TelerikTreeView Data="@PermissionTreeData"
                                   @bind-CheckedItems="@CheckedItems"
                                   CheckBoxMode=@TreeViewCheckBoxMode.Multiple
                                   CheckParents=@true
                                   CheckChildren=@true>

I am having a really strange issue with an animation container. For reference, this animation container appears in one half of a Splitter, and the container includes a Grid which loads data.

When I prompt the animation container, with the container animation set to "SlideLeft", the container immediately appears in middle of the splitter, but then animates to the left before jumping back.

The confusing part is that I have other virtually identical implementations of the animation container that do not exhibit this issue. The animation container content is provided generically through a render fragment. Showing and hiding of the container is handled through a custom "container stack" component we have written, but this is common between the working and stuttering containers.

Any thoughts as to what would cause this? We are using the same parent container for multiple animation containers, although only one is shown on top at a time.