In my data, I have multiple identical values for the TextField of the ComboBox. When the user selects one of them and focuses away from the component the selected value changes to the first instance of the items with the same TextFields, although they have different ValueFields.
Reproduction:
<TelerikComboBox Data="@myDdlData"
TextField="MyTextField"
ValueField="MyValueField"
Value="selectedValue"
ValueChanged="@((int? id) => ValueChangedHandler(id))"
FilterOperator="StringFilterOperator.Contains"
Filterable="true">
</TelerikComboBox>
@code {
private List<MyDdlModel> myDdlData { get; set; }
private void ValueChangedHandler(int? id)
{
selectedValue = id;
}
public class MyDdlModel
{
public int? MyValueField { get; set; }
public string MyTextField { get; set; }
}
int? selectedValue { get; set; }
protected override void OnInitialized()
{
myDdlData = new List<MyDdlModel>()
{
new MyDdlModel()
{
MyValueField = 1,
MyTextField = "John Smith"
},
new MyDdlModel()
{
MyValueField = 2,
MyTextField = "John Smith"
},
new MyDdlModel()
{
MyValueField = 3,
MyTextField = "John Smith"
},
new MyDdlModel()
{
MyValueField = 4,
MyTextField = "Alice Jones"
},
new MyDdlModel()
{
MyValueField = 5,
MyTextField = "Alice Jones"
},
};
}
}
I could have a case where the work week starts on Sunday and ends on Thursday, and I want to be able to denote this in the scheduler.
---
ADMIN EDIT
For the time being, you can consider two options (separately or together):
div.k-scheduler .k-scheduler-nonwork,
div.k-scheduler .k-nonwork-hour {
background-color: inherit;
}
---
With a pageable grid after scrolling down the first page and then paging, the next page should be scrolled to the top - but it is not.
Is there a way to scroll up by code until this is fixed ???
I want to display 2 or 3 panes in a splitter but after hiding the middle pane and showing it again its position is not saved, it appears at the end of the splitter as per the example below.
What is the best way to keep pane order ?
<div style="width: 500px; height: 300px; border: 1px solid red;">
<TelerikSplitter @ref="ts" Width="100%" Height="100%" Orientation="@SplitterOrientation.Horizontal">
<SplitterPanes>
<SplitterPane Size="20%" Collapsible="true">
<div>left</div>
</SplitterPane>
@if (bunique)
{
<SplitterPane Size="10%" Collapsible="true">
<div>middle</div>
</SplitterPane>
}
<SplitterPane>
<div>right</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
</div>
@code{
bool bunique = false;
Telerik.Blazor.Components.TelerikSplitter ts;
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
if (!bunique)
{
bunique = true;
StateHasChanged();
}
}
}
}
When using row virtualization, the visible rows are miscalculated when the browser zoom is used (hold control with mouse scroll).
The result of the miscalculation is that the first row at some point is not visible.
To reproduce the problem you should scroll to the top of the grid and see the first row.
Then start to zoom down and see how the first row is displaced.
Seems like only 50%, 100%, 150%, 200% (multiply of 50%) are calculated correctly in row virtualization
<AdminEdit>
You can reproduce the bug with the attached code.
It's browser-specific and is appearing only in chromium browsers.
It could be related to the way browsers calculate the size of the elements when zooming.
Currently, there is an open bug in the chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1048147&q=component%3AUI%3EBrowser%3EZoom%20height&can=2
</AdminEdit>
I have an ENUM like this:
public enum DeliveryMailOptions
{
Regular,
[Display(Name ="FedEx Priority")]
FedExPriority,
[Display(Name ="FedEx Two-Day")]
FedExTwoDay
}
It is used in a data model like so:
[Display(Name = "Mail Option")]
public DeliveryMailOptions MailOption { get; set; }
When rendered, it ignores the Display attribute and only shows the enum text.
Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.
But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.
My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.
Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.
Currently working on moving from winform to Blazor and found a feature not supported in Telerik atm.
Getting current error when trying to enable Virtualiztion inside a grid
Groupable is not supported with the Virtualization feature of Telerik Grid
Where im already setting grouping on one of the columns
I would like to show a maximum number of notifications.
For instance, if I have a maximum of two notifications and I am currently showing two on screen and a third needs to be shown, the first notification is dismissed and the new notification is shown.
===================
ADMIN EDIT
Once implemented, the Close/Hide method of the Notification can also be used to achieve the described setup.
===================
In Firefox, the popup window is not closed when the ComboBox is disabled from code.
Reproduction code:
Selected value: @selectedValue
<br />
<TelerikComboBox Data="@myComboData"
TextField="MyTextField"
ValueField="MyValueField"
Value="selectedValue"
ValueChanged="@((int value) => ValueChangedHandler(value))"
Placeholder="Select an item..."
ClearButton="true"
Enabled="@isEnabled"
Filterable="true">
</TelerikComboBox>
@code {
public bool isEnabled { get; set; } = true;
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
int selectedValue { get; set; } = 3; //usually the current value should come from the model data
public async Task ValueChangedHandler(int value)
{
isEnabled = false;
await Task.Delay(4000); //simulate network delay
selectedValue = value;
isEnabled = true;
}
//in a real case, the model is usually in a separate file
//the model type and value field type must be provided to the dropdpownlist
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
A context menu event similar to the grid context menu would be useful for editing functions like cut/copy and paste.
---
ADMIN EDIT
You can use the item template to integrate context menus in the scheduler: https://github.com/telerik/blazor-ui/tree/master/scheduler/appointment-context-menu. This also allows you a lot of other customization options like adding tooltips and changing the appearance/information users see at first glance.
For a context menu on the slots - probably this item will expose a template for them so the same approach would apply.
---
Hi,
I'm testing the grid on mobile and I've noticed that the pager can end up being cut off the edge of the screen. The app is designed to not allow scrolling in the HTML window but it does allowing scrolling in the grid (and navbar). This works, but the pager is cutting off. Is there any way it can be made more responsive or made to wrap in a relatively neat way without breaking the control?
See attached image.
Thanks,
Nick
---
ADMIN EDIT
Here is a workaround - using a bit of JS to clear the checked state of the checkbox element when you clear the SelectedItems collection:
@inject IJSRuntime _js
@*You should move this to a proper place for scripts,
suppressing the error like this is just a hack to keep this sample code concise*@
<script suppress-error="BL9992">
function uncheckGrid(parentElem) {
var checkboxes = parentElem.querySelectorAll(".k-checkbox.k-grid-checkbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
}
</script>
<div @ref="@ParentElem">
<TelerikGrid Data=@GridData
SelectionMode="@GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
SelectedItems="@SelectedEmployees"
Pageable="true"
Height="400px">
<GridColumns>
<GridCheckboxColumn />
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
</GridColumns>
</TelerikGrid>
</div>
@if (SelectedEmployees != null)
{
<ul>
@foreach (Employee employee in SelectedEmployees)
{
<li>
@employee.Name
</li>
}
</ul>
}
@code {
ElementReference ParentElem { get; set; }
public List<Employee> GridData { get; set; }
public IEnumerable<Employee> SelectedEmployees { get; set; } = Enumerable.Empty<Employee>();
protected override void OnInitialized()
{
GridData = new List<Employee>();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3
});
}
}
protected void OnSelect(IEnumerable<Employee> employees)
{
bool flag = true;
foreach (Employee item in employees)
{
if(item.EmployeeId % 3 == 0)
{
flag = false;
}
}
if (flag)
{
SelectedEmployees = employees;
}
else
{
SelectedEmployees = Enumerable.Empty<Employee>();
_js.InvokeVoidAsync("uncheckGrid", ParentElem);
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
---
Hello
Could an additional event be exposed on the Slider control? (like OnDrag?)
Have noted that "ValueChanged" is fired every time the value parameter changes (after the user stops dragging the handle), but is it possible to expose the event & value of slider during drag?
This will allow the slider to be used like a search, for example; slide quickly through a large series of photos or data (without letting the mouse button go).
Or is there another way we could achieve this with this control?
Regards
Phil