Questions on UI for Blazor Forum

1 answer

276 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

5.0K+ 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

684 views

[Solved] 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

435 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

217 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.1K+ 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

1 answer

637 views

Selected Item Data Binding

Hello,

My use case requires me to be able to set the selected panel bar item programmatically. However, I don't see any data bindings or api methods on the control ref to set the selected panel. Is this possible?

Setting the private member SelectedItem through reflection appears to work. Are there implications to doing this that I should be aware of?

PanelBarRef.GetType().InvokeMember("SelectedItem",
BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.SetProperty | BindingFlags.Instance,
null,
PanelBarRef,
new object[] { SelectedPage });

Thank You,

-Andy

PanelBar

answered on 16 Nov 2023

1 answer

594 views

[Solved] PDF Viewer - Loading time takes too long

Hello,

I'm using PDF Viewer to load a byte[] from my file

file info : 28 pages

size : 3,4MB

It takes almost 20 seconds to load my pdf... theres an option to optimize this?

Code:

@if (arquivopdf != null)
{
<div class="mt-n7">

<TelerikPdfViewer @ref="@PdfViewerRef"
Width="100%"
Height="800px"
Data="arquivopdf">
<PdfViewerToolBar>

<PdfViewerToolBarZoomTool />

<PdfViewerToolBarCustomTool>
<MudIconButton Icon="@Icons.Material.Filled.Download" Size="Size.Small" Color="Color.Dark" OnClick="BaixarArquivo" Style="@ocultarImprimir" />
</PdfViewerToolBarCustomTool>

<PdfViewerToolBarCustomTool>
<MudIconButton Icon="@Icons.Material.Filled.MobileScreenShare" Size="Size.Small" Color="Color.Dark" OnClick="() => AbrirEncaminhar()" Style="@ocultarEncaminhar" />
</PdfViewerToolBarCustomTool>

<PdfViewerToolBarCustomTool>
<MudIconButton Icon="@Icons.Material.Filled.ArrowBack" Disabled="@disableAnterior" Size="Size.Small" Color="Color.Dark" Style="@ocultarBtnAnterior" OnClick="() => CarregarAnterior()" />
</PdfViewerToolBarCustomTool>

<PdfViewerToolBarCustomTool>
<MudIconButton Icon="@Icons.Material.Filled.ArrowForward" Disabled="@disableProximo" Size="Size.Small" Color="Color.Dark" Style="@ocultarBtnProximo" OnClick="() => CarregarProximo()" />
</PdfViewerToolBarCustomTool>

<PdfViewerToolBarCustomTool>
<MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" Color="Color.Dark" OnClick="()=> Cancel()" />
</PdfViewerToolBarCustomTool>

</PdfViewerToolBar>
</TelerikPdfViewer>

</div>
}

protected override async Task OnInitializedAsync()
{
_relatorio = await _RelatorioService.ObterRelatorioPorId(Id);

arquivopdf = _relatorio.Arquivo;
}

PDFViewer

answered on 16 Nov 2023

1 answer

885 views

After upgrade no nav menu icons or blanks!

My app showed no icons after upgrading to 4.6.0. :(

I tried the KB suggestions to fix it. Went from no icons to getting the hamburger back and blank boxes!

See:

In _Host.cshtml I added:

In _Imports.razor I added:

@using Telerik.FontIcons

In codebehind page I have:

public TelerikDrawer<DrawerItem> Drawer { get; set; }
public DrawerItem SelectedItem { get; set; }
public IEnumerable<DrawerItem> Data { get; set; } =
     new List<DrawerItem>
             {
     new DrawerItem
     {
         Title = "Home",
         Text = "Home",
         Icon = "home",
         Url="./"
     },
     new DrawerItem { Separator = true},
     new DrawerItem
     {
         Title = "CostTN Search",
         Text = "CostTN Search",
         Icon = "eye",
         Url="TNSearch"
     },
     new DrawerItem
     {
         Title = "RevIOTN Search",
         Text = "RevIOTN Search",
         Icon = "search",
         Url="RevIOTNSearch"
     },
     new DrawerItem
     {
         Title = "TN Mapping",
         Text = "TN Mapping",
         Icon = "subreport",
         Url="TNMapping"
     },
     new DrawerItem
     {
         Title = "Load Stats",
         Text = "Load Stats",
         Icon = "subreport",
         Url="LoadStats"
     },
     new DrawerItem
     {
         Title = "UnMapped Lines",
         Text = "UnMapped Lines",
         Icon = "subreport",
         Url="UnMappedLines"
     },
     new DrawerItem { Separator = true},
         // new DrawerItem
         //{
         //    Title = "Crtls Demo",
         //    Text = "Crtls Demo",
         //    Icon = "subreport",
         //    Url="ControlsDemo"
         //},
                 };

I am not sure what I am missing.

General Discussions

answered on 15 Nov 2023

1 answer

255 views

Separate Wizard or stepper into separate Blazor components?

I want to separate Wizard or Stepper into separate Blazor components.

Someone that can guide me how to separate the Wizard steps into different components? I struggle to make validation work and the step logic work with parameter or cascading value.

I cannot just follow Wizard Form Integration because I need more steps and my own UI in each step so my file will be too big.

I can only show the wizard right now with sending it from ""parent" to "child" but validation and step logic doesnt work.

Should i looking at Stepper instead of Wizard? or have someone an example?

TelerikWizard @bind-Value="@Value" OnFinish="@OnFinishHandler" >
            <WizardSteps>
                        <PersonalInformationTwo
                            applicationModel="@applicationModel"
                            personalInformationForm="@personalInformationForm"/>

answered on 15 Nov 2023