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.

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

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.

Hi

Please guide me how can I use Popover in the Map instead of showing Tooltip?

The xlsx.zip contains some strange files, but why is there no normal .xlsx file..

In the past it did produce a normal .xlsx file in the download tool of the spreasheet.

Is there a setting/option for this?