Telerik Forums
UI for Blazor Forum
1 answer
15 views

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.

Dimo
Telerik team
 answered on 15 May 2025
1 answer
35 views
I'm trying to replicate the Expander that you have in your AspNetCore.  I'm attempting to do it with a TelerikCard then the Drawer.  Whatever help you can give would be appreciated.

What I'm trying to replicate:


So, I got close using the card.  Starting with the Header, I need to align the Telerik button to the right.  Then, when I push the button, I need it to toggle the CardBody open/closed.
            <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>

Drawer, which looks interesting, but didn't have any success.
            <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>

Dimo
Telerik team
 updated answer on 15 May 2025
1 answer
33 views

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.

 

Will
Top achievements
Rank 2
Iron
 answered on 14 May 2025
1 answer
25 views

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>

Dimo
Telerik team
 answered on 14 May 2025
1 answer
26 views

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()
    {

        var data = await _service.GetData(this.SelectedMemberId, this.TextBoxValue);
        TreeData = new List<Leaf>(data);

        // var expandedState = new TreeListState<Leaf>()
        // {
        //         ExpandedItems = new List<Leaf>(data)
        // };

        // await TreeListRef.SetStateAsync(expandedState);

        // TreeListRef.Rebind();
    }

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;
        }
    }

Dimo
Telerik team
 answered on 14 May 2025
0 answers
14 views

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.

Fabian
Top achievements
Rank 1
Iron
 asked on 13 May 2025
1 answer
33 views

Hello Telerik team

I need to write a bUnit test on a component that has a TelerikGrid inside. I want to test what happens after I edit and change the value of a cell. My grid is setup to be in InCell edit mode. I have managed to trigger the creation of the editor by doing the following in my bUnit function

cut.Find("td[data-col-index=\"3\"]").Click(); 
variable cut is bUnit's IRenderFragment

The above command will trigger the OnEdit EventCallback of the TelerikGrid component. What I am not able to do is to end the inCell edit, trigger the TelerikGrid's OnUpdate EventCallback and at the same time refresh of the component (remove the editor etc).

I have tried clicking another cell like cut.Find("td[data-col-index=\"4\"]").Click(), I also tried triggering a blur or focusout event with no success.

My final try was to programmatically call a function that would end the current edit following this article. With this I managed to trigger calling the OnUpdate method of the TelerikGrid, but after finishing execution, the bUnit's Markup result still remained as it was, with the editor enabled and visible.

In my OnUpdate handle method, I do some calculations and decide if I want to show a warning indicator on row level (first column). Using the programmatically end edit call, the code get's executed correctly, triggering the change of 1st column to include the warning indicator, the actual markup of the unit test never get's updated and is left with the editor still visible.

Is it possible to test editing mode of TelerikGrid? Am I missing something, like triggering the grid to refresh? Do you have any recommendation or a simple example to demonstrate the ability to trigger incell edit and finish it (removing the editor) with bunit?

Other companies provide a BUnit test library to help with this process, since all of you (component vendors) seem rely heavily on javascript. What is your approach on that?

Dimo
Telerik team
 answered on 13 May 2025
0 answers
24 views

Good evening.

I implemented Telerik's themes switching at runtime in my Blazor Server app by following this guide: https://www.telerik.com/blazor-ui/documentation/knowledge-base/change-theme-runtime
So far it seems to be working fine, as I can see the Telerik components change their appearance based on the chosen theme.

I'd like to also apply the theme to other standard html elements in the DOM. For example, even after setting a Telerik's "dark" theme:

  • The body of the page is still white
  • The <label> tags are still black

What is the correct and best approach to change the appearance of the above elements so that they are coherent with the chosen Telerik theme?

NiV-L-A
Top achievements
Rank 2
Iron
 asked on 11 May 2025
1 answer
23 views
I'm working with the scheduler and I need the header to be sticky on the page, on scroll. Not just on the grid itself. When I scroll down, I need the header to stick to the top and when I scroll back up, it should go back to its original position. 

The original k-scheduler-header css is already sticky. How do I make it sticky on the page?
Hristian Stefanov
Telerik team
 answered on 09 May 2025
1 answer
25 views

Hi i have a DatePicker in a module form. If i resize the browser window in order to have low visible space below the datepicker, then i open the datepicker popup, it create a strange effect on the page.

For example i have this page with a datepicker (highligted in red):

if i open the datepicker popup the dom change adding white space on bottom of the page:

closing the popup, the white space disappear.

How to solve?

Thanks

 

 

Dimo
Telerik team
 answered on 09 May 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?