Hi, I am trying to port our app to Blazor from UI for Ajax. One of the glaring omissions is the FocusDate which we use heavily.

Use case: team is planning the travel a staff member to the Tour de France sometime in May. However, the race is in July. The Blazor UI will use the selected date however, there is no selected date yet. In the UI for Ajax version, we use the starting date of the race as the focus date which places the travel in the right neighborhood and most likely doesn't require the user to change the month making the process more productive.

The worst case scenario is when the team is planning a training camp and they have to change the view every single time for 200 people. That's not very nice.

I am wrapping the Telerik control within a component to be able to have better Placeholder feedback for the user.

Matt.

I love the feature, helps users know what they edited before saving changes, BUT ... it seems this "was edited" feature doesn't apply to many other controls like DropDownList, MultiSelect, CheckBox.

Am I stuck "as is" or is there something I can apply to make this UI feature work with other Telerik controls?

It was recently brought to my attention that a user did not know the stepper was a clickable item, they indicated that had it used a pointer instead of the standard mouse it would have made more sense.  I thought that it was odd that it was not that way by default.  Just wanted to put this out there to see if that could be changed in the standard Telerik themes?

Thanks for your consideration

Hi,

When I add a chart series of a different type to a telerik chart then there is a margin left and right of the plot area added. So between the y-axis and where the plot starts there is whitespace (the same on the right side, where the x-axis expands beyond the plot area).

Dependencies:

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0"/>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" PrivateAssets="all"/>
<PackageReference Include="Telerik.FontIcons" Version="2.1.0" />
<PackageReference Include="Telerik.UI.for.Blazor" Version="5.0.1" />

Example:

@page "/AreaChartDemo"
@using Telerik.Blazor
@using Telerik.Blazor.Components

<TelerikChart>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Area" Name="Chile" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="India" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="Haiti" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="foo" Data="@Data" Field="@nameof(ModelData.Idx1)" Margin="0" AutoFit="true" Padding="0"></ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis AxisCrossingValue="@AxisCrossingValue">
            <ChartValueAxisLabels Format="{0}%"></ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>

</TelerikChart>

@code {
    public class ModelData
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
        public double Idx1 { get; } = 0.0;
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };

    public object[] AxisCrossingValue = new object[] { -10 };


    public List<ModelData> Data = new List<ModelData>()
{
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 1.988,
            Series3 = -0.253
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 2.733,
            Series3 = 0.362
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 3.994,
            Series3 = -3.519
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 3.464,
            Series3 = 1.799
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 4.001,
            Series3 = 2.252
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 3.939,
            Series3 = 3.343
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 1.333,
            Series3 = 0.843
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = -2.245,
            Series3 = 2.877
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.339,
            Series3 = -5.416
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 2.727,
            Series3 = 5.59
        }
    };

}

Thanks

hi

‫I am using a TelerikDrawer in Push mode with MiniMode="true", but I could not find a way to control how fast it opens and closes.

Here is my code:
<style>

    .k-drawer .k-drawer-wrapper,
    .k-drawer-wrapperr {
        overflow-y: scroll;
        scrollbar-width: none; 
    }


    .k-drawer-mini .k-drawer .k-drawer-wrapper {
        width: 46px;
    }


    .k-drawer-mini .k-drawer.k-drawer-end,
    .k-drawer-expanded .k-drawer.k-drawer-end {
        border-inline-start-width: 0px;
    }


    .k-drawer-push .k-drawer {
        height: calc(100vh - 24px - 24px) !important;
    }

    .k-drawer-content {
        height: calc(100vh - 24px - 24px) !important;
        margin: 0px !important;
        padding: 0px !important;
        max-width: 100% !important;
        background-color: darkolivegreen;
    }





    .k-drawer-container {
        display: flex !important;
    }

    .k-drawer-content {
        flex: 1;
        overflow: hidden;
    }


    .k-drawer-end {
        box-sizing: border-box;
    }




    .k-drawer,
    .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important;
    }

    .k-drawer-container,
    .k-drawer-container .k-drawer,
    .k-drawer-container .k-drawer-wrapper,
    .k-drawer-container .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important; 
    }

    .k-drawer,
    .k-drawer .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

</style>



<TelerikRootComponent EnableRtl="true">

    <TAppBar  />



    <TelerikDrawer @ref="@Drawer"
                   Position="@DrawerPosition.End"
                   MiniMode="true"
                   Mode="@DrawerMode.Push"
                   TItem="DrawerItem"
                   Width="250"
                   @bind-Expanded="@IsSidebarOpen">

        <Template>
            <NewSidbar @bind-IsOpen="@IsSidebarOpen"></NewSidbar>
        </Template>


        <DrawerContent>
            <div style="flex:1;overflow:hidden !important; height:100%">
                <div style="flex:1; overflow:auto; margin: 0px;height:100%">
                    @Body
                </div>
            </div>
        </DrawerContent>

    </TelerikDrawer>

    <FoterLyout></FoterLyout>

</TelerikRootComponent>




@code {

    private bool IsSidebarOpen = true;

    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public bool Expanded { get; set; } = true;
    public class DrawerItem;


}

this CSS not work at all

Hello,

I tried to implement the chunk upload feature of the Upload component, and started by using the sample code from https://www.telerik.com/blazor-ui/documentation/components/upload/chunk-upload, but didn't get it working.

The main problem is that in UploadController.cs, the IEnumerable<IFormFile> files always have zero elements, and the string parameter chunkMetadata is never used (except in a comment).

So I suspect this controller is copied from the default upload behaviour and modified somewhat, but it remains unfinished.

What is that parameter chunkMetadata? What does it contain? Why isn't that explained in the documentation? 
Under 'Basics' it says there is a property 'MetadataField' that 'Specifies the name of the variable that will receive the chunk upload metadata in the remote endpoint.' Nothing more, no explanation on how to use it, what info it contains, or even simple sample code.
Also, no explanation why in the controller there is a ChunkSave and a ChunkSaveCustom (the latter taking the metadata from the body). Why is that, and why is there no explanation for when to use which?

Can anybody share some working code of the upload controller?

Kind regards,

Kees Alderliesten

Hi,

Have a bunch of modal windows that I open in our application.  Looking to have a different animation to apply when the modal opens vs. when it closes (and different duration).  It seems like the Window animation parameter only supports a single type of animation and single duration.

1. Is this correct?

2. Is there a suggested workaround?  Maybe using the Animation Container?

Any info or suggestions would be appreciated.

Alan