Questions on UI for Blazor Forum

1 answer

125 views

Grid's virtual scrolling doesn't work past 559,240 rows

I've created a sample REPL to demonstrate the issue:

https://blazorrepl.telerik.com/mHaSmsvW31IZ0rar47

In Grid.OnRead event handler, if you set args.Total to an amount > 559240, then the Grid will only scroll to 559240. In my example, I used 1,000,000 for my virtual data source size.

Grid

answered on 28 Apr 2023

1 answer

339 views

Grid export filename issue

When I export the gird I try to set the name of the file to be exported.

As such:

<GridExport>
<GridExcelExport FileName="@msExportFileName" AllPages="@Revenue_ExportAllPages" OnBeforeExport="@Revenue_OnBeforeExcelExport" />
</GridExport>

string msExportFileName = "Rpt_";

public void Revenue_OnBeforeExcelExport(GridBeforeExcelExportEventArgs args)
{

msExportFileName = "Rpt_ProductsCarriers_" + "Revenue";

)

When it goes into the Revenue_OnBeforeExcelExport the file name works out to be: "Rpt_" only.

If I then click export again the file name = "Rpt_ProductsCarriers_Revenue"

How can I get the name the first time around to work?

Note! the "ProductsCarriers" is hardcode above but actually comes from a DDL object the user has already chosen before it gets to this point.

It can be different values depending on what the user chooses.

Even hardcoded , the first time in ignores that above code. msExportFileName = "Rpt_ProductsCarriers_" + "Revenue";

Stepping thru it the code above seems to be working, but then the file name is "Rpt_" on first attempt.

Strange.

Thanks

Deasun.

Grid

answered on 28 Apr 2023

1 answer

401 views

Unsafe content security policy

We are currently updating our security, and need to tighten content security policy, blocking the use of script-src 'unsafe-eval' & style-src 'unsafe-inline'. We noticed that Telerik UI for Blazor will not work correctly when these policies are applied, as specified in the docs https://docs.telerik.com/blazor-ui/troubleshooting/csp.

It is mentioned that "Some of the above-listed limitations will be addressed in a future version of Telerik UI for Blazor." Is there a more specific timeline as to when this issue will be solved?

Security

answered on 28 Apr 2023

1 answer

366 views

How does one add a checkbox to the menu?

I've been weighing using the toolbar vs. the menu. I like that the menu allows for easy hierarchies, but the toolbar seems to be the way to go for including other elements like the checkbox. Any thoughts?

Menu

ToolBar

answered on 28 Apr 2023

1 answer

364 views

ContextMenu sub menu height

Hi,

I've got a pretty simple Context menu:

<TelerikContextMenu @ref="@TheContextMenu" Data="@MenuItems" OnClick="@( (ContextMenuItem itm) => ClickHandler(itm) )" DisabledField="Disabled" />

It contains one item that is a submenu of project names:

var mnuProjects = Projects.Select(x => new ContextMenuItem() { Text = x.Name, CommandName = "Project", Id = x.ID }).ToList();

MenuItems = new List<ContextMenuItem>()
{
	... other items
	
	new ContextMenuItem
	{
		Text = "Projects",
		HasChildren = true,
		Items = mnuProjects
	},

	... other items
};

The number of projects has now grown too long to display without going off the bottom of the page.

Is there a quick way to set the height of the list that appears?

ContextMenu

answered on 28 Apr 2023

1 answer

306 views

form validation > template > does not show inline message

<TelerikForm Model="@Service.DataModel"
             Width="1000px"
             Columns="1"
             ColumnSpacing="20px"
             ValidationMessageType="FormValidationMessageType.Inline"
             OnValidSubmit="@OnSubmitClick">
    <FormValidation>
        <FluentValidationValidator Validator="@FormValidator" DisableAssemblyScanning="@true"></FluentValidationValidator>
    </FormValidation>
    <FormItems>
        <FormGroup Columns="3" ColumnSpacing="10px">
            <FormItem Class="k-form-input-field" LabelText="Source File:" Field="@nameof(Service.DataModel.OriginalFileName)" Enabled="false"/>
            <FormItem Class="k-form-input-field" LabelText="Document Name:" Field="@nameof(Service.DataModel.Name)" Enabled="@Service.IsAddMode"/>
            <FormItem Class="k-form-input-field w290" LabelText="Version:" Field="@nameof(Service.DataModel.Version)" Enabled="false">
                <Template>
                    <label for="type" class="k-label k-form-label">Version:</label>
                    <label>@(Service.DataModel.Version.HasValue ? DateTime.FromBinary(Service.DataModel.Version.Value).ToString("G") : "")</label>
                </Template>
            </FormItem>
        </FormGroup>
        <FormGroup Columns="3" ColumnSpacing="10px">
            <FormItem Field="@nameof(Service.DataModel.Type)" Enabled="@Service.IsAddMode">
                <Template>
                    <label for="type" class="k-label k-form-label">Type:</label>
                    <TelerikDropDownList id="type" Data="@Service.Types" @bind-Value="@Service.DataModel.Type.Key"
                                         OnChange="@Service.TypeChanged"
                                         ValueField="@nameof(GlossaryItem<string, string>.Key)"
                                         TextField="@nameof(GlossaryItem<string, string>.Value)"
                                         DefaultText="Select..." Width="290px" />
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Service.DataModel.Status)">
                <Template>
                    <label for="status" class="k-label k-form-label">Status:</label>
                    <TelerikDropDownList id="status" Data="@Service.Statuses" @bind-Value="@Service.DataModel.Status.Key"
                                         ValueField="@nameof(GlossaryItem<string, string>.Key)"
                                         TextField="@nameof(GlossaryItem<string, string>.Value)"
                                         DefaultText="Select..." Width="290px" Enabled="@(!string.IsNullOrEmpty(Service.DataModel.Type.Key))"/>
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Service.DataModel.IsActive)">
                <Template>
                    <label for="IsActive" class="k-label k-form-label">Active:</label>
                    <TelerikCheckBox id="IsActive" @bind-Value="@Service.DataModel.IsActive"></TelerikCheckBox>
                </Template>
            </FormItem>
        </FormGroup>
        <FormGroup Columns="1" ColumnSpacing="10px">
            <FormItem Field="@nameof(Service.DataModel.Agencies)">
                <Template>
                    <label for="jurisdiction" class="k-label k-form-label">Agency / Authority:</label>
                    <TelerikMultiSelect id="jurisdiction" Data="@Service.Agencies" 
                                        @bind-Value="@Service.SelectedAgencies"
                                        TextField="Value" ValueField="Key"
                                        ScrollMode="@DropDownScrollMode.Virtual"
                                        PageSize="10"
                                        ItemHeight="35"
                                        Filterable="true"
                                        TValue="int" TItem="GlossaryItem<int, string>"/>
                    <TelerikValidationMessage For="@(() => Service.Agencies)" />
                </Template>
            </FormItem>

public class DocumentEditFormValidator : AbstractValidator<DocumentModel>
    {
        public DocumentEditFormValidator()
        {
            RuleFor(x => x.Name)
                .NotEmpty()
                .WithMessage("Document name can't be empty");
            RuleFor(x => x.Type.Key)
                .NotEmpty()
                .WithMessage("Type must be set");
            RuleFor(x => x.Status.Key)
                .NotEmpty()
                .WithMessage("Status must be set");
            RuleFor(x => x.Agencies)
                .NotEmpty()
                .When(_=>  _.Type.Key != "DD")
                .WithMessage("Agency / Authority can't be empty");
        }
    }

Form

answered on 28 Apr 2023

1 answer

285 views

Grid edit fails when EditMode='Incell' and item type is DynamicObject...

My grid defined like this:

<TelerikGrid TItem="TableItemRowWrapper" EditMode="GridEditMode.Incell"

The type TableItemRowWrapper defined like this:

public class TableItemRowWrapper : DynamicObject, IDictionary<string, object>

When clicking on a cell - and it should go to edit mode - I have this error:

Value cannot be null. (Parameter 'property')

System.Private.CoreLib
at System.ArgumentNullException.Throw(String paramName)
at System.Linq.Expressions.Expression.Property(Expression expression, PropertyInfo property)
at Telerik.Blazor.Extensions.ReflectionExtensions.GetNestedExpression[TItem](Object item, String field)
at Telerik.Blazor.Components.Common.Grid.Cells.TableEditCell`5.get_FieldExpression()
at Telerik.Blazor.Components.Grid.GridEditCell`1.BuildRenderTree(RenderTreeBuilder __builder)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Inside GetNestedExpression I can see this:

Expression.Property(
  expression,
  expression.Type.GetPropertyInfo(namePart)
);

All this tells me that GetPropertyInfo returns null, but I cannot figure out on what namePart and why...

Grid

answered on 26 Apr 2023

1 answer

959 views

Using a Dropdown List in Grid's Popup for editing

I'm using Telerik Blazor's Grid to show a table. Currently this table contains a column that uses an id that references to a string in another table. Currently the Grid is able to show the string using the following:

<GridColumn Field=@nameof(EEOTrainingVM.TrainingType) Title="Testing">
                <EditorTemplate>
                    @{
                        if (context as EEOTrainingVM is not null)
                        {
                            Training = context as EEOTrainingVM;
                            <TelerikDropDownList Data="@Trainings"
                                             @bind-Value="@Training.TrainingType"
                                         TextField="@nameof(LUTRAINING.desc)"
                                         ValueField="@nameof(LUTRAINING.code)"
                                                          
                                         Width="100%">
                            </TelerikDropDownList>
                        }
                    }
                </EditorTemplate>
                <Template>
                    @{
                            int trainName = (context as EEOTrainingVM).TrainingType;
                            <text>@GetTrainingValue(trainName)</text>
                    }
                </Template>
            </GridColumn>

I'm running into an issue where when clicking on the Edit button in a row, to show the Edit popup, an exception is thrown -

stem.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Extensions.ObjectExtensions.IsEqualTo[T](Object object1, T object2)
   at Telerik.Blazor.Components.TelerikDropDownList`2.<MapSelectedItem>b__138_0(ListDataItem item)
   at System.Linq.Enumerable.TryGetFirst[TSource](IEnumerable`1 source, Func`2 predicate, Boolean& found)
   at System.Linq.Enumerable.FirstOrDefault[TSource](IEnumerable`1 source, Func`2 predicate)
   at Telerik.Blazor.Components.TelerikDropDownList`2.MapSelectedItem()
   at Telerik.Blazor.Components.TelerikDropDownList`2.OnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Telerik.Blazor.Components.Common.TelerikSelectBase`2.SetParametersAsync(ParameterView parameters)
l

and I'm not sure why. The GetTrainingValue helper method is as follows:

public string GetTrainingValue(int trainingID)
{
LUTRAINING match = TrainingType.FirstOrDefault(t => t.LUTRAINING.code == trainingID);
return match != null ? match.LUTRAINING.desc : "Unknown";
}

DropDownList

Grid

answered on 26 Apr 2023

1 answer

238 views

Trouble displaying datetime in GridColumn

Hi, I'm trying to display the local datetime using this code but it just shows up empty.

 <GridColumn  Field="@(nameof(Dto.DateTimeOffset.LocalDateTime))" Title="Date" />

If I remove .LocalDateTime it works but then it shows the incorrect local time.

Grid

answered on 25 Apr 2023

1 answer

282 views

Blazor DataGrid - show selected row count

Hi,

we would like to change the grid in blazor so it shows the number of selected rows in the bottom right corner, where it now shows "21 - 30 of 91 items". We would like to change it to something like "21 - 30 of 91 items / selected: 5 items".

Is there a way to achieve this? The paging part on the bottom left should stay as it is.

Grid

answered on 25 Apr 2023