Questions on UI for Blazor Forum

2 answers

558 views

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 12 Jan 2022

1 answer

143 views

Scheduler, missing ResourceId in SchedulerEditEventArgs

Hello,

I'm trying to implement my own dialog for creating appointments in a grouped scheduler. I use the OnEdit event for this. The event is called and the start and end are correctly specified in SchedulerEditEventArgs. Unfortunately I miss any reference to the resource of the clicked line.

Regards

Helmut

Scheduler

answered on 11 Jan 2022

1 answer

330 views

Windows overlay color

Hello,

Is there a way to change the color or opacity of the k-overlay class, without overwriting the class?

I have a scenario where I would like the color to be transparent, but keep it black in other scenarios.

Regards,
Nikolas

Window

answered on 10 Jan 2022

1 answer

135 views

Telerik Editor to allow track changes when user changed the default value

Hi,

Is there any ways where we could implement a track changes feature?

I do have a default word content available for the user, and the user will be able to change the content if required.

The track change feature would allow reviewers to quickly zoom into the edited wording (i.e. highlighted in red) for them to review quickly.

Is there any ways whereby I could implement this feature easily?

Thank you!

Editor

answered on 10 Jan 2022

1 answer

156 views

Disable lower level checkboxes?

Hello,

I want to enable the checkboxes for the top level of the treeview but disable or not show the checkboxes below that. So for your example at:

https://docs.telerik.com/blazor-ui/components/treeview/checkboxes/overview

I want to show (or enable) the checkboxes for Project and Implementation but not for Design, Site, index.js, index.html, or styles.css.

Thank you,

TreeView

answered on 10 Jan 2022

1 answer

409 views

I want to add the x Close icon in the Confirmation modal

Hello there,

I am using the Telerik confirmation dialog to delete the user functionality, during the delete the user open confirmation pop-up I want to add the x Close icon top of the Confirmation modal.

here is my code for confirmation modal

var isDelete = await Dialogs.ConfirmAsync("Are you sure you would like to delete this User?", "Confirmation!");

please check the attached image for reference

I want to customize this Dialog as the attached image.

Dialog

answered on 10 Jan 2022

1 answer

141 views

Export All Pages as a button instead of a checkbox?

I would like two buttons that Export Page and Export All Pages, instead of the checkbox in the example. I tried setting the ExportAllPages in the OnClick, but as expected, the export runs before that OnClick. Maybe I'm missing an easier way to set that on a button?

<GridToolBar>
    <GridCommandButton Command="CsvExport" Icon="file-csv" OnClick="(() => SetExportAllPages())">Export All Pages</GridCommandButton>
    <GridCommandButton Command="CsvExport" Icon="file-csv" OnClick="(() => SetExportOnePage())">Export Page</GridCommandButton>

....

<GridExport>
    <GridCsvExport FileName="export" AllPages="@ExportAllPages" />
</GridExport>

Grid

answered on 08 Jan 2022

1 answer

486 views

Z-index inconsistency when ContextMenu is invoked manually vs via Selector

I've got a ContextMenu that is invoked by clicking a button ... it is not invoked via the Selector property of the ContextMenu.

<div 
    class="d-flex k-align-items-center justify-content-center icon-button"
    title="Download"
    id="download-menu"
    @oncontextmenu:preventDefault="true"
    @onclick="((MouseEventArgs e) => ShowDownloadMenu(e))">
    <i class="fad fa-file-download"></i>
    Download
</div>
<TelerikContextMenu
    @ref="@DownloadMenu"
    Data="@DownloadMenuItems"
    OnClick="@((MenuItem item) => DownloadMenuHandler(item))">
</TelerikContextMenu>

Here's where the menu is invoked:

private async Task ShowDownloadMenu(MouseEventArgs e)
{
    if (e.Button == 0)
    {
        await DownloadMenu.ShowAsync(e.ClientX, 45);
    }
}

When the context menu is invoked via code, the z-index value comes from .k-animation-container and is set to 100. As you can see, the menu is not given an explicit z-index value:

<div 
    class="k-animation-container telerik-blazor k-widget k-animation-container-shown" 
    data-id="94f3d3b5-3db1-4940-ab74-c03895eeeaa2" 
    id="94f3d3b5-3db1-4940-ab74-c03895eeeaa2" 
    style="width: auto; left: 554px; top: 45px;"

This is fine in most cases except when the ContextMenu is within a Window component, in that case the menu is displayed behind the window.

If the same context menu is invoked by way of the Selector property on the ContextMenu and a right-click, it is given an explicit z-index value (in this case 10003), such that it will display in front of the Window component:

<div 
    class="k-animation-container telerik-blazor k-widget k-animation-container-shown" 
    data-id="e0cd095f-32f8-40a5-af0b-0e0ddc2a0f71" 
    id="e0cd095f-32f8-40a5-af0b-0e0ddc2a0f71" 
    style="width: auto; z-index: 10003; top: 81px; left: 556px;">

I've tried to override the z-index by adding a Class to the ContextMenu but the class gets added to an inner <div>, not the topmost <div> so the z-index is useless.

I've tested a brute force solution by overriding z-index on the .k-animation-container class and it seems to work but it feels like overkill.

ContextMenu

answered on 08 Jan 2022

1 answer

99 views

Selecting first item in DropDownList for grid add/insert

We have a grid with editor templates for a few types that are tied to a dropdownlist that is tied to a datasource. When user clicks new/add they get an empty form (we are using popup) but we would like the drowdowns to be preselected with the first values in the datasource. How do we do this? Is there some SelectedIndex property or similar available?

We are currently doing something like this but it does not seem to nice even though it works.

Also, what is the best way to differentiate between add and update in the EditorTemplate, ie how do we know what is what?

                <EditorTemplate>
                    @{
                        EditingCorporateCustomer = context as CorporateCustomerDto;

                        if (EditingCorporateCustomer.CompanyTypeId == 0)
                        {
                            EditingCorporateCustomer.CompanyTypeId = CompanyTypes[0].Id;

                        }


                        <TelerikDropDownList Data="@CompanyTypes" @bind-Value="@EditingCorporateCustomer.CompanyTypeId"
                                             Width="95%"
                                             TextField="Name"
                                             ValueField="Id">
                        </TelerikDropDownList>
                    }
                </EditorTemplate>

DropDownList

Grid

answered on 08 Jan 2022

1 answer

296 views

Is it possible to use asp.net core controls in Blazor project?

Hi,

Would it be feasible to bring in the Telerik asp.net core package to a blazor project and use that as well?

I know using the controls will obviously be different, but there are more available there so was wondering if I could do that to widen the possibilities?

Is there any documentation on how to best go abut doing this if so?

General Discussions

answered on 07 Jan 2022