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?

Hi,

I downloaded the Telerik UI for Blazor Trial (version 2.25.0) and I'm investigating the "paste-from-excel" demo (first one I have to go through) from GitHub paste-from-excel (.Net 5.0). Unfortunately I get the following runtime errors (see screenshot).

I'm using:

• VS 2019 Enterprise 16.10.2
• Chrome  91.0.4472.124

Does anyone know how to fix it?

I would really appreciate any help because I'm far from saying to upper management that this is the right library for us.

Thanks in advance

Hello,

I am trying to decide if I can use either the Calendar or Scheduler control (or even leverage both) for the following problem.  

We have a data model that represents some forecasted daily values.  It is keyed on the date, so there is one unique occurrence/tuple of this class per day.   It could perhaps be implemented as a Dictionary<k,v>, where the key is the date or date-string. 

The users of this UI will want to be able to:

1.  See a single- or multi-month "calendar" of the forecast values in the main view of the control (perhaps like customized appointments in the Scheduler?)

2.  Select one or multiple days (like you can do in the Calendar control, not really in the Scheduler?) and then be able to enter or edit the forecast values for the selected set of days.

3.  Put the entire "calendar" (whatever month(s) are visible at the moment) into edit mode where the date cells use a template to edit the model.

So, the Telerik Calendar has the ability to select by date(s) - rather than appointments.  The Scheduler naturally comes with a UI that is closer to what we need to display a complex object in the day's cell.  On the other hand, the Scheduler is build around the concept of appointments and tasks, which is not really how our users will be thinking about the data. 

I'm playing around with the Calendar right now and able to get some data into the template, but it looks like  garbage right now because the space is obviously constricted.   I have a long way to go, so I'm hoping to find some samples or ideas at least.

<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
                  ValueChanged="@MultipleSelectionChangeHandler"
                         @ref="@multipleSelectionCalendar">
       <MonthCellTemplate>
          <div style="border-color:black; border-width:2px">
              @context.Day
              @{
                 string date = context.ToString("yyyyMMdd");
                  if (forecasts.ContainsKey(date))
                    {
                        <div>Forecast : forecasts[date].Forecast </div>
                    }

               }

            </div>
        </MonthCellTemplate>
 </TelerikCalendar>

I want to restrict file name with special characters at the time of uploading file in Dot Net blazer application using Telerik control. I am not finding any valid solution to validate file name, any specific solution for this.

I know we can write validation related code in each individual method but I want common solution for all files where I have used TelerikUpload control.

<TelerikUpload SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl"
                                   OnUpload="OnUploadEvent" OnRemove="@OnRemoveEvent"
                                   AllowedExtensions="@( new List<string>() { ".xlsx", ".xlsm", ".jpg", ".jpeg" ,".doc" ,".docx", ".pdf"} )"
                                   SaveField="files" RemoveField="fileToRemove">
</TelerikUpload>

DateTimePicker it can show only the time, I don't want it to ask me to select date

tanks