Questions on UI for Blazor Forum

2 answers

493 views

how to set the telerikgrid height relative to the browser

Hi,

I am using the telerikgrid in my web application.

I want the height of the grid should adjust by itself when user resizes the browser. The user should not get the scroll bar for the browser.

As of now I am using the following:

Size="Telerik.Blazor.ThemeConstants.Grid.Size.Medium" Resizable="true" Pageable="false" Height="50vh" ScrollMode="GridScrollMode.Scrollable"

Using this setting when the user is resizing the browser the scroll bar coming up for browser which we dont want.

Can you please help on this?

Thanks & regards,

Afreen

Grid

answered on 23 Nov 2023

2 answers

538 views

How to automatically load a PDF with 'fitToPage' activated

The subject says it...

       <TelerikPdfViewer @ref="@PdfViewerRef"
            Width="100%"
            Height="100%"
            OnDownload="@OnPdfDownload"
            OnError="@OnPdfError"
            OnOpen="@OnPdfOpen"
            Zoom="@PdfZoom"
            ZoomChanged="@OnPdfZoomChanged"
            EnableLoaderContainer="true"
            Data="@PdfData">

            <PdfViewerToolBar>
                <PdfViewerToolBarCustomTool>
                    <TelerikButton OnClick="@PreviousPage">Vorige pagina</TelerikButton>
                    <TelerikButton OnClick="@NextPage">Volgende pagina</TelerikButton>
                </PdfViewerToolBarCustomTool>
                <PdfViewerToolBarZoomTool />
                <PdfViewerToolBarSelectionTool />
                <PdfViewerToolBarSearchTool />
            </PdfViewerToolBar>


        </TelerikPdfViewer>

PDFViewer

answered on 23 Nov 2023

1 answer

84 views

Locked Multicolumn-Header breaks layout since version 4.6

Hi there,

when using a Grid with a multicolumn header which is locked, the layout breaks on horizontal scolling.

This behavior appears since Telerik UI Version 4.6 and also remains in 5.0.

See REPL sample below (just use horizontal scroll)

https://blazorrepl.telerik.com/wRPvclYX432myApT30

When switching to Version 4.5 the grid acts as expected.

One more interesting thing I observed is, if you resize the column at runtime (for the verions 4.6 and 5.0) the grid also acts as expected.

Feels like there is some refresh or initial rerendering of the component missing.

Any ideas on that?

Grid

answered on 22 Nov 2023

0 answers

115 views

Dropdown in TelerikForm stops the popup from loading. (Page stops responding)

Hello, I have a page where user could click a button to open a modal popup. Then create a name and state association. However, after clicking the button, popup doesn't show up and the page stops responding then I have to close the page. If remove the dropdown from the modal popup, everything works fine. Below is the sample razor code. I appreiate your help.

<TelerikDialog @bind-Visible="@ShowDialog" @ref="@DialogRef" Title="MyTelerikDialogTitle" Width="400px" >
<DialogContent>
<TelerikForm Id="MyTelerikForm"
Model="@MyModel"
OnValidSubmit="@OnOkSubmit"
OnUpdate="@OnFormUpdate"
@ref="@FormRef">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
<FormItems>
<FormItem Field="@nameof(MyDto.Name)" LabelText="Name" /><FormItem Field="@nameof(MyDto.Address)" LabelText="Address" /> <FormItem Field="@nameof(MyDto.Zipcode)" LabelText="Zipcode" />
<FormItem Field="@nameof(MyDto.State)">
<Template>
<label for="StateName">State Name:</label>
<TelerikDropDownList @bind-Value="@MyItem"
DefaultText="Choose a state"
Data="@StateNameDropDown"
Id="StateName">
<DropDownListSettings>
<DropDownListPopupSettings Height="auto" />
</DropDownListSettings>
</TelerikDropDownList>
</Template>
</FormItem> ...

Dialog

DropDownList

Form

updated question on 22 Nov 2023

1 answer

212 views

Is there a way to filter a column based on how the data is rendered by a template?

I am using a Telerik DataGrid in Blazor to display entity data. In this grid, one column's Field represents a one-many data relationship. The Field type is an int, however in this column we use both a <Template> and a <EditorTemplate> to display string values associated with the backing Ints, which serves as an ID for this data. This string data is not stored in this application, but rather retrieved via a webAPI from another application that manages it.

Is it possible to filter the column based on how the data is rendered in the display Template, which is a string? At present, any filtering at all Below is the code for the data grid. The column on which we would like to filter based on the string rendered in the template is bolded:

<TelerikGrid Data="@BranchList"
FilterMode="@GridFilterMode.FilterMenu"
EditMode="GridEditMode.Inline"
OnUpdate="@UpdateHandler"
OnCreate="@CreateHandler"
Resizable="true"
Sortable="true"
SortMode="SortMode.Single">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add New OB Branch</GridCommandButton>
</GridToolBar>

<GridColumns>
<GridCommandColumn Width="100px">
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>

<GridColumn Field="Id" FieldType="@typeof(int)" Editable="false" Visible="false" />
<GridColumn Field="Name" FieldType="@typeof(string)" Editable="true" Title="Branch Name" Width="200px"/>
<GridColumn Field="GroupId" FieldType="@typeof(int)" Editable="true" Visible="true" Title="Group" Sortable="true" Filterable="true" Context="context" Width="100px">
<Template Context="ctx">
@{
var b = ctx as OptimalBlueBranch;
<span>@(Groups.Where(g=>g.Id == b.GroupId).Select(g=>g.Name).FirstOrDefault())</span>
}
</Template>
<EditorTemplate Context="ctx">
@{
var b = ctx as OptimalBlueBranch;
<TelerikComboBox Data="@Groups" TextField="Name" ValueField="Id" @bind-Value="@b.GroupId"
Placeholder="Add a group" ClearButton="true" Filterable="true">
</TelerikComboBox>
}
</EditorTemplate>
</GridColumn>
<GridColumn Field="Active" Title="Active" FieldType="@typeof(bool)" Editable="true" Width="100px">
<Template Context="ctx">
@{
var b = ctx as OptimalBlueBranch;
<input type="checkbox" checked="@b.Active" disabled />
}
</Template>

</GridColumn>
<GridColumn Field="Mappings" Title="Oasys Branch Mappings" Filterable="true" Width="250px">
<Template Context="ctx">
@{
var b = (ctx as OptimalBlueBranch).Mappings;

var mapped = b.Any();
var styleClass = SetBranchBlockStyle(b);

<span class="@styleClass fill-cell">

@if (b != null && b.Count > 0)
{
foreach (var mapping in b)
{

<span>@GetOasysBranchName(mapping), </span>
}
}
else
{
<span>No Oasys branches mapped</span>

}
</span>

}
</Template>

<EditorTemplate Context="ctx">
@{
var b = ctx as OptimalBlueBranch;

<TelerikMultiSelect Data="@OasysBranches" @bind-Value="@b.Mappings"
TextField="Name" ValueField="Code" Placeholder="Add relevant branches" AutoClose="false"> </TelerikMultiSelect>
}

</EditorTemplate>
</GridColumn>
</GridColumns>

</TelerikGrid>

Filter

Grid

answered on 21 Nov 2023

1 answer

4.6K+ views

Published .NET 8 Blazor WASM app throws serialization error Unhandled exception rendering component: ConstructorContainsNullParameterNames

Hello

=====

Telerik EDIT: Please update to version 5.0.1 or scroll down to this post with a summary of the problem.

=====

I'm trying to use latest Telerik Blazor 4.4.0 with dotnet 8.0preview7

Everything is looking ok on Debug sidebut after building and publishing project to IIS I get an error from rendering any gauge chart (I tried Arc and Radial)

Debug:

IIS:

Log from DevTools

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: ConstructorContainsNullParameterNames, System.Collections.Generic.KeyValuePair`2[System.String,System.String]
System.NotSupportedException: ConstructorContainsNullParameterNames, System.Collections.Generic.KeyValuePair`2[System.String,System.String]
at System.Text.Json.ThrowHelper.ThrowNotSupportedException_ConstructorContainsNullParameterNames(Type )
at System.Text.Json.Serialization.Metadata.DefaultJsonTypeInfoResolver.PopulateParameterInfoValues(JsonTypeInfo )
at System.Text.Json.Serialization.Metadata.DefaultJsonTypeInfoResolver.CreateTypeInfoCore(Type , JsonConverter , JsonSerializerOptions )
at System.Text.Json.Serialization.Metadata.DefaultJsonTypeInfoResolver.CreateJsonTypeInfo(Type , JsonSerializerOptions )
at System.Text.Json.Serialization.Metadata.DefaultJsonTypeInfoResolver.GetTypeInfo(Type , JsonSerializerOptions )
at System.Text.Json.JsonSerializerOptions.GetTypeInfoNoCaching(Type )
at System.Text.Json.JsonSerializerOptions.CachingContext.CreateCacheEntry(Type type, CachingContext context)
--- End of stack trace from previous location ---
at System.Text.Json.JsonSerializerOptions.CachingContext.CacheEntry.GetResult()
at System.Text.Json.JsonSerializerOptions.CachingContext.GetOrAddTypeInfo(Type , Boolean )
at System.Text.Json.JsonSerializerOptions.GetTypeInfoInternal(Type , Boolean , Nullable`1 , Boolean , Boolean )
at System.Text.Json.Serialization.Metadata.JsonTypeInfo.Configure()
at System.Text.Json.Serialization.Metadata.JsonTypeInfo.<EnsureConfigured>g__ConfigureSynchronized|170_0()
at System.Text.Json.Serialization.Metadata.JsonTypeInfo.EnsureConfigured()
at System.Text.Json.JsonSerializerOptions.GetTypeInfoInternal(Type , Boolean , Nullable`1 , Boolean , Boolean )
at System.Text.Json.JsonSerializerOptions.GetTypeInfoForRootType(Type , Boolean )
at System.Text.Json.JsonSerializerOptions.TryGetPolymorphicTypeInfoForRootType(Object , JsonTypeInfo& )
at System.Text.Json.Serialization.Metadata.JsonTypeInfo`1[[System.Object, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].Serialize(Utf8JsonWriter , Object& , Object )
at System.Text.Json.JsonSerializer.WriteString[Object](Object& , JsonTypeInfo`1 )
at System.Text.Json.JsonSerializer.Serialize[Object](Object value, JsonSerializerOptions options)
at Telerik.Blazor.Common.Serialization.DefaultJavaScriptSerializer.Serialize(Object value)
at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
at Telerik.Generated.Blazor.Components.DataVizComponent.Serialize(IJavaScriptInitializer serializer)
at Telerik.Generated.Blazor.Components.DataVizComponent.Serialize()
at Telerik.Generated.Blazor.Components.DataVizComponent.InitOrUpdateWidget()
at Telerik.Generated.Blazor.Components.DataVizComponent.OnAfterRender(Boolean firstRender)
at Telerik.Blazor.Components.TelerikRadialGauge.OnAfterRender(Boolean firstRender)
at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleAfterRender.OnAfterRenderAsync()
at Microsoft.AspNetCore.Components.Rendering.ComponentState.NotifyRenderCompletedAsync()

Thanks for reply

updated answer on 21 Nov 2023

1 answer

549 views

Blazor - Change Tab Text Color

Hey there!

I'm not the greatest when it comes to editing the CSS in your components. Can you help me figure out how to change the text color on the Tab Stip? My default color is Red, but I would like to change that to grey so it looks less like a warning or an alert. I pasted an example from your demo site. I'd like to change what is currently blue. Thanks in advance for any assistance!!

TabStrip

answered on 20 Nov 2023

1 answer

338 views

TelerikDropDownList - Set number of rows to show

Hi

Currently the TelerikDropDownList I have only shows 3 rows of returned data before a scroller appears. See attached image. Is there a way of setting the minimum number of rows to be seen before the scroller appears?

I've tried all the usual stuff around MinHeight etc but none of that works

<TelerikDropDownList Data="@Companies"
    @bind-Value="@SelectedCompanyId"
    TextField="@nameof(CompanyDetail.CompanyName)"
    ValueField="@nameof(CompanyDetail.CompanyId)"
    Filterable="true"
    FilterOperator="@FilterOperator"
    FilterDebounceDelay="@DebounceDelay"
    DefaultText="Search Client"                        
    Width="400px">
</TelerikDropDownList>

DropDownList

answered on 20 Nov 2023

1 answer

140 views

How to Programatically set focus to a panel bar?

I'd like to be able to programmatically set the focus to a panel bar component. How can I go about doing this? Alt-W is not what I'm looking for. Ideally, I'd like to be able to do this from an anchor link.

PanelBar

answered on 17 Nov 2023

2 answers

1.0K+ views

Upload large files

Do you have any plans on modifying the component to upload large video files over 1GB in size? From your documentation it looks like the upload component will only handle the max request size of IIS.

Upload

answered on 17 Nov 2023