This is a migrated thread and some comments may be shown as answers.

Control inside Window not working

1 Answer 704 Views

Window

This is a migrated thread and some comments may be shown as answers.

Alberto asked on 29 Jul 2019, 09:34 AM

window0dd6061fa1644741b31d4728629310fb.png

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>

1 Answer, 1 is accepted

answered on 29 Jul 2019, 01:46 PM

video-expected-behavior.zip

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">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

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 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>

@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>

}

@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>

</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