Questions on UI for Blazor Forum

1 answer

978 views

[Solved] Render Blazor component and export to pdf. (Blazor Wasm)

Hi,

I'm looking into rendering a TelerikGrid component (including hierarchy) to a pdf using the Telerik Pdf processing library.
I'm a bit lost on what is and is not supported in the pdf-/word processing suite in Blazor (Wasm).

Is there any way to render a Blazor component and export it to pdf?

Grid

answered on 14 Oct 2022

0 answers

605 views

TelerikPdfViewer Not Loading PDF

Hi,

I have upgrade telerik version to 3.6.1 to use TelerikPdfViewer, I just copy paste code you provided. A working toolbar exist but it not rendering pdf to view. What can be reason?

I have update all.css and telerik-blazor.js.

PDFViewer

asked on 13 Oct 2022

1 answer

150 views

Telerik Themes Customisation

Hi,

We build a custom CSS file that includes the SCSS for the components we use as described in https://docs.telerik.com/blazor-ui/styling-and-themes/custom-theme#using-the-build-process-of-the-application

However, I have noticed that there are classes that only exist in the @progress/kendo-theme-default/dist/all.scss file.

One example is .k-overflow-auto which is used by the PDF viewer component without which the component does not display correctly and the paging functionality does not work.

This suggests it is not currently possible to use the customisation method to reduce the size of the delivered CSS as not all the classes will be available. Or have I missed something?

Cheers,

R.

Styling

answered on 13 Oct 2022

1 answer

143 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

154 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

306 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

164 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

930 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

137 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

357 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