or
1 answer
710 views
I'm trying to figure out how/if you can tab through a grid. What I mean by that is my Grid has a header row with a checkbox. If the focus is there and I hit tab, it goes out to the browser controls and I can't focus on a row or the pagination controls using the keyboard. I have row-click enabled so I assume the user should be able to tab to a row and use Enter to simulate a click. Or tab down to the pagination controls and select another page. Here's how it works now after the page first loads, I hit tab and it selects the hamburger (Telerik menu) in the top-right corner (which I can't activate with the keyboard!), next it moves to the checkbox in the grid header and the third tab goes to the browser controls starting with the magnifying glass.
I can't find anything in the documentation that talks about tab order so I'm stuck. Please point me at anything that defines how the tab order is setup for a grid.
Here is my grid code in case it helps.
<TelerikGrid Data="@RequestList"
Pageable="true"
@bind-PageSize="@PageSize"
@bind-Page="@CurrentPage"
Resizable="true"
Sortable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu "
OnRowClick="@OpenRequestDetailAsync"
OnStateChanged="@((GridStateEventArgs<RequestDTO> args) => GridStateChanged(args))"
OnStateInit="@((GridStateEventArgs<RequestDTO> args) => InitGridState(args))">
<GridToolBarTemplate>
<TelerikCheckBox TabIndex="1" Id="chkPeriodFilter" OnChange="GetAllRequets" @bind-Value="FilterForPeriod"></TelerikCheckBox>
<label for="chkPeriodFilter">View all requests</label>
</GridToolBarTemplate>
<GridSettings>
<GridPagerSettings InputType="PagerInputType.Input"
PageSizes="@PageSizes"
ButtonCount="5"
Adaptive="true"
Position="PagerPosition.Bottom">
</GridPagerSettings>
</GridSettings>
<GridColumns>
<GridColumn Field="ChangePeriodId" Width="5%" Visible="false" Title="ChangePeriodId" OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" />
<GridColumn Field="RequestId" Width="5%" Title="ID" OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" />
<GridColumn Field="SubmitDate" Width="9%" title="Requested Date" DisplayFormat="{0:MMM dd yyyy}" Sortable=true OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" />
<GridColumn Field="SubmitUser" Width="15%" title="Requested By" Sortable=true OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" />
<GridColumn Field="CurrentStatus" Width="9%" Title="Status" Sortable=true OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )">
<FilterMenuTemplate>
@foreach(var status in RequestList.DistinctBy(x => x.CurrentStatus).Select(x => x.CurrentStatus))
{
<div>
<TelerikCheckBox Value="@(IsCheckboxInCurrentFilter(context.FilterDescriptor, status.ToString()))"
TValue="bool"
ValueChanged="@((value) => FilterStatus(value, status.ToString(), context))"
Id="@($"status_{status}")">
</TelerikCheckBox>
<label for="@($"status_{status}")">
@if (status == null)
{
<text>Empty</text>
}
else
{
@status
}
</label>
</div>
}
</FilterMenuTemplate>
</GridColumn>
<GridColumn Field="RequestTypeName" Width="5%" Title="Type" Sortable="true" OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" >
<FilterMenuTemplate>
@foreach(var status in RequestList.DistinctBy(x => x.RequestTypeName).Select(x => x.RequestTypeName))
{
<div>
<TelerikCheckBox Value="@(IsCheckboxInCurrentFilter(context.FilterDescriptor, status.ToString()))"
TValue="bool"
ValueChanged="@((value) => FilterType(value, status.ToString(), context))"
Id="@($"status_{status}")">
</TelerikCheckBox>
<label for="@($"status_{status}")">
@if (status == null) // part of handling nulls - show meaningful text for the end user
{
<text>Empty</text>
}
else
{
@status
}
</label>
</div>
}
</FilterMenuTemplate>
</GridColumn>
<GridColumn Field="@(nameof(RequestDTO.Change))" Title="Change Description" OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" >
<Template>
@(new MarkupString((context as RequestDTO).Change))
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>
Georgi
Telerik team
answered
on
24 Nov 2023
1 answer
187 views
Is it possible to add placeholder for the Blazor TelerikEdit?
Or what I should to do for add my placeholder text to TelerikEditor ?
<TelerikEditor @bind-Value="@Description" Placeholder="Add a description please"/>
Or what I should to do for add my placeholder text to TelerikEditor ?
Hristian Stefanov
Telerik team
answered
on
24 Nov 2023
2 answers
476 views
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
2 answers
497 views
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>
1 answer
83 views
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?
Nadezhda Tacheva
Telerik team
answered
on
22 Nov 2023
0 answers
104 views
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> ...
Da
Top achievements
Rank 1
Rank 1
updated question
on
22 Nov 2023
1 answer
201 views
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>
1 answer
4.4K+ views
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
Dimo
Telerik team
updated answer
on
21 Nov 2023
1 answer
510 views
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!!
Hristian Stefanov
Telerik team
answered
on
20 Nov 2023
1 answer
313 views
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>
Georgi
Telerik team
answered
on
20 Nov 2023
