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?

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?

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

Hello Telerik,

In my Blazor Hybrid application, I have a toolbar with a textbox in it; I want to add some hotkeys to it: on pressing Enter, process the textbox value, and in pressing Escape, revert the textbox value to the default.

The problem is with the toolbar. I have this piece of code:

@code {
    private void OnKeyUp(KeyboardEventArgs args)
    {
        Debug.WriteLine("key up: " + args.Code);
    }
}
<TelerikToolBar>
    <ToolBarTemplateItem>
        <div @onkeyup="OnKeyUp" tabindex="-1">
            <TelerikTextBox Value="Some Value" />
        </div>
    </ToolBarTemplateItem>
</TelerikToolBar>

It works perfectly for any pressed key, including Enter - except the Escape key. When I press Escape, the textbox loses focus, and I don't get the keyboard event. I tried the keydown and keypress events, too.

In contrast, when I press Tab, I get the keydown event before the textbox loses focus (but no keyup event).

If I place the textbox directly on the page, without the toolbar, the keydown and keyup events work correctly, and I get the events for the Escape key. Apparently, TelerikToolBar is doing... something.

Is there a way to:
a) make the toolbar less aggressive and let me handle the keydown/keyup events, or
b) detect the Escape and Enter keyclicks from the TelerikTextBox component, to avoid the need for handling the javascript events?

As a curiosity, when focussed on this text box, try pressing Win and then Escape. It produces this sequence of events: "keydown MetaLeft" -> "focusout" -> "focusin" -> "keyup Escape". Yes, you get the Escape event, and the focus returns to the textbox.

Thank you.

I have a TelerikTimePicker component and I have set the ShowClearButton="true". The Value property of the component is bound to a nullable DateTime variable (e.g., DateTime? MyTime). If I first input/select a valid time and then clear the value (using the "x" button in the input field), the component is highlighted in red because the .k-invalid class has been added to the HTML markup. However, the value in the TelerikTimePicker is not actually invalid because a null value is allowed.

This is very similar to this issue for the TelerikDateTimePicker: https://feedback.telerik.com/blazor/1660917-datetimepicker-should-not-get-red-border-when-bound-to-nullable-datetime-and-the-input-is-empty

When I click on scheduler appointments where the top isn't visible, the scheduler often (but not always) scrolls up but doesn't scroll up enough to make the top of the appointment visible. I did a video showing what I mean. When you click the bottom part of the longer appointments, the top isn't immediately scrolled to and you have to scroll a little further to make it visible.

Is it possible to configure the scheduler (without custom JS) so that the top of the appointment is visible when clicked?

I haven't fully figured out what triggers it to scroll up either. The shorter appointments don't scroll at all when clicked, even if they are barely visible. The nearest I can tell, any appointment longer than an hour will scroll when clicked but it will only scroll up enough so that the first hour is still hidden. I do see that if the bottom isn't visible, it will always scroll down enough so that the bottom is in view but I'm not sure why the same doesn't happen for the top.

I have a grid footer and am needing to bind the sum value with a NumericTextBox (TotalDailyDeposit) that is outside the grid.  Both the Grid and NumericTextBox are inside an EditForm.  The sum is being calculated/displayed in the grid successfully on row value update, but the value displayed in TotalDailyDeposit isn't being changed when a new sum is calculated in the grid.  There is also a second NumericTextBox (PriorDailyLimit) outside of the grid.  After changing a value in a grid row I can click in and out of PriorDailyLimit and the TotalDailyDeposit value will update.  This only happens, though, if PriorDailyLimit has an OnChange event handler defined (even if the handler contains no code).  TotalDailyDeposit will also rebind when a Grid row's Edit button is subsequently clicked.  Not updated, just clicked.

It seems like the page-level bind events aren't firing from within the footer because the context is the Grid at that point, but do fire based on other subsequent events that occur at the page level.  Is there any way to cause a rebind of TotalDailyDeposit from within the Grid footer?  

Things I've tried:

• Binding TotalDailyDeposit to a model property 
• Binding TotalDailyDeposit to a page variable
• Using @bind-Value
• Using Value/ValueExpression
  

<TelerikNumericTextBox id="PriorDailyLimit" class="form-control form-control-sm" @bind-Value="Model!.PriorDailyLimit"
     Format="C" Width="150px" Arrows="false" />

...

                       <FooterTemplate>
                           @{
                               float? total = (float?)context?.Sum;
                               if (total != null)
                               {
                                   Model!.TotalDailyDeposit = (float)total;
                               }
                               else
                               {
                                   total = 0f;
                               }
                           }
                           @(((float)total).ToString("C"))
                       </FooterTemplate>


...
 
<TelerikNumericTextBox @bind-Value="Model!.TotalDailyDeposit" class="form-control form-control-sm" Format="C" ReadOnly="true" />

I'm having trouble with data binding in the drawer component. In order to help isolate + demonstrate the issue I've created a simple test page containing a drawer component with minimal configuration:-

@layout TelerikLayout
@page "/test"

<TelerikDrawer @bind-SelectedItem="SelectedItem"
               Data="Data">
    <DrawerContent><p>Hello</p></DrawerContent>
</TelerikDrawer>

@code {
    private class DrawerItem
    {
        public FontIcon Icon { get; set; }
        public bool Separator { get; set; }
        public string Text { get; set; }
        public string Url { get; set; }
    }

    private List<DrawerItem> Data { get; set; } = new List<DrawerItem> { new DrawerItem { Icon = FontIcon.CaretTr, Text = "Hello" } };

    private DrawerItem? SelectedItem { get; set; }
}

And here is the resulting markup. The drawer component is rendered and so is the drawer content, but no drawer items:-

<div class="k-drawer-container k-drawer-overlay"><!--!-->
<!--!-->
    <div class="k-drawer telerik-blazor k-drawer-start" data-id="2ccfd37c-d109-485f-80e7-654bf55cb5c7" dir="ltr"><!--!-->

        <!--!--><!--!-->

        <div class="k-drawer-wrapper" style="width: 0; transition-duration: 0ms;"><!--!-->
        </div><!--!-->
    </div><!--!-->
    <div class="k-drawer-content"><!--!-->
<!--!--><p>Hello</p>    </div><!--!-->
</div>

I've tried using IEnumerable instead of List, making SelectedItem not nullable, and removing SelectedItem altogether, and the result is the same. I'm on Telerik UI for Blazor version 8.1.1 and all other components appear to be working fine. Any help would be appreciated.