Questions on UI for Blazor Forum

1 answer

300 views

How does one move the text msg & animation higher up the page?

It seems to default to the center of the page.

Example:

I would like that animation and the text message up near the top of the page.

Code:

@* LoaderContainer with transparent panel *@
<TelerikLoaderContainer Class="no-panel"
                        ThemeColor="@ThemeConstants.Loader.ThemeColor.Dark" />
<style>
    .no-panel .k-loader-container-panel {
        background-color: transparent;
        border-width: 0;
    }
</style>
<TelerikGridLayout>  
    <GridLayoutColumns>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>    
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="7%"></GridLayoutColumn>
    </GridLayoutColumns>
    <GridLayoutRows>        
        <GridLayoutRow Height="100px"></GridLayoutRow>        
        <GridLayoutRow Height="100px"></GridLayoutRow>     
        <GridLayoutRow Height="100px"></GridLayoutRow>           
        <GridLayoutRow Height="100px"></GridLayoutRow>        
        <GridLayoutRow Height="100px"></GridLayoutRow>          
        <GridLayoutRow Height="100px"></GridLayoutRow>          
        <GridLayoutRow Height="100px"></GridLayoutRow>           
        <GridLayoutRow Height="100px"></GridLayoutRow>          
        <GridLayoutRow Height="100px"></GridLayoutRow>          
        <GridLayoutRow Height="100px"></GridLayoutRow>         
        <GridLayoutRow Height="400px"></GridLayoutRow>               
    </GridLayoutRows>
</TelerikGridLayout>
Those heights are to simulate my long page :).

LoaderContainer

answered on 01 Feb 2023

1 answer

169 views

ProgressBar color is not rendering when using custom theme

Since 4.0.0 version, the proposed CSS customization is not working with custom Saas Theme Buider again.
Progress color does't rendering.
Please update ThemeBuilder.

ProgressBar

answered on 01 Feb 2023

2 answers

99 views

DropDownList with build in MRU list

My form has a DropDownList with products.

I would like to have the last 10 used products on top. I will store the 10 last used products in localstorage and then sort the list, so the MRU items are on top.

Has anyone implemented something similar?

Can I rearrange the items in the DDL without triggering any events. Also can I add a divider between the MRU items and the rest of the products?

DropDownList

updated answer on 31 Jan 2023

1 answer

582 views

How to change model bind to EditContext and FluentValidator validator

I have a dropdownlist on my form, to select products from.

When I load a new product I get the following error:

Cannot validate instances of type 'ManualCertificateTrade'. This validator can only validate instances of type 'ManualTradeModel'

ManualCertificateTrade is my razor view and ManualTradeModel is the model I load from my API.

This is my code behind class.

publicpartialclassManualCertificateTrade
{
    [Inject] public IManualCertificateTradeService TradeService { get; set; }

    private EditContext EditContext { get; set; }
    private ManualTradeModel ManualTradeModel { get; set; } = new();
    private ManualTradeValidator TradeValidator { get; set; } = new();
    private List<Product> Products { get; set; } = new();
    privateint SelectedProductId { get; set; }

    protected override async Task OnInitializedAsync()
    {
        EditContext = new EditContext(ManualTradeModel);
        Products = await TradeService.GetProducts();
    }

    private async Task ProductChangedEvent(object id)
    {
        if (id isint productId)
        {
            TradeValidator = null;
            SelectedProductId = productId;
            ManualTradeModel = await TradeService.GetNewManualTrade(productId);
            EditContext = new EditContext(ManualTradeModel);
            TradeValidator = new();
        }
    }
}

Form

answered on 31 Jan 2023

1 answer

252 views

TreeView - load Data

Hi, could you advice me please, how can I load data from XML or JSON to TreeView.

Thanks

Peter

TreeView

answered on 28 Jan 2023

1 answer

198 views

CSS Styling of GridSearchBox

I'm looking to change the selected styling of the grid search box.

When currently selected it is set as blue (using the theme I'm using).

I have set up a css class and referenced it from the search box itself. What I don't understand is how to change the selected border styling colour of the search box. This is what I have thus far:

.gridsearchbox {
    height: 24px;
    margin-right: 4px !important;
    font-size: 12px !important;
}

I just want to set the selected border colour to for example red.

Many thanks,

Rob

Grid

answered on 27 Jan 2023

1 answer

423 views

Show hint in a form template

How can I show a hint when using a formtemplate? I am using code code like this validation messages for templated Form items But are missing the Hint for a consistent layout.

Also why not add change events to the FormItem

Form

answered on 27 Jan 2023

1 answer

182 views

SplitButton Causes Errors

We've used the SplitButton on a variety of windows, and after upgrading to v4.0 we've noticed that the pages containing a SplitButton do not load, they simply die off into never-never land. Somewhere we've seen OutofMemory but we are not positive it's happening on this call. We have a few different use cases for our SplitButtons - Save, Save & Close, and Delete. The other is to choose your printing or email type.

Do we have this formatting incorrectly? They work in v3.7 just fine.

And, I noticed the documentation is for v3.7, not v4.0 -- https://demos.telerik.com/blazor-ui/splitbutton/overview

<TelerikSplitButton Icon="@SvgIcon.Save" OnClick="@(() => HandleValidSubmit(false))">
                                        <SplitButtonContent>Save</SplitButtonContent>
                                        <SplitButtonItems>
                                            <SplitButtonItem Class="mr-2 save" OnClick="@( () => HandleValidSubmit(false))" Icon="@SvgIcon.Save">Save</SplitButtonItem>
                                            <SplitButtonItem Class="mr-2 save" OnClick="@( () => HandleValidSubmit(true))" Icon="@SvgIcon.Save">Save & Close</SplitButtonItem>
                                            <SplitButtonItem Class="mr-2 delete" OnClick="@ButtonDeleteOnClick" Icon="@SvgIcon.Trash" Enabled="@IsDeletionAllowed">Delete</SplitButtonItem>
                                        </SplitButtonItems>
                                    </TelerikSplitButton>

                                <TelerikSplitButton Class="print-button" OnClick="@OnPreviewClickHandler" Icon="@SvgIcon.FilePresentation">
                                    <SplitButtonContent>Print To</SplitButtonContent>
                                        <SplitButtonItems>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnPreviewClickHandler" Icon="@SvgIcon.FilePresentation">Preview</SplitButtonItem>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnPdfClickHandler" Icon="@SvgIcon.FilePdf">PDF</SplitButtonItem>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnExcelClickHandler" Icon="@SvgIcon.FileExcel">Excel</SplitButtonItem>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnWordClickHandler" Icon="@SvgIcon.FileWord">Word</SplitButtonItem>                                            
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnClick_BtnEmail" Icon="@SvgIcon.EnvelopLink">Send Email</SplitButtonItem>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnClick_BtnText" Icon="@SvgIcon.Rss">Send Text</SplitButtonItem>
                                        </SplitButtonItems>
                                </TelerikSplitButton>

SplitButton

answered on 26 Jan 2023

1 answer

210 views

A timeline with just the week numbers of the year

I am trying to create a timeline component that is just using week numbers of the current year. I am looking at the Gantt chart but not sure how to customise the view to use just week numbers. There is a similar thing for telerik wpf called RadTimeline which is kind of what I want but for Blazor.

Here is an example.

Charts

Gantt

answered on 26 Jan 2023

1 answer

210 views

Is there a way to keep a pane content (Collapse/Expand)?

If the splitter pane is collapsed, its content is disposed and re-initialized again when the user expands the pane.

Is there a way to keep a pane content?

Splitter

answered on 25 Jan 2023