When I have a grid with Reordable=true and a ComboBox in the HeaderTemplate, I cannot click in the combo box because the reordable functionality prevents it.
---
ADMIN EDIT
This could be exposed through a data- attribute that you could add to your DOM elements so that the grid can know to skip them, for example:
<TelerikGrid Data="@MyData" Height="300px" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterMenu" Reorderable="true">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.ID))" Title="This title will not be rendered">
<HeaderTemplate>
Continent <br />
<div style="text-align:center">Id</div>
<div @onclick:stopPropagation="true" data-draggable="false">
<TelerikComboBox Data="@Continents" Filterable="true" class="headerCombo"
@bind-Value="@SelectedContinentId"
TextField="@nameof(Continent.Name)" ValueField="@nameof(Continent.Id)" Id="MyId">
</TelerikComboBox>
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Field=@nameof(SampleData.Name) Title="First Name" />
</GridColumns>
</TelerikGrid>
@code {
/* Grid */
string result { get; set; }
void DoSomething()
{
result = $"button in header template clicked on {DateTime.Now}, something happened";
}
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime HireDate { get; set; }
}
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
{
ID = x,
Name = "name " + x,
HireDate = DateTime.Now.AddDays(-x)
});
/* ComboBox */
public class Continent
{
public int Id { get; set; }
public string Name { get; set; }
}
IEnumerable<Continent> Continents = new List<Continent>() { new Continent { Id = 1, Name = "Africa" }, new Continent { Id = 2, Name = "Asia" }, new Continent { Id = 3, Name = "South America" } };
public int SelectedContinentId { get; set; } = 1;
}
---