Questions on UI for Blazor Forum

2 answers

560 views

Hello,

The Hierarchical Grid allows us to expand its rows by clicking on a + icon. (k-plus / k-minus)
How can i change the icon? ( k-i-expand / k-i-collapse)

Regards.

Grid

updated answer on 07 Jun 2023

1 answer

560 views

Add a custom column in Grid with related table field value

Hello,

I have a Telerik grid with data from a List<UserRoleModel> userRoles. This model and table (only) contains the fields UserId, and the RoleId.

I want to show the description of the Role (Field 'Description' of Table 'Roles where Roles.Id = RoleId') and the combined name of the user (Fields 'Firstname + Lastname' from table 'Users where Users.Id = UserId) in two extra custom grid columns next to the UserId and RoleId columns which are in the grid already (see code).

I probably have to use a column template and have been playing with that, but the documentation I could find is not clear and does not provide a clear sample. I could create two extra fields in the UserRoleModel but I can imagine that a more easy way is possible.

Hope that somebody can give me a simple sample / snippet.

regards, Marc Verkade

private List<UserRoleModel>? userRoles = new List<UserRoleModel>();

               <TelerikGrid @ref="TheGrid"
                         Class="grid"
                         Data=@userRoles
                         Navigable="true">
                <GridColumns>
                    <GridColumn Field="@nameof(UserRoleModel.UserId)" Title="User Id" />
                    <GridColumn Field="@nameof(UserRoleModel.RoleId)" Title="Role Id" />
                    <GridColumn Field="<The field Firstname + lastname from table Users>" Title="User name" />
                    <GridColumn Field="<The field Description' from table Roles" Title="Role name">
                </GridColumns>
            </TelerikGrid>

Grid

answered on 06 Jun 2023

1 answer

212 views

How can I close a TelerikContextMenu programatically?

I have a DropDownList where each element has a button to open a TelerikContextMenu as such:

The problem is that sometimes the dropdown is closed and the menu not, like so:

Here is my code:

@namespace Appia.UiKit
@using Telerik.Extensions;
@using Appia.Entidades;
@using static Appia.Tests.Victor.TestWidget;
@inject IViewRepository ViewRepository

<TelerikDropDownList @ref="DropDownRef" TItem="ValueWrapper<string>" TValue="string" Data="ListOfViews" Filterable="true" FilterOperator="@StringFilterOperator.Contains"
                     FillMode="@ThemeConstants.DropDownList.FillMode.Flat" Class="" Width="min-content" ItemHeight="38"
                     Value="@ActiveViewId" ValueChanged="OnChange" OnClose="OnClose" AdaptiveMode="@AdaptiveMode.Auto">
    <ValueTemplate>@context.Text</ValueTemplate>
    <NoDataTemplate>No hay ninguna vista disponible</NoDataTemplate>
    
    <ItemTemplate>
        <div class="k-hbox w-100 k-border-bottom k-border-dark" >
            <div class="k-flex-grow k-align-self-center">@context.Text</div>
            <div @onclick:stopPropagation="true">
                <TelerikButton Icon="@(AppiaIcons.Stack)" OnClick="@HandleContextMenuButton" FillMode="@ThemeConstants.Button.FillMode.Flat"></TelerikButton>
            </div>
        </div>
    </ItemTemplate>
    <FooterTemplate>
        <div class="k-border-t-only" @onclick:stopPropagation="true">
            <TelerikButton Icon="@AppiaIcons.Favourite" Class="w-100 k-text-start" FillMode="@ThemeConstants.Button.FillMode.Flat">Establecer como predeterminada</TelerikButton>
            <TelerikButton Icon="@AppiaIcons.Compose" Class="w-100 k-text-start" FillMode="@ThemeConstants.Button.FillMode.Flat">Editar vista</TelerikButton>
            <TelerikButton Icon="@AppiaIcons.Globe" Class="w-100 k-text-start" FillMode="@ThemeConstants.Button.FillMode.Flat">Renombrar vista</TelerikButton>
            <TelerikButton Icon="@AppiaIcons.Duplicate" Class="w-100 k-text-start" FillMode="@ThemeConstants.Button.FillMode.Flat">Duplicar vista</TelerikButton>
        </div>
    </FooterTemplate>
    <DropDownListSettings>
        <DropDownListPopupSettings Height="430px" Width="min-content" Class="shadow-5" AnimationDuration="0"  />
    </DropDownListSettings>
</TelerikDropDownList>


<TelerikContextMenu @ref="@ViewItemMenuRef" Data="@ActionItems"></TelerikContextMenu>

@code {
    [Parameter] public ViewInstance ViewInstance { get; set; }
    public TelerikContextMenu<ActionItem>? ViewItemMenuRef { get; set; }
    public TelerikDropDownList<ValueWrapper<string>, string> DropDownRef { get; set; }
    public List<ValueWrapper<string>> ListOfViews { get; set; } = new();
    public bool IsCancelled = false;
    public string? ActiveViewId;

    public List<ActionItem> ActionItems { get; set; } = new()
    {
        new () { Text = "Activar", Icon = AppiaIcons.Eye },
        new () { Text = "Establecer como predeterminada", Icon = AppiaIcons.Favourite },
        new () { Text = "Editar", Icon = AppiaIcons.Compose },
        new () { Text = "Renombrar", Icon = AppiaIcons.Information },
        new () { Text = "Eliminar", Icon = AppiaIcons.Delete },
        new () { Text = "Duplicar", Icon = AppiaIcons.Duplicate }
    };

    protected override async Task OnInitializedAsync()
    {
        ActiveViewId = this.ViewInstance.ActiveView.Id;

        this.ListOfViews = await ViewRepository
            .ListAvailableAsync(this.ViewInstance.ActiveView.TipoDeVista, this.ViewInstance.ActiveView.EntityType)
            .ThenSelect(x => new ValueWrapper<string>(x.Id, x.Nombre))
            .Then( x => x.ToList() );

        await base.OnInitializedAsync();
    }

    public async Task OnRead(DropDownListReadEventArgs args) => await ViewRepository.ListAvailableAsync(ViewInstance.ActiveView.TipoDeVista, ViewInstance.ActiveView.EntityType, async db => await db.ToDataSourceReadEvent(args));

    public async Task HandleContextMenuButton( MouseEventArgs args )
    {
        IsCancelled = true;
        await ViewItemMenuRef?.ShowAsync( args.ClientX, args.ClientY );
    }

    public void OnClose( DropDownListCloseEventArgs args )
    {
        args.IsCancelled = IsCancelled;
        IsCancelled = false;
    }

    public void Close()
    {
        IsCancelled = false;
        DropDownRef.Close();
        IsCancelled = true;
    }

    public void OnChange( string args )
    {
        this.ActiveViewId = args;
        Close();
    }

}

Therefore I need a way to close the menu programaticlly that I will fire when the dropdown list is closed.

I would als like to have listeners on the TelerikContextMenu to know when it's closed, this way I could close the dropdown.

How could I do that?

Thanks

ContextMenu

answered on 06 Jun 2023

1 answer

251 views

FormAutoGeneratedItems - custom rendering?

Are there any examples or suggested methods of modifying the way FormAutoGeneratedItems renders? I understand that I can do individual fields with templates - but for the most part we only need a minor tweak (add red * for required fields).

There may be an obvious approach, but I don't yet see it - looking to see if anyone has done anything similar

Form

answered on 06 Jun 2023

1 answer

352 views

Copy a row and insert as new row

Hi,

I'm using the TK UI for Blazor Grid.

This is the table:

First Name	Last Name	Height	Position	Points per game
Stephen	Curry	191	Point Guard	28
Klay	Thompson	201	Shooting Guard	21

I have created an add new item method which allows me to enter all fields manually. Is there a way in TK to copy e.g the first row and paste it to the open form?

Of course, we have around 50 columns in real world and our Users find it exhausting to manually enter all fields.

Thanks for any hint

Grid

answered on 05 Jun 2023

1 answer

246 views

Chart axis labels, auto rotate or auto reduce # of labels

Hi All

In order to keep axis labels readable when a chart is resized, one can change the rotation Angle, or simply reduce the # of labels using the Step property. I do have a nifty routine for this,

But, In order to do this my method would have to know the dimensions (e.g. width/heigth in px) of the targeted chart area.

How can I obtain these dimensions?

Regards,

Hans

Charts

answered on 05 Jun 2023

1 answer

663 views

TileLayoutItem, hide header

Hello all,

In my app I use tile layout to let the user manage a bunch of charts and other things. when in "edit mode" I want the headers of the tiles to be displayed, but in "browse" mode I want the headers of the tiles to be invisible as the title of the tile et all is already in the chart displayed in the tiles content.

Using an empty <HeaderTemplate> I still get an empty one line header for each tile.

Is there a way around this,? Otherwise, please see this as a FR.

Regards,

Hans

TileLayout

answered on 05 Jun 2023

1 answer

562 views

How to set datepicker init value in C# code

I have a datepicker on my page and on load I want to set its initial value to a date I get from a DB table.

I also want the user to be able to pick a date to set it to and it auto updates the page objects base don that new picked date.

I have the auto refresh working on the OnChange event but for some reason I cant set the objects first initial date!

REPL:

<h1>Hello, Telerik REPL for Blazor!</h1>
<TelerikDatePicker                    
    @ref="@DTR11"
    Min="@Min" Max="@Max"
    ValueChanged="@( (DateTime d) => DTR1Filter_OnChangeHandler(d) )">
</TelerikDatePicker>
@code {
     public TelerikDatePicker<DateTime> DTR11 { get; set; }
     private DateTime? DTR11_selectedDate;
     public DateTime Max = new DateTime(2050, 12, 31);
        public DateTime Min = new DateTime(1950, 1, 1);
        
    protected override async Task OnInitializedAsync()
        {
            DTR11_selectedDate = DateTime.Now;
            //want to do something like:
DTR11.value = DTR11_selectedDate; 
        }
    async Task DTR1Filter_OnChangeHandler(DateTime theUserInput)
        {
                DTR11_selectedDate = theUserInput;;
        }
}

DatePicker

answered on 02 Jun 2023

0 answers

137 views

Enforcing only one level of groups for telerik filter

I only want my users to be able to add one level of groups to their filters.

For example:

Color = blue

AND

(

height > 3

OR

height < 1

)

OR

foo = bar

I don't want them to add sub-groups to groups (adding an AND group inside of the height block in the above). Is there a way to prevent that from happening in the control?

Filter

Grid

asked on 02 Jun 2023

1 answer

190 views

How to remove the word "Sum" at footer of Grid when export data into Excel

Hi all,

I want to remove the word "Sum", and only keep the number at the footer of the Excel file when I export data from the grid as pictures below. Is there anyone know? Please help me.

Thank you

Grid

answered on 02 Jun 2023