Questions on UI for Blazor Forum

1 answer

544 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

229 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

189 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

384 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

165 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

184 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

204 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

1 answer

466 views

Why are the Label for a disabled FormItem dimmed?

I want some properties to be read-only. I am okay with the disable style on the textbox, that's standard.
But why dimme the label?

Whats the best way to make the label normal again?

Form

answered on 25 Jan 2023

0 answers

99 views

Gantt tooltips does not disabling

Even if you set the Showtooltip="false" property, the tooltip will still appear with the field value:

Gantt

asked on 24 Jan 2023

2 answers

323 views

Parent grid with multiple detail grids?

Ok I have a need for the grid to do the following;

Parent grid row

Child grid 1 detail rows

Child grid 2 detail rows

Child grid 3 detail rows

Parent grid has 1 set of columns.

And each of the children grids have a different set of columns to each other. Hope that make sense.

From your example doc:

<TelerikGrid Data="salesTeamMembers">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>
 
My understanding is;

This is the parent data,

<TelerikGrid Data="salesTeamMembers">

this would be the first child grid,

<DetailTemplate>
for a 2nd child grid would I just add another one of these tags,
<DetailTemplate> lining it up to the  public List<DetailsModel> Orders { get; set; } in the main model?
something like:
public class MainModel
    {
        public int Id { get; set; }
        public string Name { get;set; }
        public List<Child1DetailsModel> Orders { get; set; }
        public List<Child2DetailsModel> Orders { get; set; }

    }

    public class Child1DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
public class Child2DetailsModel
    {
        public int RecID { get; set; }
        public double ItemValue { get; set; }
    }

Grid

answered on 24 Jan 2023