Questions on UI for Blazor Forum

1 answer

474 views

How can I use local SVG files with Grid or Command buttons in a Blazor WASM application?

I would like to use a third party set of SVG images for buttons. I was hoping I could do something like:

<GridCommandButton Command="View" Icon="@/assets/magnifying_glass.svg" >View</GridCommandButton>

Button

Grid

answered on 26 Jul 2023

1 answer

275 views

How to update a grid cell's contents from the code block in a razor file?

For a specific column, whenever one of its cells are clicked, the value in that clicked cell needs to update to a newly calculated value. Ideally, I'd like to be able to fire off an event containing information about the cell just clicked and use that information to update the cell's displayed value from the code block.

I've tried the column event OnRowClick, but that doesn't allow me to specify which cell was clicked. I've also tried adding an onclick event inside the GridColumn's Template, but this only delivers MouseEventArgs.

Is there anyway to do this without resorting to Javascript?

Grid

answered on 26 Jul 2023

0 answers

321 views

Print with custom headers and footers

Hello,

The PDF Viewer provides a Print method.

Is it possible to print with custom headers and footers?

Kind regards,

PDFViewer

asked on 26 Jul 2023

1 answer

772 views

TelerikGrid.AutoFitAllColumnsAsync without whitespace?

Hi,

I am following the AutoFit Columns Guide that you have on your website. I have opted for the `OnGridRead` functionality as it doesn't require the extra JavaScript. I have noticed that in your approach the grid you have doesn't fill the whitespace on the right until after you click on the `AutoFit All Columns Manually` button and that when`OnAfterRenderAsync` occurs the grid will left align all of the contents.

In my implementation this happens to me all of the time. I have added a button to manually call on the function as you have but it has no effect and leaves everything left aligned.

The summary for the function states that it "Sets the minimum possible widths to all columns, so that there is no text wrappings" which holds up to what I am seeing, however is there other functions that can be applied (that I am unable to find) which will allow the columns to fill all the remain whitespace on the right or perhaps and overloaded version of `AutoFitAllColumnsAsync` that does this automatically?

Grid

answered on 25 Jul 2023

1 answer

295 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

609 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

595 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

237 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>