We have a Blazor DatePicker in our web app to store the Date of Birth. The calendar popup seems to be working correctly. However, for the input portion, when typing in the year of the date, the content typed into the year overflows the input area for as long as the user types, instead of horizontally scrolling within the 4-digit year space.
The interesting thing is that this is only happening to one of our client users. We have been unable to duplicate this either locally or in our Dev/Test environments. I'm assuming that, since the horizontal scrolling of the year entry is within the DatePicker widget, could this possibly be due to an environment issue with the Blazor library or maybe some setting within Microsoft Edge?
I don't have as many details as I would like to have to share with you. At this time, I'm just trying to find out if you have ever heard of this issue before?
<TelerikComboBox @bind-Value="@SessionOptionIndex1"
Data="@SessionOption1Items"
ShowClearButton="false"
TextField="Name" ValueField="Id" />
The user doesn't have to select anything in my drop down. So, if they select something and change their mind and want to clear it... how do I do it?
<TelerikDropDownList @bind-Value="@SessionOptionIndex1"
Data="@SessionOption1Items"
TextField="Name" ValueField="Id" />
There is a known issue where the previously selected row will stay selected. That's not what I'm seeing. My issue is seemingly random but consistent. Clicking certain rows will always apply "K-selected" to the same extra rows, and selecting any one of the highlighted rows will also highlight the same set of rows. There doesn't seem to be any connection in the data between the rows, and the "selected items" object is correctly holding the proper selected item and no others. Has anyone else seen anything similar? Thank you!
It would be difficult to provide you with working code, but the attached video shows my issue.
<TelerikCard>
<CardHeader Class="gsi-border-width-0 gsi-border-color-white">
<TelerikStackLayout Orientation="StackLayoutOrientation.Horizontal">
<h5>Filter</h5>
<TelerikButton Id="filterChevronButton" FillMode="Clear" Class="gsi-border-width-0 gsi-border-color-white"
Icon="@( FilterVisible? Telerik.SvgIcons.SvgIcon.ChevronUp : Telerik.SvgIcons.SvgIcon.ChevronDown)" />
</TelerikStackLayout>
</CardHeader>
<CardBody>
<TelerikStackLayout Spacing="5px">
<TelerikCard Width="33vh">
<CardBody>
A
</CardBody>
</TelerikCard>
<TelerikCard Width="33vh">
<CardBody>
B
</CardBody>
</TelerikCard>
<TelerikCard Width="34vh">
<CardBody>
C
</CardBody>
</TelerikCard>
</TelerikStackLayout>
</CardBody>
</TelerikCard>
<TelerikDrawer MiniMode="false">
<DrawerContent>
<DrawerItem>
<TelerikCard Width="33vh">
<CardBody>
A
</CardBody>
</TelerikCard>
</DrawerItem>
<DrawerItem>
<TelerikCard Width="33vh">
<CardBody>
A
</CardBody>
</TelerikCard>
</DrawerItem>
<DrawerItem>
<TelerikCard Width="33vh">
<CardBody>
A
</CardBody>
</TelerikCard>
</DrawerItem>
</DrawerContent>
</TelerikDrawer>
I'm trying to programmatically set the Text color of TelerikTextBox. Problem I'm running into is that the Class being defined for the TelerikTextBox is based on CSS from TailwindCSS. I was hoping I could just add color: as a parameter but that would only work if using a "Style" not "Class" and TelerikTextBox doesn't support Style.
<style>
.safeText {
color: black;
}
.warningText {
color: red;
}
</style>
<TelerikTextBox Id="emptyReleaseOn" Class="form-display sm:text-sm sm:leading-5 text-center @(_expireColor)" Size="12" Value="@_currentBookingMTYRelease" ReadOnly="true" Width="6rem"></TelerikTextBox>
Note: the above @(_expireColor) is not valid syntax to be used in Class attribute ... so not really sure how to go about this?
Code server-side:
private string _expireColor { get; set; } = "safeText";
if (DateTime.TryParse(_currentBookingExpiresOn, out var expireDateValue))
{
if (DateTime.Now > expireDateValue)
{
_expireColor = "warningText";
}
}
I found Telerik sample code here, but that's not what I'm trying to accomplish (need to retain the TailwindCSS).
Is there an easy way to accomplish this?
Rob.
With validation enabled for the blazor grid, once all the validation errors are resolved, the OnUpdate event should get fired but it is not. I checked in incell edit mode and it does gets fired but my requirement is to use the inline edit mode. Below is the code that I am using:
<TelerikGrid Data="@gridData"
Pageable="true"
Sortable="true"
Width="2500px"
PageSize="50"
FilterMode="GridFilterMode.FilterMenu"
EditMode="GridEditMode.Inline"
OnEdit = "@OnGridEdit"
OnCancel="@OnGridCancel"
OnUpdate="@OnGridUpdateHandler"
>
<GridSettings>
<GridValidationSettings Enabled="true" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(Dto.CNumber)" Title="Customer No." Width="100px" Filterable="true" Sortable="false" />
<GridColumn Field="@nameof(Dto.DistributorLastName)" Title="Distributor Last Name" Width="200px" Filterable="true" />
<GridColumn Field="@nameof(Dto.DistributorNumber)" Title="Distributor No." Width="120px" Filterable="false" Sortable="false" />
<GridColumn Field="@nameof(Dto.DemoDate)" Title="Demo Date" Width="120px" Filterable="true" />
<GridColumn Field="@nameof(Dto.SerialNumber)" Title="RX Serial No." Width="120px" Filterable="false" Sortable="false" />
<GridCommandColumn Width="100px">
<GridCommandButton Command="Edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
<GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
I'm using a TelerikTreeList to display a hierarchical data source. This data source has 5+- levels. The first time the TreeList loads, all the items are expanded as we want. When the user changes their search criteria of the data and I reload the data, the TreeList items are collapsed. We would like them to be expanded.
I've tried the TreeListRef.SetStateAsync(expandedState) example, but it only shows the items expanded to the second node. I've verified I have a new object reference to the data source and I've tried an observable collection. I've used the TreeListRef.Rebind() method.
I'm using Telerik.UI.for.Blazor 8.1.1.
Thanks!
below is the code I'm using:
this is my TreeList
<TelerikTreeList @ref="@TreeListRef"
Data="@TreeData"
ItemsField="@(nameof(Leaf.Children))"
HasChildrenField="@(nameof(Leaf.HasChildren))"
Width="900px">
<TreeListColumns>
<TreeListColumn Expandable="true" Field="Text" Title="Text" />
<TreeListColumn Field="Code" Title="Code" Width="100px" />
<TreeListColumn Field="Description" Title="Description" Width="250px" />
</TreeListColumns>
</TelerikTreeList>
this is my method that loads the data. It is used for the first time as well as all subsequent searches.
protected async Task SearchOrg()
{
this is my item class
public class Leaf
{
public List<Leaf> Children { get; set; }
public Leaf? Parent { get; private set; }
//public int Id { get; set; }
//public int? ParentId => Parent?.Id;
public string? Text { get; set; }
public string? Code { get; set; }
public string? Description { get; set; }
public int Depth { get; private set; }
public bool HasChildren => Children.Any();
public Leaf(Leaf? parent)
{
this.Parent = parent;
this.Children = new List<Leaf>();
if (parent == null)
this.Depth = 0;
else
this.Depth = parent.Depth+1;
}
}
I have a TelerikToolbar like this:
TelerikToolBar OverflowMode="ToolBarOverflowMode.None"
And it normally displays all items correctly. I wanted to change the enabled state etc. of the toolbar depending on which element is selected in a sibling component (a treelist). When I select items randomly, the toolbar suddenly starts hiding some buttons with "display.none" on the element css style, without me adding it.
I assume this is a bug.