Hi all,

We have a Blazor Server app that uses Telerik for Blazor 3.4.0

We noticed that when we have TelerikWindow component where the Modal=true is defined, users can still use the tab button to navigate outside of the pop up. They can even access the actions and dropdowns on the site behind the TelerikWindow. We tested this on Edge, Chrome, and Firefox.

From this documentation it seems that we'd only need to set Modal="true" for a TelerikWindow component to behave similar to a TelerikDialog component: https://docs.telerik.com/blazor-ui/components/window/modal

You can even observe this behavior in the Telerik REPL:

Here is a TelerikDialog component: https://blazorrepl.telerik.com/QcOVYAGb10rFakuj32

Here is a TelerikWindow component with Modal="true": https://blazorrepl.telerik.com/wGOhYUQv27XDlK8506

Thanks

OBJECTIVE:

As I know the <GroupHeaderTemplate> is not directly associated with the data therefore I cannot establish a context for DTOs. I wish you access the data collection and display data dynamically using the <GroupHeaderTemplate>. In this case I want to showcase days of the week along side the date based on the data in my DTOs rather than the default that is given from DateTime.

QUESTION:

How would I go about displaying dynamic data in a <GroupHeaderTemplate> the same way it is done in other Telerik Templates?

Below is the relevant code the produces my question.

When trying to initialize Telerik.Windows.Documents.Flow.FormatProviders.Html.HtmlFormatProvider I'm getting :

Error: System.IO.FileNotFoundException: Could not load file or assembly 'PresentationCore, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'. The system cannot find the file specified.

File name: 'PresentationCore, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'
   at Telerik.Windows.Documents.Flow.FormatProviders.Html.GenericHtmlFonts..ctor()
   at Telerik.Windows.Documents.Flow.FormatProviders.Html.HtmlImportSettings..ctor()
   at Telerik.Windows.Documents.Flow.FormatProviders.Html.HtmlFormatProvider..ctor()

Blazor Server

What am I missing?

Is there a way to initialize a TelerkGrid with html Table containing multiple headers like this: HTML/CSS Share (codepen.io)

I'm trying to export my chart to PDF using the telerikClientExporter.js and I'm getting this error:

Hello,

I have a grid which dynamically calls data for each page(uses OnRead). I can not figure out how I can keep the rows selected accross multiple pages. I see that the rows remain in the "selectedRows" list, but they are not selected in UI when I am changing pages. I have tried a bunch of approaches but nothing works. Is this even possible?

<TelerikGrid @ref="@WOrderGrid"
                            TItem= "@WOrderAssignDto"
                            SelectionMode="GridSelectionMode.Multiple"
                            @bind-SelectedItems="@selectedRows"
                            Resizable="true"
                            Reorderable="true"
                            FilterMode="@GridFilterMode.FilterRow"
                            Pageable="true"
                            PageSize="15"
                            Sortable="true"
                            SortMode="@SortMode.Multiple"
                            OnRead=@ReadItems>

Team,

Currently I am using TelerikWindow (3.4.0) Pop-up window which is centered while opening, i see while dragging it is moving outside browser window attached screen-shot and causing to unable to close the window. Here i don't want to use CloseOnOverlayClick property.

Tried with Left & Top Property along with LeftChanged or TopChanged but if i use Left/Top Window is not being Centered while window is loading.

Attached test snippet code and need your assistance with sample code or inputs to avoid Pop-Window moving out of browser window (top/left/right/browser)

I have buttons in this app that are wider than the default width.  But the entire area of the button does not accept a click.  The button is:

                    <div class="col-xl-2 col-md-3 col-sm-12">
                        <TelerikTooltip TargetSelector="a[title]">
                        </TelerikTooltip>
                        <a title="Unsubmitting a timesheet will return it to your list of current timesheets.">
                            <TelerikButton IconClass="far fa-undo-alt" OnClick="@(e => { IsShowPendingConfirmationWindow = true; })" Class="action-button-center">Unsubmit</TelerikButton>
                        </a>

                    </div>

The class is: 

.action-button-center {
    width: 150px;
    height: 35px;
    margin: 0 auto;
    display: block;
    text-align: center !important;
 /*   border-radius: 4px;*/
}

But only the area indicated in the attached .png is clickable.  Is there a way to set the clickable area to the entire button?

Hi,

I have a combobox control used to complete a country item in a form, but I'm not able to set the control with the existing country field.

My code:

razor:

@inherits Component
<TelerikComboBox TItem="CountryModel"
				 TValue="int"
				 Data="SearchResult"
				 OnRead="SearchDataAsync"
				 Filterable="true"
				 TextField="Name"
				 ValueField="Id"
				 @bind-Value="SelectedId"
				 Width="@Width">
</TelerikComboBox>

razor.cs

using Core.Common.Models;
using Microsoft.AspNetCore.Components;
using Telerik.Blazor.Components;
using Telerik.DataSource;
using WebApp.Client.Services;

namespace WebApp.Client.Components.Views.Common
{
	public partial class CountryAutocomplete
	{
		[Parameter]
		public Action<CountryModel> ValueChanged { get; set; }

		[Parameter]
		public CountryModel Value { get; set; }

		[Parameter]
		public string Width { get; set; } = "100%";

		[Inject]
		public StaticDataService StaticDataService { get; set; }

		private List<CountryModel> SearchResult { get; set; } = new();

		private int _selectedId { get; set; }
		private int SelectedId
		{
			get
			{
				return _selectedId;
			}
			set
			{
				_selectedId = value;
				var selected = SearchResult.Single(x => x.Id == value);
				ValueChanged?.Invoke(selected);
			}
		}

		protected override async Task OnParametersSetAsync()
		{
			Console.WriteLine(SelectedId);
			if (Value != null && Value.Id > 0 && SelectedId == 0)
			{
				SearchResult = new List<CountryModel>
				{
					Value
				};
				SelectedId = Value.Id;
			}
			await base.OnParametersSetAsync();
		}

		private async Task SearchDataAsync(ComboBoxReadEventArgs args)
		{
			if (args.Request.Filters.Count > 0)
			{
				var filter = args.Request.Filters[0] as FilterDescriptor;
				var search = filter.Value.ToString();
				if (search.Length >= 2)
				{
					SearchResult = await StaticDataService.GetCountriesAsync(search);
					args.Data = SearchResult;
				}
			}
		}
	}
}

public class CountryModel : Model
	{
		public int Id { get; set; }

		public string Code { get; set; }

		public string Name { get; set; }

		public EnumCitizenship Citizenship { get; set; }

		public override string ToString()
		{
			return Name;
		}
	}

Value is the country item passed as parameter from a parent component. The control works properly, including ValueChanged callback, except the pre-selecting. 

Hello,

Is there any way to set custom template to calendar's cell.

I'm not writing about css class, but also structure - I want to add additional data to cell (like number work hours in each day).

Thanks.