Questions on UI for Blazor Forum

1 answer

327 views

How do I change the title of "Start" or "End" on the TelerikDateRangePicker

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"

DateRangePicker

answered on 03 Jul 2024

2 answers

1.2K+ views

How to prevent row selection change

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

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.

Grid

updated answer on 03 Jul 2024

1 answer

359 views

Why is the EditContext.NotifyFieldChanged on the input base fired before the change has been applied?

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

Form

NumericTextBox

answered on 02 Jul 2024

1 answer

70 views

TabStrip: Expand Element inside as Tab to the size of the Tab

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

I am still struggeling with css...

TabStrip

answered on 02 Jul 2024

0 answers

60 views

Issue with tooltips and editor template in tabstrip.

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">
   }
}

Grid

TabStrip

Tooltip

updated question on 01 Jul 2024

1 answer

69 views

Treeview with checkboxes, problems with CheckParents=@true CheckChildren=@true

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

TreeView

answered on 01 Jul 2024

1 answer

69 views

Treeview: Focused Node

The node of a treeview loses its focus and emphasis if another control element receives the focus. How can I keep the selected entry permanently?

TreeView

answered on 01 Jul 2024

1 answer

168 views

Telerik Animation Container appears on screen then begins animation

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.

AnimationContainer

Grid

Splitter

answered on 27 Jun 2024

0 answers

80 views

Add new record dialog is not closing after add

In my grid I use pop-up edit.

When I update a record the dialog closes, but not on add. Why?

private async Task LoadUsers()
    {
        var users = await UserService.GetUsers();
        Users = new ObservableCollection<User>(users);
    }
    
    private async Task CreateHandler(GridCommandEventArgs obj)
    {
        if (obj.Item is not User user) return;
        
        var newUser = await UserService.Create(user);
        await LoadUsers();
    }

    private async Task UpdateHandler(GridCommandEventArgs args)
    {
        if(args.Item is not User user) return;
        if(user.Id == 0) return;
        
        var success = await UserService.Update(user);
    }

<TelerikGrid
            Data="@Users"
            height="100%"
            @bind-SelectedItems="@SelectedUsers"
            SelectionMode="GridSelectionMode.Single"
            EnableLoaderContainer="true"
            Sortable="true"
            Resizable="true"
            ConfirmDelete="true"
            ShowColumnMenu="true"
            OnUpdate="@UpdateHandler"
            OnCreate="@CreateHandler"
            OnStateInit="@((GridStateEventArgs<User> args) => OnStateInitHandler(args))"
            EditMode="GridEditMode.Popup">
            <GridToolBarTemplate>
                <GridSearchBox DebounceDelay="200" Class="width-60percent"/>
                <GridCommandButton Command="Add" Icon="@SvgIcon.Plus" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Add User</GridCommandButton>
            </GridToolBarTemplate>
            <GridSettings>
                <GridValidationSettings Enabled="true"/>
                <GridPopupEditSettings MinWidth="350px"/>
            </GridSettings>
            <GridColumns>
                <GridColumn Field="@nameof(User.Id)" Width="120px" Editable="false"/>
                <GridColumn Field="@nameof(User.Initials)" Width="135px"/>
                <GridColumn Field="@nameof(User.FirstName)"/>
                <GridColumn Field="@nameof(User.LastName)"/>
                <GridColumn Field="@nameof(User.WorkEmail)" Width="260px"/>
                <GridColumn Field="@nameof(User.ClientName)" Title="Client">
                    <EditorTemplate>
                        @{ var u = (User)context; }
                        <TelerikDropDownList
                            ValueField="@nameof(CboItem.Id)"
                            TextField="@nameof(CboItem.Name)"
                            Filterable="true"
                            FilterOperator="StringFilterOperator.Contains"
                            Title="Select a client"
                            DefaultText="Select a client"
                            @bind-Value="@u.ClientId"
                            Data="@TsClientCbos">
                            <DropDownListSettings>
                                <DropDownListPopupSettings Height="500px" Width="350px"/>
                            </DropDownListSettings>
                        </TelerikDropDownList>
                    </EditorTemplate>
                </GridColumn>
                <GridColumn Field="@nameof(User.Active)" Width="110px" ShowColumnMenu="true"/>
                <GridColumn Field="@nameof(User.IsBiEmployee)" Title="BI Employee" Width="120px" ShowColumnMenu="true"/>
                <GridColumn Field="@nameof(User.SyncToCloud)"  Width="130px" ShowColumnMenu="true" Editable="false"  />
                <GridCommandColumn Width="110px" >
                    <GridCommandButton Command="Save" Icon="@FontIcon.Save" Title="Update" ShowInEdit="true"/>
                    <GridCommandButton Command="Cancel" Icon="@FontIcon.Cancel" ShowInEdit="true"/>
                    <GridCommandButton Command="Edit" Icon="@FontIcon.Pencil" Title="Edit" Enabled="CanEdit"/>
                </GridCommandColumn>
            </GridColumns>
        </TelerikGrid>