Questions on UI for Blazor Forum

0 answers

16 views

How to disable using Enter key for new line in TextArea and call function instead

I have a TextArea that I need to remove the ability from pressing Enter to go to the new line and instead call a function I have created.
I would however like to keep all other functionality such as Shift+Enter going to a new line.

Here is my TextArea:

TextArea

asked on 06 Jun 2025

2 answers

16 views

Upgrading from 7.1 to 9.0 getting odd warning Layout.cshtml/Host.cshtml file not detected?

I have a _Host.cshtml (underscore) not a Host.cshtml.

The information provided is pretty generic "manually update your code after the wizard completes"? Not much of a wizard, what exactly do I need to manually update?

Rob.

General Discussions

answered on 06 Jun 2025

1 answer

14 views

Best Practices for a New Blazor Web App

I am brand new to Telerik. I am beginning a new Blazor application in Visual Studio and would like to know what best practices I should follow regarding the structure of my application. For example:

Should I start with a Telerik project and then add SQL Server and authentication (Identity - Individual Accounts) later? Or is it best to scaffold these first and then add Telerik after they are setup?
If I start with a Microsoft Blazor Web App, are there best practices for replacing the standard Microsoft themes with Telerik themes?
Are there best practices for connecting Telerik to SQL Server data?

Thanks in advance for your help.

General Discussions

answered on 06 Jun 2025

0 answers

22 views

License issues on deployment to server.

We upgraded from 7.1.0 to 9.0.0 which was more difficult than it should be IMHO.

We use TeamCity to do the builds.

We use Octopus to do the deployments.

However, the bigger issue is the new license process. I can understand Telerik's need to protect content/work from "fake malicious developers" (use that word loosely as anyone that steals software isn't really a developer), but your current license process leaves MUCH to be desired.

Adding environment variables to a server? Copying license files to the server? It's pretty rare that a developer will be permitted that sort of access to a server which means a request to the server group (open a ticket) and wait and hope. Anyway, I was able to get this completed but still get the same license issue.

And the file is located in the correct path. And Telerik.Licensing version 1.6.5. Added read access to C:\Telerik for IIS. Nothing, still same problem. What am I missing here?

I've used the article below as reference and we still get the following:

Blazor License Key - Telerik UI for Blazor

I've run out of ways to try to make this work?

Rob.

Licensing

updated question on 05 Jun 2025

1 answer

15 views

Best Practices for Label Layout Customization in Complex Telerik Forms

Hello Telerik Team,

I'm building advanced forms using <TelerikForm> and <FormItem> components. My use case includes complex grid layouts (4+ columns), dynamic label/input structures, and the ability to switch orientations (horizontal ↔ vertical) depending on the layout.

The problem I face is related to label positioning and flexibility. Since labels are tightly bound to inputs inside <FormItem>, it's hard to restructure the layout dynamically or follow modern design principles where labels float, stack, or separate cleanly from inputs.

Additionally, because <FormItem> doesn’t offer properties like LabelCssClass or FieldCssClass, I’m forced to use <Template> for nearly every form element. And in large forms (50+ fields), that creates a huge boilerplate mess.

Here's a code example of how I currently break label/input pairing just to achieve layout control:

<FormItem Field="Number1" ColSpan="2">
	<Template>
		<label for="Number" class="k-label k-form-label">
			@Localizer["Form_JednAdminView_Number"]:
		</label>
	</Template>
</FormItem>
<FormItem Field="Number1" ColSpan="1">
	<Template>
		<TelerikNumericTextBox Id="Number1" Value="@DataContext.FormData.Number1" ValueExpression="@(() => DataContext.FormData.Number1)" ReadOnly="true" />
		<TelerikValidationTooltip For="@(() => DataContext.FormData.Number1)" TargetSelector="#Number1" />
	</Template>
</FormItem>
<FormItem Field="Number2" ColSpan="1">
	<Template>
		<TelerikTextBox Id="Number2" Value="@DataContext.FormData.Number2" ValueExpression="@(() => DataContext.FormData.Number2)" ReadOnly="true" />
		<TelerikValidationTooltip For="@(() => DataContext.FormData.Number2)" TargetSelector="#Number2" />
	</Template>
</FormItem>
@GetEmptyFormItem(4)

Some notes about the limitations:
-I cannot use RenderFragment loops with a shared template to render controls dynamically — because I lose the ability to manage each control’s UI and behavior precisely.
-Using @refs to manage these dynamic elements becomes a nightmare — they don't give me flexible access to the rendered markup/UI, and the logic becomes very hard to maintain.
-So to preserve clean control over layout and per-control behavior, I'm forced to manually write each <FormItem> and control in a verbose way — which feels like overkill.

In aim to have less boilerplate UI and code, but still have an ability to change layout structure in real time - my questions are:
-Can we request a feature to separate labels from inputs, but still associate them logically (e.g., via an Id, or LabelFor property)?
-Is there any plan or recommendation to make <TelerikForm> more flexible — for instance, to allow label placement (above/beside) or wrapping via a simple layout option?
-Are there any workarounds/best practices for advanced layouts with full control over label/input rendering, while preserving strong typing and validation?

But the main aim is to have an opportunity to have Labels aligned by left and have "space between" input and label,
Maybe there is some easy approach with overriding some of your classes like k-input or k-label or k-form-label etc...?
I’d really appreciate your insights.

Thanks for your time and help!
Best regards,
Bohdan (Blazor Developer)

Form

answered on 03 Jun 2025

1 answer

13 views

Predictable stack layout heights

Can you tell me how to get a consistent height for my huge "Create New" button? I expected it to just use the space it needed instead of being 5X the size it is.

.gsi-height-32px{
    height: 32px !important;
}

<TelerikStackLayout Height="100%"
                    Width="100%"
                    Orientation="StackLayoutOrientation.Vertical">

    <TelerikButton OnClick="@OnCreate"
                   Class="gsi-width-100pct gsi-height-32px">
        Create New
    </TelerikButton>

    <TelerikGrid Data=@Patients
                 SelectedItems="SelectedPatients"
                 Pageable=true
                 PageSize="20"
                 Height="100%"
                 SelectionMode=GridSelectionMode.Single
                 SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Person> m) => OnPatientSelected(m))">

        <GridColumns>
            <GridColumn Field=@nameof(Person.FirstName) Title="First Name" />
            <GridColumn Field=@nameof(Person.LastName) Title="Last Name" />
            <GridColumn Field=@($"{nameof(Patient)}.{nameof(Patient.DateOfBirthDisplay)}") Title="Date of Birth" Width="125px" />
            <GridColumn Field=@($"{nameof(Patient)}.{nameof(Patient.GenderDisplay)}") Title="Sex" Width="100px" />
            <GridColumn Field=@nameof(Person.LastSessionTimestampDisplay) Title="Last Session" />
        </GridColumns>
    </TelerikGrid>
</TelerikStackLayout>

Button

Grid

StackLayout

answered on 03 Jun 2025

1 answer

23 views

Using the Telerik Menu to go back to the Home page in Blazor

Hello Everyone,

I'm working on a Blazor Server project, and I've replaced the default navigation menu with a TelerikMenu component. It produces this:

When I click the Counter, Weather, etc, I get to the correct page. Here's how my project is layed out:

You can see that the Home.razor page is in the same location as the Weather and Counter page. I'm also able to get to the pages under the DisplayData folder. Here's the code:

<div>
<img src="picture.png" style="height: 300px; margin-right: 10px;">
</div>

<TelerikMenu Data="@MenuData"
            Orientation=@MenuOrientation.Vertical></TelerikMenu>

@code{
    public List<MenuItem> MenuData { get; set; }

    public class MenuItem
    {
        public string Text { get; set; }
        public string Url { get; set; }
        public ISvgIcon Icon { get; set; }
        public List<MenuItem> Items { get; set; }
    }

    protected override void OnInitialized()
    {
        GenerateMenuData();
    }

    public void GenerateMenuData()
    {
        MenuData = new List<MenuItem>()
        {
            new MenuItem()
            {
                Text = "Home",
                Url = "Home",
                Icon = SvgIcon.Home
            },
            new MenuItem()
            {
                Text = "Counter",
                Url = "Counter",
                Icon = SvgIcon.Calculator
            },
            new MenuItem()
            {
                Text = "Weather",
                Url = "Weather",
                Icon = SvgIcon.Globe
            },            
            new MenuItem()
            {
                Text = "Display Data",
                Url = "",
                Icon = SvgIcon.Data,
                Items = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Text = "Delme Table",
                        Url = "/DelMeTable",
                        Icon = SvgIcon.Data // SvgIcon.User
                    },
                    new MenuItem()
                    {
                        Text = "Delme Telerik",
                        Url = "/DelmeTelerikTable",
                        Icon = SvgIcon.Data
                    },
                    new MenuItem()
                    {
                        Text = "Delme Telerik SQL",
                        Url = "/DelmeTelerikTableSQL",
                        Icon = SvgIcon.Data
                    }
                }
            }
        };//end of MenuData
        
    }//end of GenerateMenuData()

//
}

When I try to get back to the Home page, I get a "Not Found" error. Also of note, when the application launches to the Home page, here is the URL (from the debugger): localhost:7044.

My question is, how do I set the URL for the home page to get back to it?

Thanks,

Mike

Menu

answered on 30 May 2025

1 answer

14 views

TreeList Expand/Collapse

I copied this example and got it working:

https://www.telerik.com/blazor-ui/documentation/knowledge-base/treelist-expand-nodes-programmatically

Can you tell me how to default my TreeList to have everything expanded when my page loads? It seems running the SetTreeListExpandedItems after loading my data does not expand everything automatically... which is confusing to me.

            <TelerikCard>
                <CardBody Class="gsi-padding-0">
                    <TelerikButton OnClick="@SetTreeListExpandedItems"
                                   Class="gsi-width-100pct">
                        Expand/Collapse Groups
                    </TelerikButton>
                </CardBody>
            </TelerikCard>

            <TelerikTreeList @ref=TreeListRef
                             Data="@Groups"
                             SelectedItems="@SelectedGroups"
                             IdField="@nameof(Gsi.Customer.Models.Group.Id)"
                             ParentIdField="@nameof(Gsi.Customer.Models.Group.ParentId)"
                             OnStateInit="((TreeListStateEventArgs<Gsi.Customer.Models.Group> args) => OnStateInitHandler(args))"
                             Pageable="false"
                             Sortable="false"
                             SelectionMode="TreeListSelectionMode.Single"
                             FilterMode="@TreeListFilterMode.FilterMenu"
                             SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">
                <TreeListColumns>
                    <TreeListColumn Field="Name" Title="Group Filter" Expandable="true">
                        <Template>
                            @{
                                var item = context as Gsi.Customer.Models.Group;
                                <img height="32" width="32" src="@item.ImageUrl" />
                                @item.Name
                            }
                        </Template>
                    </TreeListColumn>
                </TreeListColumns>
            </TelerikTreeList>

TreeList

answered on 30 May 2025

0 answers

14 views

Fill area for Grid Layout

How do I fill the 2nd row to the bottom with my data grid? The top row filled as expected in using enough space for the button. However, I expected the bottom row to then use the rest of the area and dock the data grid. Is there a height setting that says fill the rest of the area?

            <TelerikGridLayout Class="grid-layout">
                <GridLayoutRows>
                    <GridLayoutRow />
                    <GridLayoutRow />
                </GridLayoutRows>
                <GridLayoutItems>
                    <GridLayoutItem Row="1">
                        <TelerikButton OnClick="@OnCreate"
                                       Class="gsi-width-100pct gsi-height-32px">
                            Create New
                        </TelerikButton>
                    </GridLayoutItem>
                    <GridLayoutItem Row="2">
                        <TelerikGrid Data=@Patients
                                     SelectedItems="SelectedPatients"
                                     Pageable=true
                                     PageSize="20"
                                     Height="100%"
                                     SelectionMode=GridSelectionMode.Single
                                     SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Person> m) => OnPatientSelected(m))">

                            <GridColumns>
                                <GridColumn Field=@nameof(Person.FirstName) Title="First Name" />
                                <GridColumn Field=@nameof(Person.LastName) Title="Last Name" />
                                <GridColumn Field=@($"{nameof(Patient)}.{nameof(Patient.DateOfBirthDisplay)}") Title="Date of Birth" Width="125px" />
                                <GridColumn Field=@($"{nameof(Patient)}.{nameof(Patient.GenderDisplay)}") Title="Sex" Width="100px" />
                                <GridColumn Field=@nameof(Person.LastSessionTimestampDisplay) Title="Last Session" />
                            </GridColumns>
                        </TelerikGrid>
                    </GridLayoutItem>
                </GridLayoutItems>
            </TelerikGridLayout>

Grid

GridLayout

asked on 30 May 2025

1 answer

12 views

Items overlapping in TelerikScheduler with Timeline View

Hey guys,

I'm trying to setup my TelerikScheduler similar to this:

Blazor Display Only All-Day Appointments in the Scheduler - Telerik UI for Blazor

When I have multiple items for a single day, the items overlap, instead of stacking:

REPL: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.

Which produces the overlapping items ("ABC" and "XYZ"):

If you click "Next day" a couple times you'll see another example ("DEF" and "UVW" overlapping).

Go one more day and it looks fine:

If you click "Week" view at the top (which is also using the TimelineView), you can see an example of one of them overlapping (on the 27th):

Is there any way to work around this issue? I would like to have multiple items listed per day (without time slots showing). Just stacked.

Everything looks how it should in Month view.

Everything looks how it should if they span more than one day generally.

Thanks

-Adam

UPDATE: Forgot to mention - SlotDivisions="1" may have something to do with it. However, if I don't include this, it will have two columns per day which I don't want.

Scheduler

answered on 30 May 2025