Questions on UI for Blazor Forum

1 answer

418 views

All my controls have been resized with the new release!

I just updated Telerik and found that all the controls (TelerikTextBox, TelerikDropDownList) have been resized, mainly the height. I can't tell exactly what Telerik changed. I'm using Bootstrap, so I'd like to use those sizes, but Telerik seems to override Bootstrap. Is there a new way to make the controls the same size and the smallest possible?

This is generally what I need to work, otherwise I'll have to go back to using InputText

DropDownList

TextBox

answered on 22 Nov 2021

1 answer

1.5K+ views

Reduce the Row height by reducing the free space at the top and bottom of the row, without changing the font size?

I use Grid together with Grid ToolBar with default settings. But my users complain that the row height is noticeably higher than the height of the Grid ToolBar. Excessive line height reduces the amount of useful information on the page and this is bad. There is a lot of extra free space in the Grid row at the top and bottom. Changing the rowhight parameter does not give the desired result. Is there an easy way to reduce the Row height by removing excess free space at the top and bottom of the row, without changing the font size?

Grid

updated answer on 22 Nov 2021

1 answer

412 views

Notification click event with custom data

I'm utilizing the notification and trying to implement a click event similar to this example:

https://docs.telerik.com/blazor-ui/components/notification/templates#get-a-click-event-for-notification-body

My problem is that I need to get a custom field to my click event (i.e. the ID of a database record) that will be different for each notification. Is there anyway to pass custom data to the notification other than what is in the NotificationModel?

Notification

answered on 18 Nov 2021

1 answer

298 views

Is it possible for the animation container to collapse without destroying contents

I'm wondering if it is possible for Animation container to be collapsed and reopened without having to worry about storing the state of the data?

AnimationContainer

answered on 18 Nov 2021

1 answer

2.3K+ views

Menu for BLAZOR - How to change the color of the menu items?

I have the following code. Currently it renders menus in Orange color by default. How to customize the item color to WHITE and make it BOLD?

<div style="width: 100%; margin: 0 auto; background-color:gray;">
    <TelerikMenu Data="@MenuItems" Class="centered-menu"
        UrlField="@nameof(MenuItem.Page)"
        ItemsField="@nameof(MenuItem.SubSectionList)"
        TextField="@nameof(MenuItem.Section)">
    </TelerikMenu>
</div>

My CSS:

.k-menu.centered-menu,
::deep .k-menu.centered-menu {
    justify-content: center;
}

It renders:

Menu

answered on 18 Nov 2021

0 answers

152 views

Whats the right approach for CSS layout with Material theme ?

Hi

I am writing a complex front end application using the Telerik Blazor web controls with Material theme.

Layout with the inbuilt Telerik components wont work for us - we need a fully featured CSS layout library (which is what our designers use)

Which CSS layout lib do you recommend with Material theme ?

Would bootstrap with a material theme and Telerik components with material layout work together ?

Thanks,

Matt

General Discussions

asked on 18 Nov 2021

1 answer

1.3K+ views

Resetting A TelerikForm in Blazor back to Pristine State

I have a need to reset the form and it's validation back to a pristine state (blank form with validation) either when the form is complete and successful response is returned or by user initiated click event.

I don't see anywhere in the documentation to do so.

I have set it equal to a new instance of the FormModel, and that indeed clears the form, BUT it does not reset the form validation or any of those behaviors.

How can I reinitialize the form the same way that the form initializes on route activation?

Form

ValidationMessage

ValidationSummary

answered on 16 Nov 2021

1 answer

258 views

TelerikDatePicker value less then 1/1/1900 gives error in console.

Hi there,
I have created the blazor app with Telerik.

For the <TelerikDatePicker> i am using DateTime with nullable value. and this works fine.
if we select the date from the datepicker then it is working as expected.
When we try to enter the date manualy by keyboard. then it is giving the error if date is less then 1/1/1900.
Not sure what i need to do.

Can you help with this

DatePicker

answered on 15 Nov 2021

2 answers

149 views

GridColumn has filterable css-class even though it is not filterable

Hi!

My grid data is ExpandoObjects. The grid has ShowColumnMenu set to true, FilterMode set to GridFilterMode.FilterMenu and FilterMenuType set to FilterMenuType.CheckBoxList.

I am defining a bunch of GridColumn by looping a list. When defining these i set the Filterable parameter to false. But the th element still has the k-filterable css class, which add the extra padding to the right.

How do I get rid of the extra padding in my headers?

Here's a peek of my code:

<TelerikGrid @ref="Grid"
             Data="Data"
             Pageable="true"
             Sortable="true"
             Resizable="true"
             Reorderable="true"
             ShowColumnMenu="true"
             Groupable="true"
             SortMode="@SortMode.Multiple"
             FilterMode="GridFilterMode.FilterMenu"
             FilterMenuType="FilterMenuType.CheckBoxList"
             ScrollMode="GridScrollMode.Scrollable"
             OnRowContextMenu="OnRowContextMenuClick"
             OnRowDoubleClick="HandleOnRowDoubleClick"
             Width="100%"
             RowHeight="40"
             PageSize="100">
    <GridColumns>
        @*
        
        Other GridColumns

        *@

        @if (Data?.Count() > 0)
        {
            foreach (var property in ((IDictionary<string, object>)Data.FirstOrDefault()).Where(p => AllDomainIdentifiers.Contains(p.Key)))
            {
                var domainModel = (DomainModel)property.Value;
                <GridColumn Field="@($"{domainModel.Name}Field")"
                            FieldType="typeof(bool)"
                            Width="30px"
                            Filterable="false"
                            Groupable="false"
                            Sortable="false"
                            ShowColumnMenu="false"
                            Title="@domainModel.Abbreviation">
                    <HeaderTemplate>
                        <span id="@( $"domainHeader-{domainModel.Id.ToString()}" )" alt="@domainModel.Name">@domainModel.Abbreviation</span>
                        <TelerikTooltip TargetSelector="@( $"#domainHeader-{domainModel.Id.ToString()}" )"
                                        ShowOn="@TooltipShowEvent.Hover"
                                        Position="@TooltipPosition.Top" />
                    </HeaderTemplate>
                    <Template>
                        <div class="d-flex justify-content-center align-items-center">
                            <TelerikCheckBox Value="@HasDomainActivated(context as ExpandoObject, domainModel)"
                                             ValueChanged="@((bool value) => HandleDomainActivationChanged(context as ExpandoObject, domainModel, value))"
                                             Enabled="@(IsAuthorizedForAllDomains() || IsAuthorizedForDomain(domainModel))" />
                        </div>
                    </Template>
                </GridColumn>
            }
        }
    </GridColumns>

</TelerikGrid>

Grid

answered on 12 Nov 2021

1 answer

247 views

Saving and loading state of sub-grids?

We have successfully implemented saving the state of our custom component main grid with browser local storage, using this example.

We have sub-grids in the main grid via the DetailTemplate section, for example:

<TelerikGrid Data="@Data"
             @ref="@GridReference">
    <DetailTemplate>
        @{
            var ctx = context as ExpandoObject;
            <CustomSubgrid Context="@ctx" Property="Expanded" @ref="@SubGrid"></CustomSubgrid >
        }
    </DetailTemplate>

Each page using the custom main grid has a unique state storage key - e.g.:

StateStorageKey="ThisPage_MainDynamicGrid"

Is it possible to do a similar saving and loading of the sub-grids states, if they are dynamically loaded via the DetailTemplate?

Grid

answered on 11 Nov 2021