Questions on UI for Blazor Forum

6 answers

110 views

This exert from an email you all sent today mentions 25 controls.

Are they saying there will be 25 controls soon?

I am seeing 16 right now, are they saying 9 more are ready? What are those 9 that are coming?

With this release, we are also announcing the market-first Telerik UI for Blazor with 25+ native components, support for Angular 8 and latest .NET Core 3.0 (RC).

General Discussions

answered on 22 Sep 2019

1 answer

2.5K+ views

MinLength, MaxLength, Pattern

Is it just me or were these properties removed from the TextBox? I had code with those properties set that no longer compiles after upgrading.

TextBox

answered on 22 Sep 2019

1 answer

373 views

Chart not displaying data

Hi,

Using: UI for Blazor 2.0 with .NET Core 3 RC1.
We're trying to get data to show on our chart. However it seems this is not working. We're binding a single series like this:

<TelerikChart>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Line" Name="Values" Data="@_dataPoints" Field="@nameof(DataPoint.Value)" CategoryField="@nameof(DataPoint.Category)" />
</ChartSeriesItems>
<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Right" />
</TelerikChart>

Our _dataPoints variable is set in OnInitializedAsync. We've tried invoking StateHasChanged after the variable has been set, but this does not seem to help.
The "category" property on the DataPoint model was a DateTime but we changed this to string to check if that would work, but this also doesn't fix it.

private IEnumerable<DataPoint> _dataPoints = new List<DataPoint>();

protected override async Task OnInitializedAsync()
{
_dataPoints = await CalculateDataPoints().ConfigureAwait(false);
//await InvokeAsync(() => StateHasChanged()).ConfigureAwait(false);
}

Are we missing something?

Thank you in advance.

Charts

answered on 20 Sep 2019

2 answers

1.6K+ views

Page Load OnInitializedAsync Issue

I think this is a blazor issue maybe, not Telerik.

Has anyone had an issue with OnInitializedAsync firing twice?

My event fires, loads the data in my grid, then fires again and reloads grid.

preview9-19423-09

General Discussions

answered on 16 Sep 2019

2 answers

1.2K+ views

Collapsible Menu (MatBlazor + Telerik)

Hey guys, here is my MainLayout.razor page.

The idea here is to have a side bar nav menu, which can be collapsed to give the user more screen real estate.

I am using MatBlazors app bar and drawer components to have the "collapsing" feature. And then using the Telerik Menu with some custom styling to incorporate the nav links.

@inherits LayoutComponentBase

@using Telerik.Blazor.Components.RootComponent
@using MatBlazor;
@using Telerik.Blazor.Components.Menu;
@inject NavigationManager navigationManager
@inject Blazored.LocalStorage.ILocalStorageService localStorage
@using Newtonsoft.Json;
@using System.Threading.Tasks;

<head>
    <style>
        span.k-in.k-menu-link {
            display: flex;
        }

        .mdc-top-app-bar__row  {
            display:  flex;
            position:  relative;
            box-sizing:  border-box;
            width:  100%;
            height:  32px !important;
            background-color: #fafafa !important;
            top: 0px;
            position: fixed;
        }

        .mdc-top-app-bar--fixed-adjust {
            padding-top: 40px !important;
        }


        .mdc-drawer {
            z-index: 1;
            box-shadow: -4px 1px 14px 0px black !important;
        }



        /*MOBILE*/
        @@media (min-width: 320px) {
            .mdc-drawer__content {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                margin-top: 8px;
                background: #fafafa !important;
                height: 88vh;
            }

            .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
                margin-left: 170px;
                margin-right: 0;
            }

            .mdc-drawer {
                width: 170px !important;
            }

            .Banner {
                width: 100%;
                background-color: #3f9d2f !important;
                height: 110px;
                margin-top: -2px;
                box-shadow: -2px -7px 15px 7px black;
                padding: 10px;
            }

            .UserIcon {
                font-size: 50px !important;
                color: #FFFFFF;
                margin-left: 39%  !important;
                cursor: pointer;
                margin-top: -7px;
            }

            .WideScreenClass {
                display: none;
            }

            .MobileClass{
                display:block;
            }

            .BannerUsernameHeading{
            margin: auto;
            color: #FFFFFF;
            text-align: center;
            font-weight: 500;
            font-size:30px !important;
                    }

            .BannerCompanyNameHeading{
                margin: auto;
                color: #FFFFFF;
                text-align: center;
                font-size:15px !important;
                margin-top: -9px;
            }

            .k-menu-group .k-item > .k-link, .k-menu-vertical .k-item > .k-link {
            color: black !important;
            margin-bottom: 2px !important;
            margin-top: 2px !important;
            line-height: 1.6 !important;
            font-family: Roboto !important;
            font-variant: all-petite-caps !important;
            font-size: larger !important;
        }


        }






        /*WIDE SCREEN*/
        @@media (min-width: 1280px) {
            .mdc-drawer__content {
                height: 100%;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                margin-top: 48px;
                background: #fafafa !important;
            }

            .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
                margin-left: 256px;
                margin-right: 0;
            }

            .mdc-drawer {
                width: 256px !important;
            }


            .Banner {
                width: 100%;
                background-color: #3f9d2f !important;
                height: 175px;
                margin-top: -2px;
                box-shadow: -2px -7px 15px 7px black;
                padding: 10px;
            }

            .UserIcon {
                font-size: 64px  !important;
                color: #FFFFFF;
                margin-left: 36%  !important;
                cursor: pointer;
            }

            .main > div {
                padding-left: 2rem !important;
                padding-right: 1.5rem !important;
                margin-top: 48px;
            }

            .MobileClass {
                display: none;
            }

            .WideScreenClass{
                display:block;
            }

            .BannerUsernameHeading{
            margin: auto;
            color: #FFFFFF;
            text-align: center;
            font-weight: 500;
            font-size:42px !important;
                    }

            .BannerCompanyNameHeading{
                margin: auto;
                color: #FFFFFF;
                text-align: center;
                font-size:18px !important;
            }

            .k-menu-group .k-item > .k-link, .k-menu-vertical .k-item > .k-link {
            color: black !important;
            margin-bottom: 2px !important;
            margin-top: 2px !important;
            line-height: 2 !important;
            font-family: Roboto !important;
            font-variant: all-petite-caps !important;
            font-size: larger !important;
        }

        }








        :not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item { /*material chips*/
            color: black;
        }

        .mdc-drawer .mdc-list-item { /*make text in side menu black*/
            color: black;
        }

        .Title {
            padding-left: 20%;
        }

        .mat-accordion .mat-expansion-panel__summary .after {
            color: black;
        }

        .mat-accordion .mdc-nav-menu .mat-expansion-panel__content .mdc-list-item {
            font-weight: 500;
        }

        div#matBlazor_id_8e6ee3bc-7b6e-41e2-854a-b965730195b1 {
            overflow: hidden;
        }

        div#matBlazor_id_e44a318f-9585-474c-9dca-8576f4594719 {
            overflow: hidden;
        }

        div#matBlazor_id_d3b57f8a-30d5-4bf2-894e-2527d97e6529 {
            overflow-y: hidden;
        }

        .material-icons {
            font-size: 56px;
            color: white;
        }

        .LogoutButton {
            width: 100% !important;
            background: #3f9d2f !important;
            border-radius: 25px;
            color: white;
            height: 50px;
        }

        .mdc-chip {
            background-color: #3f9d2f !important;
            color: rgb(255, 255, 255) !important;
        }

        .AnimationDiv {
            transition-property: all;
            transition-property: transform;
            transition-duration: 0.3s;
        }
    </style>

    <style>
        a { /*make links a certain way*/
            font-weight: 500 !important;
            color: black !important;
            line-height: 2 !important;
            font-variant: all-small-caps !important;
            font-family: Roboto !important;
            padding: 10px !important;
            font-size: larger !important;
        }
    </style>

</head>



<TelerikRootComponent>
    <MatAppBarContainer>
        <MatAppBar Fixed="false" Style="height:48px; background-color:#3f9d2f  !important; color:#FFFFFF !important;">
            <MatAppBarRow Style="height:48px; ">
                <MatAppBarSection>

                    @if (Opened == true)
                    {
                        <div>
                            <MatIconButton OnClick="@((e) => ButtonClicked())"> <span class="fas fa-grip-lines"></span></MatIconButton>
                        </div>
                    }
                    else
                    {
                        <div>
                            <MatIconButton OnClick="@((e) => ButtonClicked())"> <span class="fas fa-grip-lines-vertical"></span></MatIconButton>
                        </div>
                    }
                    <MatAppBarTitle>
                        @ModuleName
                    </MatAppBarTitle>
                </MatAppBarSection>
            </MatAppBarRow>
        </MatAppBar>
        <MatAppBarContent>
        </MatAppBarContent>
    </MatAppBarContainer>

    <MatDrawerContainer Style="width:100%; overflow-y:hidden; min-height:100vh">
        <MatDrawer @bind-Opened="@Opened" Mode="@MatDrawerMode.Dismissible">
            <div class="Banner">
                <div>
                    <i class="fas fa-user-circle UserIcon"></i>
                    <MatH3 Class="BannerUsernameHeading">@Username</MatH3>
                    <MatH6 Class="BannerCompanyNameHeading">Company</MatH6>
                </div>
            </div>
            <div class="WideScreenClass">
                <br />
                <br />
                <TelerikMenu Data="@MenuItems" Orientation="Telerik.Blazor.MenuOrientation.Vertical"
                             UrlField="@nameof(MenuItem.Page)"
                             ItemsField="@nameof(MenuItem.SubSectionList)"
                             TextField="@nameof(MenuItem.Section)"
                             OnClick="@((MenuItem item) => OnClickHandler(item))">

                    <ItemTemplate Context="item">
                        @{
                            if (item.Section == "Site Access")
                            {
                                <NavLink href="@item.Page">@item.Section</NavLink> <br />
                                <MatChipSet>
                                    <MatChip Label="5"></MatChip>
                                </MatChipSet>
                            }
                            else
                            {
                                <NavLink href="@item.Page">@item.Section</NavLink> <br />
                            }

                        }
                    </ItemTemplate>
                </TelerikMenu>
                <div style="position:absolute; bottom:10px; width:100%; padding:10px;">

                    <img src="/images/CompanyLogo.png" style="width:200px; margin:auto; margin-left: 20px;" />
                    <br />

                    <Telerik.Blazor.Components.Button.TelerikButton Class="LogoutButton" OnClick="Logout">
                        LOGOUT
                    </Telerik.Blazor.Components.Button.TelerikButton>

                </div>
            </div>

            <div class="MobileClass">
                <TelerikMenu Data="@MobileMenuItems" Orientation="Telerik.Blazor.MenuOrientation.Vertical"
                             UrlField="@nameof(MenuItem.Page)"
                             ItemsField="@nameof(MenuItem.SubSectionList)"
                             TextField="@nameof(MenuItem.Section)"
                             OnClick="@((MenuItem item) => OnClickHandler(item))">



                </TelerikMenu>
            </div>
        </MatDrawer>
        <MatDrawerContent Style="overflow-y:hidden;">
            <div class="main">
                <div class="content px-4">
                    @Body
                </div>
            </div>
        </MatDrawerContent>

    </MatDrawerContainer>
</TelerikRootComponent>

@code {


    public MenuItem ClickedItem { get; set; }

    protected void OnClickHandler(MenuItem item)
    {
        ClickedItem = item;
        ModuleName = item.Section.ToString();
        Console.WriteLine("Telerik menu item: " + item.Section.ToString());
        Opened = !Opened;
    }

    
    public List<MenuItem> MenuItems { get; set; }

    public class MenuItem
    {
        public string Section { get; set; }
        public string Page { get; set; }
        public List<MenuItem> SubSectionList { get; set; }
    }

    public List<MenuItem> MobileMenuItems { get; set; }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
{
                    new MenuItem()
                    {
                        Section = "Dashboard",
                        Page = "dashboard"
                    },
                    new MenuItem()
                    {
                        Section = "Site Access",
                        Page = "siteaccess"
                    },
                    new MenuItem()
                    {
                        Section = "History",
                        Page = "history"
                    },
                    new MenuItem()
                    {
                        Section = "Reports",
                        Page = "reports"
                    },
                    new MenuItem()
                    {
                        Section = "Settings",
                        Page = "settings"
                    },
                    new MenuItem()
                    {
                        Section = "Users",
                        Page = "users"
                    },
                    new MenuItem()
                    {
                        Section = "Vehicles",
                        Page = "vehicles"
                    },
                    new MenuItem()
                    {
                        Section = "Drivers",
                        Page = "drivers"
                    }
                };

        MobileMenuItems = new List<MenuItem>()
        {
                new MenuItem()
                {
                    Section = "Dashboard",
                    Page = "dashboard"
                },
                new MenuItem()
                {
                    Section = "Access Manager",
                    Page = "accessmanager"
                },
                new MenuItem()
                {
                    Section = "Yard Manager",
                    Page = "yardmanager"
                },
                new MenuItem()
                {
                    Section = "Vehicle Registration",
                    Page = "vehicleregistration"
                },
                new MenuItem()
                {
                    Section = "LOGOUT",
                    Page = "/"
                },
        };


    base.OnInitialized();
    }
 public void Logout()
    {
        UriHelper.NavigateTo("/");
    }


    public string ModuleName { get; set; } = "";

    bool Opened = true;

    string Name = "";

    public async Task GoToUsers()
    {
        ModuleName = "USERS";
        UriHelper.NavigateTo("/user");
    }

    public async Task CloseMenu(string name) //this method will close the menu, and set the page name as the module name at the top of the app bar
    {
        ModuleName = "";
        await Task.Delay(20);
        Opened = !Opened;
        await Task.Delay(20);
        ModuleName = name;
    }

    void ButtonClicked()
    {
        Opened = !Opened;
    }

    public string UserName { get; set; }
    public string UserID { get; set; }

    protected override async Task OnInitializedAsync()
    {
        
       
        UserID = await localStorage.GetItemAsync<string>("userID");

        ModuleName = "DASHBOARD";
       
        Username = await localStorage.GetItemAsync<string>("userName");

    }

    public string Username { get; set; }
    Modules modules = new Modules();
    GeneralConfiguration generalConfiguration = new GeneralConfiguration();

}

Menu

answered on 12 Sep 2019

5 answers

333 views

Can't filter on DataSource which is an Interface?

I am passing a collection of an Interface type as the datasource for a the Grid and when I try to render the page I get thr following error...

Unhandled exception rendering component: Cannot create an instance of an interface.
System.MissingMethodException: Cannot create an instance of an interface.
at System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean wrapExceptions, Boolean& canBeCached, RuntimeMethodHandleInternal& ctor, Boolean& hasNoDefaultCtor)
at System.RuntimeType.CreateInstanceDefaultCtorSlow(Boolean publicOnly, Boolean wrapExceptions, Boolean fillCache)
at System.RuntimeType.CreateInstanceDefaultCtor(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, Boolean wrapExceptions)
at System.Activator.CreateInstance[T]()
at Telerik.Blazor.Components.Grid.GridFilterHeaderBase`1.get_PropType()

I do not know the datasource actual concrete type until run time. Is there a way to work around this?

Thanks,

Jeff

Grid

answered on 09 Sep 2019

3 answers

577 views

DatePicker in Bootstrap form-group

I'm trying to get a DatePicker to display correctly in a page that's using Bootstrap `form-group` and `form-control` tags, but I'm not having much success.

The TelerikDateInput component exposes the Class property, but I don't think the DatePicker (or at least it doesn't seem to from my experimentation and from the documentation?

I've tried various ways of doing this, e.g.

<div class="form-group">

<label for="dueDate" class="control-label col-md-4">Expected Arrival Date: </label>

<div class="col-md-8">

<TelerikDatePicker Class="form-control" Format="dd/MM/yyyy" @bind-Value="@State.BillOfLadingVM.DueDate" />

</div>

<ValidationMessage For="@(() => State.BillOfLadingVM.DueDate)" />

</div>

But I always get something along the lines of the attached image.

Is there any way to get this to work?

DatePicker

answered on 06 Sep 2019

4 answers

638 views

Any way to have the grid update without the use of an Update button?

In testing I'm finding users keep forgetting to press the Update button on the grid. Is there any way to make the grid update the data source on each data change and not require the use of the row Update buttons?

Grid

answered on 06 Sep 2019

2 answers

428 views

Change theme on fly

Hello Marin
I learn article about themes support and I use it https://docs.telerik.com/blazor-ui/themes
Also I was create own theme by your theme builder. It's work fine.
But i want to change themes as in your blazor demo site by select from dropdown list and change theme immediatelly.
Can you explain me short and right way how to do this.
Thank you.

General Discussions