Questions on UI for Blazor Forum

1 answer

262 views

Changing the Collapse/Expand icon on TreeList

This older issue explains how to change the collapse/expand icon on the TelerikTreeList component.

https://www.telerik.com/forums/is-there-a-way-to-change-or-change-or-enlarge-treelist-expand-icon

is this explanation still accurate?

I have implemented this approach but it has no affect.

I am using version 4.3 in a Bl;azor Server app using the FluentIU theme.

Thanks

Jim

TreeList

answered on 24 Jul 2023

1 answer

558 views

Hide form group header

I have a form which has 2 columns in one of the columns in one row I need to have two nested columns, but need to hide the header line since there is no header text. how can I hide the header line?

Form

answered on 24 Jul 2023

2 answers

573 views

Change Form Model inside a TabStrip throws Exception (It renders the model just fine but still An unhandled error has occurred. Reload...

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Value cannot be null. (Parameter 'property')
System.ArgumentNullException: Value cannot be null. (Parameter 'property')
at System.Dynamic.Utils.ContractUtils.RequiresNotNull(Object value, String paramName)
at System.Linq.Expressions.Expression.Property(Expression expression, PropertyInfo property)
at Telerik.Blazor.Extensions.ReflectionExtensions.GetNestedExpression[Object](Object item, String field)
at Telerik.Blazor.Components.FormItem.get_ValueExpression()
at Telerik.Blazor.Components.FormItem.get_FieldIdentifier()
at Telerik.Blazor.Components.FormItem.get_IsValid()
at Telerik.Blazor.Components.FormItem.ValidationStateChanged(Object sender, ValidationStateChangedEventArgs e)
at Microsoft.AspNetCore.Components.Forms.EditContext.NotifyValidationStateChanged()
at Microsoft.AspNetCore.Components.Forms.EditContextDataAnnotationsExtensions.DataAnnotationsEventSubscriptions.Dispose()
at Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator.System.IDisposable.Dispose()
at Microsoft.AspNetCore.Components.Rendering.ComponentState.TryDisposeInBatch(RenderBatchBuilder batchBuilder, Exception& exception)

Form Component

@typeparam T 
@try
{
    <div class="demo-section">
        @if (ValidSubmit)
        {
            <div class="demo-alert demo-alert-success" role="alert">
                The form was submitted successfully.
            </div>
        }
        else if (Fields != null)
        {
            <TelerikForm Model="@Model"
                 OnValidSubmit="@HandleValidSubmit"
                 OnInvalidSubmit="@HandleInvalidSubmit">
                <FormValidation>
                    <DataAnnotationsValidator></DataAnnotationsValidator>
                </FormValidation>
                <FormItems>
                    <FormItemComponent Data="Fields"></FormItemComponent>
                </FormItems>
            </TelerikForm>
        }
    </div>
}
catch (Exception e)
{
    
    throw;
}


@code {
    [Parameter]
    public T Model { get; set; }
    [Parameter]
    public EventCallback<T> ValidSubmitHandler { get; set; }
    private List<PropertyInfo> Fields = new List<PropertyInfo>();
  
    protected override void OnParametersSet()
    {
        if(Model is not null){
            Fields = Model.GetType().GetProperties().ToList();
        }
    }

    public bool ValidSubmit { get; set; } = false;

    async Task HandleValidSubmit()
    {
        Console.WriteLine(Model);
        Console.WriteLine("Saved");
        ValidSubmit = true;
        await ValidSubmitHandler.InvokeAsync(Model);
        ValidSubmit = false;
        StateHasChanged();
    }

    void HandleInvalidSubmit()
    {
        ValidSubmit = false;
    }
}

Tab Strip Component

<TelerikTabStrip ActiveTabIndex="ActiveTab" ActiveTabIndexChanged="@TabChangedHandler">
    @if(Tabs != null)
    {
        @foreach (var item in Tabs.OrderBy(x=> x.Order))
        {
            <TabStripTab Title=@item.Title>
                <FormComponent Model="@item.Model"></FormComponent>
            </TabStripTab>
        }
    }

</TelerikTabStrip>



using Microsoft.AspNetCore.Components;
using DemoApp.Helpers.Models;
using DemoApp.Helpers.Models.ConfigureElements;

namespace DemoApp.Components
{
    public partial class TabStrip
    {
        protected override void OnInitialized()
        {
        }
        protected override void OnParametersSet()
        {
        }

        [Parameter]
        public List<Tab> Tabs { get; set; }
        string result { get; set; }

        int ActiveTab;
        void TabChangedHandler(int newIndex)
        {
            ActiveTab = newIndex;
            result = $"current tab {newIndex} selected on {DateTime.Now}";
        }
    }
}

Form

updated answer on 21 Jul 2023

3 answers

1.6K+ views

How to set the Drawer sidebar, when I scroll it disappears and goes up?

Hello how are you, I have a problem, I guess it's simple, but my css level is low and I don't know how to set the Drawer sidebar, when I scroll it disappears and goes up.

I did this to put a sticky on a div that contains it but it doesn't work, it keeps failing.
I do it this:

<div class="sticky-sidebar">
    <TelerikDrawer ... >
        <!-- El contenido de tu Drawer aquí -->
    </TelerikDrawer>
</div>

and this:

.sticky-sidebar {
    position: sticky;
    top: 0;
    height: 100vh; /* Esto asegura que el contenedor ocupe toda la altura de la vista */
    overflow-y: auto; /* Esto permite que el contenido dentro del contenedor se desplace */
}

The result is this:

This is my MainLaout.razor

@*Encabezado*@
<div class="custom-toolbar top-row" style="display: flex; justify-content: space-between; z-index:200">
    <div class="boton_y_logo" style="white-space:nowrap; ">
        <TelerikButton Class="hamburguer-button" OnClick="@( () => Drawer.ToggleAsync() )"></TelerikButton>
        <img src="/logo.jpg" alt="Logo de xxx" style="width: 150px; height: 40px; margin-left: 0px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); line-height:40px" />
        <span class="item_seleccionado">@SelectedItem?.Text</span>
    </div>   
</div>

<div class="sticky-sidebar">
<TelerikDrawer Data="@Data"
               Class="my-drawer"
               @bind-Expanded="@Expanded"
               MiniMode="false"
               Mode="@DrawerMode.Push"
               @ref="@this.Drawer"
               @bind-SelectedItem="@SelectedItem">
    
    <Template>
        <div class="k-drawer-items" role="menubar" aria-orientation="vertical"></div>
    </Template>
    <DrawerContent>
        <div class="main">
            <div class="content px-4">
                @Body
            </div>
        </div>
    </DrawerContent>
</TelerikDrawer>
</div>
@code {
    
}

and this is my site.css

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px2pxrgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem1.25rem0.7rem1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui.dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a064770%);
}

.top-row {
    background-color: rgb(37, 40, 55) !important;
    box-shadow: 02px4pxrgba(0, 0, 0, 0.4);
    /*border-bottom: 0px solid #d6d5d5;*/justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    /*left: 0;*/
}

    .top-row ::deep a, .top-row .btn-link {
        white-space: nowrap;
        /*margin-left: 1.5rem;*/
    }

    .top-rowa:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        /*margin-right: 10px*/
    }
/* Estilos para modo celular */@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-rowa, .top-row.btn-link {
        margin-left: 0;
    }


}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div {
        padding-left: 2rem!important;
        padding-right: 1.5rem!important;
    }
}
/*extra cc*/.k-icon {
    font-size: 20px;
}

.custom-toolbar {
    width: 100%;
    line-height: 10px;
    border-bottom: inset;
    border-bottom-width: 1px;
    padding: 3px8px;
    color: #a1a1a1;
    background-color: #252837!important;
    height: 50px;
    box-shadow: 02px4pxrgba(0, 0, 0, 0.4);
    align-content: center;
    align-items: center;
    text-decoration: none;
    position: sticky;
    top: 0;
}

.item_seleccionado {
    margin-left: 20px;
    font-weight: bold;
    font-size: 17px;
    width: 100%;
}
/*Dimensiones de controles*/.margenlados5px {
    margin: 5px;
}

.Altura_total {
    height: 100%;
}

/*íconos de header*/.hamburguer-button {
    width: 2rem;
    height: 2rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.75;
    mask-image: url("../icons/icons8-menu-24.png");
    -webkit-mask-image: url("../icons/icons8-menu-24.png");
    margin-right: 5px;
    color: white;
}

.tb-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.tb-icon-settings {
    mask-image: url("../icons/setting.png");
    -webkit-mask-image: url("../icons/setting.png");
    color: aliceblue;
}

.tb-icon-maximizar {
    mask-image: url("../icons/maximizar.png");
    -webkit-mask-image: url("../icons/maximizar.png");
    color: aliceblue;
}

.tb-icon-info_grid {
    mask-image: url("../icons/informacion.png");
    -webkit-mask-image: url("../icons/informacion.png");
    opacity: 1;
    color: black;
}



.tb-icon-logo {
    mask-image: url("../icons/maximizar.png");
    -webkit-mask-image: url("../icons/maximizar.png");
    color: aliceblue;
}

.tb-icon-refresh {
    mask-image: url("../icons/refresh.png");
    -webkit-mask-image: url("../icons/refresh.png");
    color: aliceblue;
}


/*fullscreen f11*/
*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
    overflow: auto !important;
}

.drawer-container {
    width: 100%;
    height: 100%;
}

.borde_cero {
    margin: 0;
    padding: 0;
}


.texto_drawer {
    font-size: 10px;
}

.k-d-level {
    display: flex;
}

.texto_body {
    font-size: 14px;
}

.item-descr-wrap > span {
    font-size: 70%;
}

.item-descr-wrap {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
/*copiado de host*/.k-drawer-content {
    overflow-x: auto;
}


.drawer-hamburger {
    position: absolute;
    z-index: 2;
    margin-top: 13px;
    margin-left: 30px;
}

.k-drawer-item:hover, .k-drawer-item.k-state-hover, .text-info {
    color: #281f3eb3!important;
    background-color: #ff6358;
}



/*colores defs fondo symbol texto de drawer*/.my-drawer.k-drawer {
    background-color: #252837;
    color: white;
    z-index: 0;
    height:100%;

}

.my-drawer.k-drawer-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    
}
    .my-drawer.k-drawer-item:hover {
        background-color: #414762;
        color: antiquewhite !important;
    }
/*cuadros en ítem principales*/.k-drawer-item-main {
    box-sizing: border-box;
    padding: 2px;
    /*border: 1px solid #000;*/background-color: #1e3548;
}
.sticky-sidebar {
    position: sticky;
    top: 0;
    height: 100vh; /* Esto asegura que el contenedor ocupe toda la altura de la vista */
    overflow-y: auto; /* Esto permite que el contenido dentro del contenedor se desplace */
}

Please, how to set the Drawer sidebar, when I scroll it disappears and goes up?

thanks.

Drawer

answered on 20 Jul 2023

1 answer

208 views

Conditional Formatting in Forms based on Enum property

Hello. I'm building a TelerikForm, and I need to show a TextField if 'Other' is selected.

The conditional rendering seems to work perfectly when the 'parent' item is a TelerikMultiSelect, but does not work with the auto-generated Enum field.

I have verified that the field in question is indeed being set to CompanyType.Other, yet the "Other Legal Entity Type" field is not showing.

What am I missing?

 <FormGroup LabelText="Legal Information" Columns="2" ColumnSpacing="15px">
            <FormItem Field="@nameof(formInfo.LegalEntity)"></FormItem>
            @if (formInfo.LegalEntity == CompanyType.Other) // this does not work
            {
                <FormItem LabelText="Other Legal Entity Type" Field="@nameof(formInfo.OtherLegalEntityType)"></FormItem>
            }
        </FormGroup>
        <FormGroup LabelText="Operations" Columns="2" ColumnSpacing="15px">
            <FormItem Field="@nameof(formInfo.ProductDelivery)">
                <Template>
                    <TelerikMultiSelect Data="formInfo.productDeliveryOptions" @bind-Value="formInfo.ProductDelivery" />
                </Template>
            </FormItem>
            @if (formInfo.ProductDelivery.Contains("Other")) // this works as expected
            {
                <FormItem LabelText="Other Product Delivery Type" Field="@nameof(formInfo.OtherProductDeliveryType)"></FormItem>
            }
        </FormGroup>

DropDownList

Form

MultiSelect

answered on 20 Jul 2023

1 answer

160 views

Errors in Safari browser

Hello!
In Safari any pages doesn't works, even telerik demo pages
See attachment

General Discussions

answered on 19 Jul 2023

1 answer

137 views

Notification overlaps Textbox

Even if the TelerikNotification Component is not visible it kind of blocks the Textbox for getting focused. I made a screenshot to demonstrate that with the BrowserTools. I only can focus the Textbox if I am clicking in the area marked with the red box.

Is there a solution for it ?

Notification

answered on 18 Jul 2023

1 answer

211 views

how refresh TelerikGrid from another blaz9r component?

Hello everybody. I have a componentA.razor and it contains a TelerikGrid, and I have another componentB.razor from the latter I want to be able to force update the TelerikGrid of componentA.razor. Could someone help me with an example please.

Grid

answered on 17 Jul 2023

1 answer

738 views

Error on DatePicker component for Blazor

Getting error when clicking on calendar icon in TelerikDatePicker in a Blazor Web Server app:

Error: System.NullReferenceException: Object reference not set to an instance of an object.
at Telerik.Blazor.Components.TelerikDatePicker`1.get_AriaActiveDescendant()
at Telerik.Blazor.Components.TelerikDatePicker`1.<BuildRenderTree>b__154_1(RenderTreeBuilder __builder2)
at Microsoft.AspNetCore.Components.CascadingValue`1.Render(RenderTreeBuilder builder)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Doesn't happen to all DatePickers, only on certain ones.

Also, this only happens when the app is published to IIS on Windows Server 2019. This does not happen when running in development in Visual Studio 2022 Professional.

Using Telerik UI for Blazor v3.5

DatePicker

answered on 14 Jul 2023

1 answer

270 views

Item Count Feature in Telerik Blazor Grid Gone?

I just recently upgraded to Telerik 4.3 and after working through the breaking changes, I found that the item count in the bottom right corner of the grid has been removed. How can I reenable this feature for my grid? I have attached a screenshot to reference the feature I am referring to...

Grid

Styling

answered on 13 Jul 2023