Questions on UI for Blazor Forum

1 answer

3 views

FilterMenuType.CheckBoxList List of options sorted

User is complaining the distinct list used for filtering is not sorted. Is there a way to have them sorted?

Grid

answered on 23 Jul 2021

1 answer

8 views

Advice on building new UI: Blazor sufficient?

i have been running on the backend of a brand new project for media control, and prepared to start digging right into a ui to talk to my graphql api.

i would used asp.internet "lower back in the day", and had carried out a silverlight gui, but have not accomplished front-stop work in some time.

i am looking to decide how to choose from the cutting-edge country of the sector - blazor, asp.net core, and many others.

i'm a c # dev, so i would favor to do as a great deal of this as i will w / o desiring javascript help.

for a ui that looks incredibly similar to adobe bridge (underneath), could blazor paintings well for me today? i am privy to the component libraries from telerik and others, which in all likelihood could provide me a headstart.

General Discussions

updated answer on 23 Jul 2021

3 answers

18 views

Highlighting a row in a treelist programatically

Hi,

I have a Treelist filled with items + plus another textbox control. The contents of these controls are just different views of the same list of fields. As I move my mouse over the treelist, I'd like a mousemove event to fire so I can highlight the equivalent item in my textbox.

How do I get a mouseover event to call my underlying C# code with the current mouse over row?

Note, I currently have a column template with mousemove event in it. That works, but requires very specific mouse locations. I'd like it to be a full row trigger (just like your current mouseover highlighting). I'd really prefer not to use a row template either as I want all the cool functionality you provide without it (expand/collapse, edit etc). Is this possible?

I'm from a wpf background and love the idea of making web-based apps that can provide rich experiences to my users. I'm really hoping that Blazor grant me this opportunity.

Cheers

TreeList

answered on 22 Jul 2021

1 answer

5 views

Multiple Tlk Rich Text Editors - shared Visible property

Hello!

Consider the code bellow. I have an @ondblclick event on a card that sets a boolean value which in turns controls the visible property of a Telerik RTE inside a foreach loop.

The problem is when I double click on card, all the RTEs become visible. How can I control the dblclick event to set the Visible property of the RTE inside the card I dblclick? Any hint will do.

I dont know if I am making any sense, but I can provide additional details if needed.

@foreach (var chapters in leaseContractDefaultTemplateChapters.OrderBy(s => s.DisplayOrder))
                                        {
                                            <MudContainer Fixed="true">
                                                <MudPaper Height="auto" Width="auto">
                                                    <MudCard @ondblclick="@OnChapterCardDoubleClick">
                                                        <MudCardHeader>
                                                            <CardHeaderContent>
                                                                <MudText Class="d-flex" Typo="Typo.h6">@chapters.Name</MudText>
                                                            </CardHeaderContent>
                                                            <CardHeaderActions>                                                                
                                                                <MudIconButton OnClick="@(async () => await GetComputedTemplateChapter())" Icon="@Icons.Material.Outlined.Functions" />                                                                
                                                                <MudIconButton OnClick="@OnSaveChapterClick" Icon="@Icons.Material.Filled.Save" Color="Color.Success" />
                                                            </CardHeaderActions>
                                                        </MudCardHeader>
                                                        <MudCardContent>
                                                            @if (rteVisible)
                                                            {
                                                                <TelerikEditor @ref="chapterEditor" @bind-Value="@chapters.HtmlString"
                                                                               Tools="@Tools"
                                                                               Height="300px">
                                                                </TelerikEditor>
                                                            }
                                                            else
                                                            {
                                                                @((MarkupString)chapters.HtmlString)
                                                            }
                                                        </MudCardContent>
                                                    </MudCard>
                                                </MudPaper>                     
                                            </MudContainer>
                                        }

General Discussions

Wizard

answered on 22 Jul 2021

2 answers

10 views

Button click error

Hi,

I updated Telerik Blazor to version 2.25.0

The js file is served from _content folder

<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>

When I click any button from application I get the error

telerik-blazor.js:49 Uncaught TypeError: Cannot read property 'getAttribute' of undefined
    at e.value (telerik-blazor.js:49)
    at e.i.close (telerik-blazor.js:49)
    at HTMLDocument.i.onMouseDown (telerik-blazor.js:49)

I had no problems with the old version (2.24.0)

Any idea?

Thanks,

Ion

Button

answered on 22 Jul 2021

1 answer

15 views

TelerikForm: FormItem for bool value does not 'trigger' on change - aka checkbox

Hi all,

We want an easy to set up (and easy to code) form in Blazor, with default CSS styling, and with real two-way data binding.

And this is where we are already struggling.

In our case, we cannot get one checkbox to trigger the visibility of another.

To better understand the issue, we provide a simple and small sample (attached). It has a very simple TelerikForm and a very simple EditForm.

<TelerikForm Model="@_data">
    <FormItems>
        <FormItem LabelText="Condition 1:" Field="@nameof(_data.Value1)"></FormItem>
        @if (_data.Value1)
        {
            <FormItem LabelText="Result 1:" Field="@nameof(_data.Value2)"></FormItem>
        }
    </FormItems>
</TelerikForm>

<br />
<br />

<EditForm Model="@_data">
    <label>Condition 2:</label>
    <InputCheckbox @bind-Value="@_data.Value1" />
    <br />
    @if (_data.Value1)
    {
        <label>Result 2</label>
        <InputCheckbox DisplayName="Result 2:" @bind-Value="@_data.Value2"></InputCheckbox>
    }
</EditForm>

@code {
    private ExampleDto _data { get; set; } = new ExampleDto();
}

To repro the behavior:

If you click 'Condition 2' (inside the EditForm), then it triggers any bound item, also in the TelerikForm.

However, if you click 'Condition 1' in the TelerikForm, nothing will change and nothing gets triggered.

Is there an easy and obvious solution?

Thanks!

Form

updated question on 21 Jul 2021

1 answer

7 views

Custom Wizard Button don't fire the step's OnChange event

I have a wizard where I have defined OnChange events for the steps and I am also creating my own custom buttons.

the event fires when a step is clicked on in the progress bar, but they do not fire when clicking on the buttons in the WizardButtons.

I have created my next and previous button just like in your example for custom buttons.

if (index > 0)
{
   <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => step -= 1)">Previous</TelerikButton>
}
if (index < lastStep)
{
   <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => step += 1)" Primary="true">Next</TelerikButton>
}

How do I make the button clicks fire the OnChange event for the step?

Wizard

answered on 21 Jul 2021

2 answers

30 views

Customizing Column Title Displayed in Popup Editor

Hello,

I have a grid with nested columns. The column's "child header" Title is displayed in the label of its corresponding editor in the popup. However, in my case, the child header titles are not unique without the "parent" header Titles. Can I prepend the "parent header" Title in the labels in the popup?

A screenshot is attached. Note the red and green label pairs are identical in the popup, so the user can't distinguish what the data attributes are.

Thanks again!

Editor

Grid

updated answer on 21 Jul 2021

1 answer

12 views

Error when trying to render the wizard

I have a wizard that is defined like this:

    <TelerikWizard @bind-Value="step" Height="100%" Width="100%">
        <WizardSteps>
            <WizardStep Label="Information" OnChange="OnWizardStepChange">
                <Content>
                </Content>
            </WizardStep>
            @if (showMapping)
            {
                <WizardStep Label="Column Mapping" OnChange="OnWizardStepChange">
                    <Content>
                    </Content>
                </WizardStep>
            }
            @if (showPreview)
            {
                <WizardStep Label="Preview" OnChange="OnWizardStepChange">
                    <Content>
                    </Content>
                </WizardStep>
            }
            <WizardStep Label="Validation" OnChange="OnWizardStepChange">
                <Content>
                </Content>
            </WizardStep>
        </WizardSteps>
        <WizardButtons>
            @{
                var index = context;
                int lastStep = 3;
                if (!showMapping) { lastStep -= 1; }
                if (!showPreview) { lastStep -= 1; }

                if (index > 0)
                {
                    <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => step -= 1)">Previous</TelerikButton>
                }

                if (index < lastStep)
                {
                    <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => step += 1)">Next</TelerikButton>
                }

                if (index == lastStep)
                {
                    <TelerikButton ButtonType="ButtonType.Button" OnClick="@CreateImport">Import</TelerikButton>
                }
            }
        </WizardButtons>
    </TelerikWizard>

When I try to load the page, the Wizard is giving me the following error:

[12:06:18 WRN] Unhandled exception rendering component: Value cannot be null. (Parameter 'format')
System.ArgumentNullException: Value cannot be null. (Parameter 'format')
   at System.String.FormatHelper(IFormatProvider provider, String format, ParamsArray args)
   at System.String.Format(String format, Object arg0, Object arg1)
   at Telerik.Blazor.Components.TelerikWizard.get_PagerMessage()
   at Telerik.Blazor.Components.TelerikWizard.BuildRenderTree(RenderTreeBuilder __builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

I cannot figure out what I am doing wrong?

Wizard

answered on 20 Jul 2021

1 answer

8 views

Null tooltip after tooltip is opened

Hello,

I'm having a weird behaviour using your Tooltip component.

<TelerikTooltip TargetSelector="#clickTarget" ShowOn="@TooltipShowEvent.Click">
    <Template>
        Tooltip content
    </Template>
</TelerikTooltip>

<span id="clickTarget">
    <strong>Click</strong> me to see the tooltip.
</span>

<span id="clickTarget">
    <strong>Click</strong> me to see the tooltip.
</span>

Just two spans and a tooltip which is shown when any of these spans is clicked.

The weird behaviour is that these spans are showing a "default title tooltip" on hovering, showing null in its content, after I have clicked them to show the telerik tooltip I've defined. They still are showing the telerik tooltip on click, but also a "default title tooltip" on hovering, showing null.

Please take a look at the attached gif. As you can see, after, and just after, I have clicked the spans, a new null tooltip is appearing on hover. It is like your component was setting the span title to "null" or something like that.

Any way of removing this behaviour?

Thanks!

Tooltip

answered on 20 Jul 2021