Questions on UI for Blazor Forum

2 answers

585 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

224 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

166 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

141 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

218 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

783 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

285 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

4 answers

586 views

Allow delayed grid loading with OnRead handler

I have a grid loaded with the OnRead event handler to allow server paging.

Now, in the component OnAfterRender event i read some grid settings with an async request to server and then i update the grid state with Grid.SetState.

This approch work well but cause the grid to load twice: the first one by default OnRead call on component load, and the other one when the call to get settings complete and update the grid state.

There is a way to delay the grid load, to be done only when i have read the grid settings, so only one load occurs?

Thanks

Grid

answered on 13 Jul 2023

1 answer

780 views

Trouble Implementing Two-way Binding with Custom Telerik Numerical Textbox Component in Blazor

I am having difficulty implementing a custom Telerik Numerical Textbox component in a Blazor application, specifically with setting up two-way data binding.

In my Razor page, I'm trying to use the custom component like so:

<CustomNumericalTextBox Id="ID" Format="P" Min="0" Max="1" Step="0.01m" @Bind-Value="@Model.Value1" />

In the code-behind of this page, I have a model class:

public class Model 
{
    public decimal Value1 { get; set; } = "Something"
}

The custom component is defined in a separate Razor page:

@inherits CustomNumericalTextBoxBase

<FormItem>
    <Template>
        <TelerikNumericalTextBox Id="@Id" Format="@Format" Min="@Min" Max="@Max" @bind-Value="@BindValue">
        </TelerikNumericalTextBox>
    </Template>
</FormItem>

And its code-behind is:

public class CustomNumericalTextBox
{
    [Parameter]
    public decimal BindValue { get; set; }

    [Parameter]
    public EventCallback<decimal> BindValueChanged { get; set; }

    [Parameter]
    public string Format { get; set; } = string.Empty;

    [Parameter]
    public string Min { get; set; } = "0";

    [Parameter]
    public string Max { get; set; } = "1";

    [Parameter]
    public string Id { get; set; }
}

Any guidance on how I can achieve two-way data binding with this custom component would be greatly appreciated.

The errors I receive are:

'CustomNumericalTextBox.BuildRederTree(RederTreeBuilder)': No suitable method found to override
'CustomNumericalTextBox.BuildRederTree(RederTreeBuilder)': No suitable method found to override
The attribute names could not be inferred from bind attribute 'bind-BindValue'. Bind attributes should be of the form 'bind' or 'bind-value' along with their corresponding optional parameters like 'bind-value:event', 'bind:format' etc.

NumericTextBox

answered on 13 Jul 2023