Questions on UI for Blazor Forum

1 answer

114 views

Is there way to add dropdown into FileManagerUploadSettings?

Is it possible to customize upload dialog in file manager?

Add dropdown and datepicker into upload dialog in filemanager.

FileManager

answered on 13 Oct 2022

1 answer

116 views

Pager fails to render page size in dropdown when total items is equal to current pagesize

I've made a simple blazor repl demo here: https://blazorrepl.telerik.com/mmlYatun39gTFEgO21

As you can see, TotalCount is 10, and the current PageSize is also 10. When these values match, the value in the "items per page" dropdown isn't present. Select any other value, and it will be present (for 5, 20, 40). Come back to 10, and again, the value disappears.

Image examples, with items per page set to 10, then 5:

Pager

answered on 12 Oct 2022

1 answer

257 views

PdfViewer - start download with custom toolbar tool

Hello,

I started using the PdfViewer component and I like it very much, very easy to use.
But I have a small issue, the customer doesn't want a download button with an icon but with the text 'Download'.
So I added a custom toolbar tool with a normal button, like the sample in the docs, but how do I then trigger de download action of the PdfViewer?
I can of course add my own download logic, but in the component it's already there...

Kind regards,

Kees Alderliesten

PDFViewer

answered on 12 Oct 2022

0 answers

101 views

Any idea why my grid's pager looks like this now?

Here is the code for my grid:

    <TelerikGrid Data="@RunningCodes"
             AutoGenerateColumns="false"
             FilterMode="@GridFilterMode.FilterRow"
             Pageable="true"
             PageSize="20">
        <GridColumns>
            <GridColumn Field="@nameof(RunningCode.CodeType)" />
            <GridColumn Field="@nameof(RunningCode.Host)" />
            <GridColumn Field="@nameof(RunningCode.Name)" />
            <GridColumn Field="@nameof(RunningCode.Description)" />
            <GridColumn Field="@nameof(RunningCode.LastRunResults)" />
            <GridColumn Field="@nameof(RunningCode.NextRun)" />
            <GridColumn Field="@nameof(RunningCode.IsBanned)" />
            <GridColumn Field="@nameof(RunningCode.StartupType)" />
            <GridColumn Field="@nameof(RunningCode.Status)" />
        </GridColumns>
    </TelerikGrid>

Any idea why my pager looks like this at the bottom of the grid?

Grid

Pager

asked on 10 Oct 2022

1 answer

814 views

Grid Filter Input Reset on refresh

I am using a async task which reloads the grid every few seconds. After fetching the rows, the whole page is refreshed via InvokeAsync(StateHasChanged).

The issue I have is if the user is trying to set a column filter in the grid, the refresh resets any changes the user has made (but not applied). Is there a way to either not refresh the filter control or be notified when the filter is opened and closed (so the refresh task can not refresh the page)?

Attached short video describing the issue. The updated label at top left shows when page is refreshed. When typing the filter value after refresh, inputting the next digit seems to wipe out previous digits. Changing filter operation also seems to lose the change.

Filter

Grid

answered on 10 Oct 2022

1 answer

97 views

server paging (onread) search leads to linq to EF query transtale error

grid configuration

OnRead="@Service.ReadComponents"
             TItem="@ComponentModel"
             Resizable="true"
             SelectionMode="GridSelectionMode.Single"
             FilterMode="@GridFilterMode.FilterMenu"
             EditMode="@GridEditMode.Inline"
             Height="100%"
             Pageable="true"
             Sortable="true"
             Groupable="false"
             SortMode="@SortMode.Single"
             @bind-Page="@Service.GridPageIndex"
             PageSize="@Service.GridPageSize"
             PageSizeChanged="@Service.PagerPageSizeChanged"
             OnUpdate="@Service.UpdateComponentAsync"
             OnCreate="@Service.CreateComponentAsync"
             @ref="@Grid" >

if use grid filter, the server-side query is completed successfully:

"skip": 0,
	"page": 1,
	"pageSize": 20000,
	"sorts": [],
	"filters": [
		{
			"logicalOperator": 0,
			"filterDescriptors": [
				{
					"member": "VersionName",
					"operator": 8,
					"value": "test"
				}
			]
		}
	],
	"groups": [],
	"aggregates": [],
	"groupPaging": false

if try to use the search:

"skip": 0,
	"page": 1,
	"pageSize": 20000,
	"sorts": [],
	"filters": [
		{
			"logicalOperator": 1,
			"filterDescriptors": [
				{
					"member": "ProductName",
					"operator": 8,
					"value": "test"
				},...
					"member": "LabHourlyRateCurrency.Value",
					"operator": 8,
					"value": "test"
				}
			]
		}
	],
	"groups": [],
	"aggregates": [],
	"groupPaging": false

it leads to

The LINQ expression 'DbSet() .Join( inner: DbSet(), outerKeySelector: s => EF.Property(s, "VersionId"), innerKeySelector: p => EF.Property(p, "Id"), resultSelector: (o, i) => new TransparentIdentifier( Outer = o, Inner = i )) .Join( inner: DbSet(), outerKeySelector: s => EF.Property(s.Inner, "ProductId"), innerKeySelector: p0 => EF.Property(p0, "Id"), resultSelector: (o, i) => new TransparentIdentifier, Product>( Outer = o, Inner = i )) .Join( inner: DbSet(), outerKeySelector: s => EF.Property(s.Outer.Outer, "JurisdictionId"), innerKeySelector: a => EF.Property(a, "Id"), resultSelector: (o, i) => new TransparentIdentifier, Product>, ApprovalJurisdiction>( Outer = o, Inner = i )) .OrderBy(s => s.Outer.Inner.Name) .ThenBy(s => s.Outer.Outer.Inner.Version) .ThenBy(s => s.Inner.Name) .Where(s => s.Outer.Inner.Name.ToLower().Contains("2 card") && s.Outer.Outer.Inner.Version.ToLower().Contains("2 card") && s.Outer.Inner.Name.ToLower().Contains("test1") || s.Outer.Outer.Inner.Version.ToLower().Contains("test1") || s.Inner.Name.ToLower().Contains("test1") || s.Outer.Outer.Outer.FileApprovalNumber.ToLower().Contains("test1") || new ProductSubmissionCostModel{ SubmissionId = s.Outer.Outer.Outer.Id, ProductId = s.Outer.Outer.Inner.ProductId, ProductName = s.Outer.Inner.Name, VersionName = s.Outer.Outer.Inner.Version, Jurisdiction = s.Inner.Name, SubmissionDate = s.Outer.Outer.Outer.DateSubmission, FileApprovalNumber = s.Outer.Outer.Outer.FileApprovalNumber } .InvoiceNumber.ToLower().Contains("test1") || new ProductSubmissionCostModel{ SubmissionId = s.Outer.Outer.Outer.Id, ProductId = s.Outer.Outer.Inner.ProductId, ProductName = s.Outer.Inner.Name, VersionName = s.Outer.Outer.Inner.Version, Jurisdiction = s.Inner.Name, SubmissionDate = s.Outer.Outer.Outer.DateSubmission, FileApprovalNumber = s.Outer.Outer.Outer.FileApprovalNumber } .ChargeType.ToLower().Contains("test1") || new ProductSubmissionCostModel{ SubmissionId = s.Outer.Outer.Outer.Id, ProductId = s.Outer.Outer.Inner.ProductId, ProductName = s.Outer.Inner.Name, VersionName = s.Outer.Outer.Inner.Version, Jurisdiction = s.Inner.Name, SubmissionDate = s.Outer.Outer.Outer.DateSubmission, FileApprovalNumber = s.Outer.Outer.Outer.FileApprovalNumber } .LabHourlyRateCurrency.Value.ToLower().Contains("test1"))' could not be translated. Either rewrite the query in a form that can be translated, or switch to client evaluation explicitly by inserting a call to 'AsEnumerable', 'AsAsyncEnumerable', 'ToList', or 'ToListAsync'. See

server code:

var result = await _mapper.ProjectTo<ComponentModel>(
                _corpDbContext.Component
                    .Include(_ => _.Function))
                .OrderBy(_=>_.ComponentIdentifier)
                .ToDataSourceResultAsync(request.DataSourceRequest);
            return new DataEnvelope<ComponentModel>()
            {
                Data = result.Data.Cast<ComponentModel>().ToList(), 
                Total = result.Total
            };

server Telerik.DataSource version 2.1.1

Grid

answered on 10 Oct 2022

1 answer

293 views

Format y-axis labels using custom method

Hello,

We need to have string labels in our y-axis

Actually we have an int that matches to an Enum and instead of int number we want to print the Enum string representation

Based on the docs we can either use the Format expression or a Template but none of them allow us for example to use the expression

((MyEnum)value).ToString()

How can we do?
Also, is it possible to use Category axis on the ordinate (the y axis) ?

Thanks

Charts

answered on 08 Oct 2022

1 answer

110 views

Timeline view appointments precision

Hi,

is there a way to achive appointment precision like in the asp.net scheduler?

Let's say I add 2 appointments.

Starting at 8:30 and finishing at 9:15, and another one starting at 9:20.

The blazor scheduler result is going to be like this:

The asp.net scheduler result is going to be like this:

Thanks.

Scheduler

answered on 07 Oct 2022

1 answer

276 views

Grid copying data for edit

I have found that when the telerik grid creates a copy of my data for the editor, it doesn't correctly copy every field from the original object. I'm able to work around this by hooking into the state changed event and then using our own methods to copy properties from the original, but I'd like to know why it's not working by default.

I found a related post about a similar problem: https://www.telerik.com/forums/blazor-telerikgrid-editor-template-copy. However when I tried using the code posted there, it worked correctly and all my properties were copied into the cloned new instance.

Has the logic for creating a clone changed since that forum post?

Editor

Grid

answered on 07 Oct 2022

1 answer

172 views

MultiSelect and selection ?

Is there any way to suppress the selection items appearing in the textbox portion of the control?

Example of my issue:

As the more items are selected the text box grows and pushes down. We have some pretty big selections we use sometimes and this makes the UI ugly. Would like it not to do that but still have the items the user selected in the control in the backend.

Code

@* as you type "de", you will only get "Developer" and "Designer" as suggestions instead of the full list *@
<TelerikMultiSelect Data="@Roles" @bind-Value="@TheValues"
                     Filterable="true"
                     Placeholder="Write 'de' to see the filtering" 
                     ClearButton="true"
                     AutoClose="false">
    <MultiSelectSettings>
        <MultiSelectPopupSettings Height="100px" />
    </MultiSelectSettings>
</TelerikMultiSelect>
@*
<ul>
    @foreach (var item in TheValues)
    {
        <li>@item</li>
    }
</ul>
*@
@code{
    List<string> TheValues { get; set; } = new List<string>();
    List<string> Roles { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer",
        "Gandalf", "DeadPool", "Batman", "Driver", "Pilot", "Rebel", "Sith", "Jedi"
    };
}

MultiSelect

answered on 07 Oct 2022