Control inside Window not working

2 posts, 0 answers
  1. Alberto
    Alberto avatar
    19 posts
    Member since:
    Nov 2016

    Posted 29 Jul 2019 Link to this post

    I am trying version 1.4.0 and if I use a telerik control inside a Window it fails and cant use any telerik control inside, if i use standard html controls it works. See attached code and screenshot. Any idea?

     

    @using Telerik.Blazor.Components.Window
    @using Telerik.Blazor.Components.DropDownList

    <TelerikWindow Width="500px" Height="@Height" Centered="true" Visible=@isVisible Modal="true">
        <TelerikWindowTitle>
            @ModalTitle
        </TelerikWindowTitle>
        <TelerikWindowContent>
            <EditForm Model="@DTOModel" OnValidSubmit="@OnSummit">
                <input type="hidden" value="@DTOModel.Id" />
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Name</label>
                    <div class="col-sm-10">
                        <Input type="text" @bind-Value="@DTOModel.Name" class="form-control" />
                        <ValidationMessage For="@(() => DTOModel.Name)" />
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Subscription</label>
                    <div class="col-sm-10">
                        <TelerikDropDownList Data="@SuscriptionTypes" @bind-Value=@selectedValue ValueField="Value" TextField="Text"></TelerikDropDownList>
                            
                    </div>
                </div>
                @if (DTOModel.Id != Guid.Empty)
                {
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Disabled</label>
                        <div class="col-sm-10">
                            <Input type="checkbox" @bind-Value="@DTOModel.IsDisabled" checked="@DTOModel.IsDisabled" />
                        </div>
                    </div>
                }

                @if (!string.IsNullOrEmpty(ShowError))
                {
                    <div class="alert alert-danger">
                        @ShowError
                    </div>
                }
                <DataAnnotationsValidator />
                <div class="form-group row pt-2">
                    <div class="col-sm-12 text-center">
                        @if (_isLoading)
                        {
                            <LoadingButton></LoadingButton>
                        }
                        else
                        {
                            <button type="submit" class="btn btn-primary btn-sm" onclick-prevent-default><i class="fas fa-save"></i> Save</button>
                            <button type="button" style="margin-left:20px;" class="btn btn-secondary btn-sm" onclick="@OnCancel">
                                <i class="fas fa-times"></i> Cancel
                            </button>
                        }
                    </div>
                </div>
            </EditForm>
        </TelerikWindowContent>
    </TelerikWindow>

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5522 posts

    Posted 29 Jul 2019 Link to this post

    Hello Alberto,

    Can you confirm that the Telerik JS Interop file is referenced and that it points to the 1.4.0 version on the CDN (in case you are using the CDN)? In case you are using local assets, can you make sure that the path has also been updated to contain the dots that Preview 7 changed? You can find both registration patterns in the following page: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#client-assets.

    On a side note - I see that the onclick handler of the button at the end is not updated to the current standards. Can you confirm that you are using .NET Core 3 Preview 7, as it is required?

    That said, I am attaching below a short video of the expected behavior I get and here's the snippet as I ran it (fixed the onclick handler, added dummy data):

    First, my _Hosts.cshtml file:

    @page "/"
    @namespace SSBApp.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SSBApp</title>
        <base href="~/" />
        <environment include="Development">
            <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        </environment>
        <environment exclude="Development">
                  asp-fallback-href="css/bootstrap/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
                  crossorigin="anonymous"
                  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
        </environment>
        <link href="css/site.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />
        <script src="_content/telerik.ui.for.blazor/js/telerik-blazor.js" defer></script>
     
    </head>
    <body>
        <app>@(await Html.RenderComponentAsync<App>())</app>
     
        <script src="_framework/blazor.server.js"></script>
    </body>
    </html>

    the Index.razor view:

    @using Telerik.Blazor.Components.Window
    @using Telerik.Blazor.Components.DropDownList
    @using System.ComponentModel.DataAnnotations
     
    <TelerikWindow Width="500px" Height="@Height" Centered="true" Visible=@isVisible Modal="true">
        <TelerikWindowTitle>
            @ModalTitle
        </TelerikWindowTitle>
        <TelerikWindowContent>
            <EditForm Model="@DTOModel" OnValidSubmit="@OnSummit">
                <input type="hidden" value="@DTOModel.Id" />
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Name</label>
                    <div class="col-sm-10">
                        <Input type="text" @bind-Value="@DTOModel.Name" class="form-control" />
                        <ValidationMessage For="@(() => DTOModel.Name)" />
                    </div>
                </div>
     
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Subscription</label>
                    <div class="col-sm-10">
                        <TelerikDropDownList Data="@SuscriptionTypes" @bind-Value=@selectedValue ValueField="Value" TextField="Text"></TelerikDropDownList>
     
                    </div>
                </div>
                @if (DTOModel.Id != Guid.Empty)
                {
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Disabled</label>
                        <div class="col-sm-10">
                            <Input type="checkbox" @bind-Value="@DTOModel.IsDisabled" checked="@DTOModel.IsDisabled" />
                        </div>
                    </div>
                }
     
                @if (!string.IsNullOrEmpty(ShowError))
                {
                    <div class="alert alert-danger">
                        @ShowError
                    </div>
                }
                <DataAnnotationsValidator />
                <div class="form-group row pt-2">
                    <div class="col-sm-12 text-center">
                        @if (_isLoading)
                        {
                            <LoadingButton></LoadingButton>
                        }
                        else
                        {
                            <button type="submit" class="btn btn-primary btn-sm" onclick-prevent-default><i class="fas fa-save"></i> Save</button>
                            <button type="button" style="margin-left:20px;" class="btn btn-secondary btn-sm" @onclick="@OnCancel">
                                <i class="fas fa-times"></i> Cancel
                            </button>
                        }
                    </div>
                </div>
            </EditForm>
        </TelerikWindowContent>
    </TelerikWindow>
     
    @code {
        public class MyModel
        {
            public Guid Id { get; set; }
            [Required]
            public string Name { get; set; }
            public bool IsDisabled { get; set; }
        }
     
        public class MyDdlModel
        {
            public int Value { get; set; }
            public string Text { get; set; }
        }
     
        IEnumerable<MyDdlModel> SuscriptionTypes = Enumerable.Range(1, 20).Select(x => new MyDdlModel { Text = "item " + x, Value = x });
     
        int selectedValue { get; set; } = 3; //usually the current value should come from the model data
     
        MyModel DTOModel = new MyModel { };
     
        string ShowError { get; set; }
     
        bool _isLoading { get; set; }
     
        string ModalTitle { get; set; } = "modal title";
     
        string Height { get; set; } = "400px";
     
        bool isVisible { get; set; } = true;
     
        void OnCancel() { }
     
        void OnSummit() { }
     
    }


    Regards,
    Marin Bratanov
    Progress Telerik UI for Blazor
Back to Top