I'm working on a task where the user needs to be able to enter a space in the form field. I have attached an example of the setup code I am currently using. When the user attempts to add a space in the textbox it is simply not accepted and nothing happens. I have been researching this issue and have not found much help available. So my question are: Is there a workaround? Should I be taking a different approach? 

public string CustomerName
{
    get { get return Ship.CustomerName ?? ""; }
    set { Ship.CustomerName = value; }
}

<FormItems>
    <FormItem Field="@nameof(Example.CustomerName)"/>
</FormItem>

Update:

While troubleshooting this issue I learned a couple of things. My input fields were placed inside of the Telerik Panel Bar. This panel bar is preventing / not registering spaces. I looked through the documentation to see if this was intentional and have not found anything. Has anyone encountered any similar issues? If so, what did you use as a workaround? 

Documentation: https://docs.telerik.com/blazor-ui/components/panelbar/events

Hi,

I'm using the Trial 2.25.0 with the Telerik project template. When I try to access the Grid demo page I get the error "Unhandled exception rendering component: Value cannot be null. (Parameter 'format')". I narrowed down the error to the Pageable option. If I don't use it then the page is fine but there's no pagination.

* Microsoft Visual Studio Enterprise 2019 Version 16.10.3

* Chrome Version 91.0.4472.124

I have no clue on what could be wrong because the same option is used (roughly in the same way) in GitHub-paste-from-excel.

I attached the following screenshots:

ProjectTemplate: Shows the telerik template I used for generating the project. It's available after installing the Trial.

Grid: The link I used in the main page.

PageableDisabled: Disabling the Pageable option.

GridPage: The grid but without pagination.

Pageable: Pageable option is enabled.

GridPageError: The exception in the browser console.

Thanks

I would like to only display a notification the first time a user visits a page.  When the notification is closed I would like to set a Boolean value in local storage that I can check before displaying the notifications again. 

Is there a mechanism or event for the Notifications that would assist me in doing this?  I've read thru the examples and Docs but have not found anything.

Hello,

I try to expand and collapse a pane via code. However, so far without success. 

razor:

 <TelerikSplitter Class="kunden-splitter nopadding"
                         @ref="@Splitter"
                         Width="100%" Height="100%"
                         Orientation="@SplitterOrientation.Vertical"
                         OnResize="@OnResizeHandler" OnExpand="@OnExpandHandler" OnCollapse="@OnCollapseHandler">
            <SplitterPanes>

                <SplitterPane Size="@PaneSizeOne">
                <div> stuff... </div>
                 </SplitterPane>

                   <SplitterPane Collapsible="true" Collapsed="@isCollapsed">
                      <div> stuff... </div>
                 </SplitterPane>

                      </SplitterPanes>
        </TelerikSplitter>

Variant 1:
I use a TelerikToggleButton to change the variable isCollapsed:

void DetailsSelectedChangedHandler(bool currSelectedState)
    {
        isCollapsed = !currSelectedState;
         StateHasChanged();
    }

Variant 2:
I call the respective events:

 if (isCollapsed)
        {
            SplitterCollapseEventArgs args = new SplitterCollapseEventArgs();
            args.Index = 1;
            args.ShouldRender = true;
            await OnCollapseHandler(args);
        }
        else
        {
            SplitterExpandEventArgs args = new SplitterExpandEventArgs();
            args.Index = 1;
            args.ShouldRender = true;
            await OnExpandHandler(args);
        }

Variant 3:
I use the State (use z just for this example)
 var states = Splitter.GetState();
        int z = 0;
        foreach (var item in states.Panes)
        {
            if (z == 1)
            {
                item.Collapsed = isCollapsed;
            }
            z += 1;
        }

-----------

unfortunately all without success 

Does the capability exist to style the Drawer component to have a "handle" to enable expanding and collapsing as shown in the attached images?  Or, would this be an enhancement request? 

Thanks,

-Kelly

Does Blazor UI natively support mobile gestures? I've not been able to find anything in the Docs so I assume not. idk

Has anyone had any success incorporating any other frameworks into Blazor UI to add that support? At present, I'm looking at the list control and swiping in left and right to reveal additional menu options (for example like iPhone's Mail app). But I could also see this helpful in the Grid.

I have a Blazor application that has some custom component wrappers to the standard Telerik components. 

For example we have implemented the following wrapper component for a TelerikNumericTextBox

@typeparam TModelProperty
@inherits CslaNumericInputBase<TModelProperty>

<div>
    @if (ShowLabel)
    {
        <CslaLabel Property="Property" />
    }
    <TelerikNumericTextBox 
        T="TModelProperty"
        Id="@Property.PropertyName"
        @bind-value="Value" 
        @bind-value:event="@BindEvent"
        Min="@Min"
        Max="@Max"
        Step="@Step"
        Format="@Format"
        Decimals="@Decimals"
        Arrows="@Arrows"
        Enabled="@Property.CanWrite"
        Width="@Width"
        Class="@Class" />
    <CslaInputValidationMessages Property="Property" />
</div>

The component wrapper code behind file looks like this:

using System;
using Microsoft.AspNetCore.Components;
using ServiceStack;

namespace MB5.Client.Shared
{
    public class CslaNumericInputBase<TModelProperty> : CslaInputBase
    {
        [Parameter]
        public string Width { get; set; } = "100%";

        [Parameter]
        public bool? BoldCondition { get; set; }

        [Parameter]
        public TModelProperty Min { get; set; }

        [Parameter]
        public TModelProperty Max { get; set; }

        [Parameter]
        public TModelProperty Step { get; set; }

        [Parameter]
        public int Decimals { get; set; }

        [Parameter]
        public bool Arrows { get; set; } = true;

        protected TModelProperty Value
        {
            get => Property.Value != null ? (TModelProperty)Property.Value : default;
            // ReSharper disable once UnusedMember.Global
            set
            {
                var defaultValueForModelProperty = default(TModelProperty);

                if (!Equals(value, defaultValueForModelProperty))
                {
                    SetNewValue(value);
                }
                else
                {
                    if (!typeof(TModelProperty).IsNullableType())
                    {
                        SetNewValue(default);
                    }
                    else
                    {
                        Property.Value = null;
                    }
                }
            }
        }

        protected string Class
        {
            get
            {
                if (BoldCondition.HasValue && BoldCondition.Value)
                {
                    return "bold";
                }

                return null;
            }
        }

        private void SetNewValue(TModelProperty newValue)
        {
            Property.Value = newValue;
        }
    }
}

using Csla.Blazor;
using Microsoft.AspNetCore.Components;

namespace MB5.Client.Shared
{
    public class CslaInputBase : ComponentBase
    {
        private const string OnInputEventName = "oninput";
        private const string OnChangeEventName = "onchange";

        private bool _bindPropertyAndValidationOnInput = true;
        protected string BindEvent = OnInputEventName;

        [Parameter]
        public IPropertyInfo Property { get; set; }

        [Parameter]
        public bool BindPropertyAndValidationOnInput
        {
            get => _bindPropertyAndValidationOnInput;
            set
            {
                _bindPropertyAndValidationOnInput = value;
                BindEvent = _bindPropertyAndValidationOnInput ? OnInputEventName : OnChangeEventName;
            }
        }

        [Parameter]
        public bool ShowLabel { get; set; } = true;

        [Parameter]
        public string ExtraLabelText { get; set; } = "";

        [Parameter]
        public bool PreFixExtraLabelText { get; set; }

        [Parameter]
        public string Format { get; set; } = "";
    }
}

We add the component to the page like so:

<CslaNumericInput 
    TModelProperty="decimal?" 
    ShowLabel="false" 
    BindPropertyAndValidationOnInput="false"
    Property="@(vm.GetPropertyInfo(() => vm.Model.PremiumTyreValue))"
    Min="0" 
    Max="9999" 
    Step="1" 
    Decimals="2" 
    Format="N2" />

If we directly update the control value by typing in the textbox then it works.  If we update the model value which is bound to the control we expect the new updated value to appear in the textbox.

What is happening is that the model value updates successfully but the control doesn't update the value on screen.  If you click (set focus) to the textbox then it will update the value in the textbox to the new updated one saved to the model.

I have made a video: https://drive.google.com/file/d/1GVpqJy7EygWZt5rXZCHlQxPRZPNIbhdz/view?usp=sharing

It shows that on click of the Copy Default to User button the values in the left hand column (Default values) are copied to the right hand column (User values) and you can see that the first two rows at the start are different to the defaults and we expect them both to update and match the default values.

Notice that the dropdown correctly updates but the custom NumericTextBox does update even though the model value changes.

You will see that when you click into the textbox then the value that we expected to automatically be populated is populated when focus is set to the control.

Any idea how we can get the value to update on screen automatically?

Hi,

I try to implement a calendar there i use Range selection mode. I want the user only to click on the start range and then we will set end range in code based on the start range date. 

So i have set an RangeStartChanged event handler and that works but the gui component think i am in select end Range date so i want to exit the selection state after i have select Start date.

Is there anyway to do that?