Window does not open after closing

[CPS]

I have a button which opens a window in a razor-page.

The first time I click the button, everything works fine. But when I close the window and click the same button again, the window is not opening.

The button and the window are nested inside a TabStrip.

This is the code for the button and the window:

<div id="tabVoucher">
      <button type="button" id="btnAddVoucher" class="btn btn-default">Create New</button>
      @(
        Html.Kendo().Window()
          .Name("winAddVoucher")
          .Animation(a =>{
            a.Open(o => o.Expand(ExpandDirection.Vertical));
          })
          .Draggable()
          .Actions(ac => ac
            .Minimize()
            .Maximize()
            .Close()
          )
          .Content(@<form method="post" class="needs-validation" novalidate>
            <div class="row">
              <div class="col-12">
                <label for="txbCode" class="form-label">Code</label>
                <input type="text" id="txbCode" class="form-control" required/>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <label for="txbFrom" class="form-label">From</label>
                @(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidFrom).ComponentType("modern").HtmlAttributes(new { id = "txbFrom" }).Deferred())
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <label for="txbTill" class="form-label">Till</label>
                @(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidTill).ComponentType("modern").HtmlAttributes(new { id = "txbTill" }).Deferred())
              </div>
            </div>
            <div class="row mt-3">
              <button type="submit" class="btn btn-default">Create</button>
            </div>
          </form>)
          .Visible(false)
          .Deferred()
      )
    </div>

And this is the js-code for the button-event:

$(document).ready(function () {
      $('#btnAddVoucher').click(function(e){
        $('#winAddVoucher').data('kendoWindow').open();
      });
    });

Any idea why this is not working as expected?

[CPS]

Hi Vasko

I use now the UI for JQuery.

<div id="winAddVoucher">
        <form method="post" class="needs-validation" novalidate>
          <div class="row">
            <div class="col-12">
              <label for="txbCode" class="form-label">Code</label>
              <input type="text" id="txbCode" class="form-control" required />
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <label for="txbFrom" class="form-label">From</label>
              @(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidFrom).ComponentType("modern").HtmlAttributes(new { id = "txbFrom" }).Deferred())
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <label for="txbTill" class="form-label">Till</label>
              @(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidTill).ComponentType("modern").HtmlAttributes(new { id = "txbTill" }).Deferred())
            </div>
          </div>
          <div class="row mt-3">
            <button type="submit" class="btn btn-default">Create</button>
          </div>
        </form>
      </div>

$(document).ready(function () {
      var winVoucher = $('#winAddVoucher');

      $('#btnAddVoucher').click(function(e){
        winVoucher.data('kendoWindow').open();
      });

      winVoucher.kendoWindow({
        visible: false,
        actions:[
          "Maximize",
          "Minimize",
          "Close"
        ]
      });
    });

Now it works as expected.

This solution is absolutely ok for me.

Thanks again for your help!

[Vasko]

Hello Mirko,

 

Based on what it's provided as code in the ticket, we couldn't get a full glimpse of what the whole scenario could be but have managed to come up with a solution that we think might be useful to you in a way. It involves controlling the Window component's display CSS property: 

1. I've upgraded the provided <script> tag to include more logic in regard to the tracking of the Window component being open or not: 

   <script>
       $(document).ready(function() {
           var isOpen = false // Boolean used for tracking whether the form is opened or not
   
           $('#btnAddVoucher').on("click", function (e) { // When we click the Create New button, manipulate the display of the Window component
               if (isOpen) {
                   $('#winAddVoucher').css("display", "none");
                   isOpen = false
               } else {
                   $('#winAddVoucher').css("display", "block");
                   isOpen = true
               }
           });
       })
   </script>

I've added some comments for clarification on what is going on.

DISCLAIMER: As stated in the beginning, we don't know the full context with the TabStrip and the nested components in it that you've told us in your ticket. If this code doesn't work or isn't the exact behavior you wanted, feel free to write another ticket, this time with more information on what exactly you are trying to achieve,  and a bigger code snippet so we could examine it and give a better solution.

 

Regards,
Vasko
Progress Telerik

[CPS]

Thanks Vasko for your answer.

What I want to achieve is quite simple: It should be possible to open the window by clicking the button, then maybe close the window and if so, to open it again.

It is still not working. Here ist the complete code (I removed the TabStrip, but it is still not working).

This is the layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - ESAdmin</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/wsad-main.min.css" asp-append-version="true" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.6.0/bootstrap/bootstrap-main.css" />
</head>
<body>
  <header>
    @await Component.InvokeAsync(nameof(ESAdmin.ViewComponents.Navigation), new{topSelected = "nad"})
  </header>
  <div class="container-fluid sidenav-main-content">
    <main role="main" class="pb-3">
      @RenderBody()
    </main>
  </div>

  <script src="https://kendo.cdn.telerik.com/2023.2.718/js/jquery.min.js"></script>
  <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="~/js/ws-main.min.js"></script>
  <script src="~/js/jszip.min.js" type="text/javascript"></script>
  <script src="https://kendo.cdn.telerik.com/2023.2.718/js/kendo.all.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2023.2.718/js/kendo.aspnetmvc.min.js"></script>
  <script src="~/lib/kendo/kendo.culture.de-CH.min.js"></script>
  <script src="~/js/kendo-ui-license.js"></script>
  @await RenderSectionAsync("Scripts", required: false)
  <script type="text/javascript">
    kendo.culture("de-CH");
  </script>
  @Html.Kendo().DeferredScripts()
</body>
</html>

And this is the razor-page:

@page
@model ESAdmin.Pages.Admin.DeductionModel
@inject ESAdmin.Services.TextService _text
@Html.AntiForgeryToken()
@{
  Layout = "~/Pages/Shared/_LayoutAdmin.cshtml";
  ViewData["Title"] = _text.GetItem("nav.admin-deductions").Value;
}
<button type="button" id="btnAddVoucher" class="btn btn-default">Neu erstellen</button>
@(
  Html.Kendo().Window()
    .Name("winAddVoucher")
    .Animation(a =>
    {
      a.Open(o => o.Expand(ExpandDirection.Vertical));
    })
    .Draggable()
    .Actions(ac => ac
      .Minimize()
      .Maximize()
      .Close()
    )
    .Content(@<form method="post" class="needs-validation" novalidate><div class="row"><div class="col-12"><label for="txbCode" class="form-label">Code</label><input type="text" id="txbCode" class="form-control" required /></div></div><div class="row"><div class="col-12"><label for="txbFrom" class="form-label">Ab</label>
          @(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidFrom).ComponentType("modern").HtmlAttributes(new { id = "txbFrom" }).Deferred())
          </div></div><div class="row"><div class="col-12"><label for="txbTill" class="form-label">Bis</label>
            @(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidTill).ComponentType("modern").HtmlAttributes(new { id = "txbTill" }).Deferred())
          </div></div><div class="row mt-3"><button type="submit" class="btn btn-default">Erstellen</button></div></form>)
    .Visible(false)
    .Modal(false)
    .Deferred()
)

@section Scripts{
  <script type="text/javascript">
    $(document).ready(function () {
      $('#btnAddVoucher').click(function(e){
        $('#winAddVoucher').data('kendoWindow').open();
      });
    });
  </script>
}

Thanks for your help.

[Vasko]

Hi Mirko,

Thank you for sharing more code snippets with us this time around, we appreciate it.

In addition, I've attached a sample project where I tested with the provided code and as far as I can tell and see, it works as intended on my end - even has the described behavior of opening/closing the form. My suggestion would be to open the sample project and see how the opening/closing is done there and implement the logic within your project.

The one thing I removed, however, is the model you have used in the provided snippet - instead of using the DateTimePickerFor(d => d.NewVoucher.ValidTill)  I'm using a regular DateTimePicker with no model, but you can try out the code with your model aswell, to see if it works this time around.

I've also added some comments in the Index.cshtml file to be more clear about what is going on in it exactly. 

Hope this time the provided answer is of some use to you, but if it still doesn't work as intended, or it's not the desired behavior, feel free to tell us. 

 

Best regards,
Vasko
Progress Telerik

[CPS]

Hi Vasko

Thanks for all your effort.

I checked your solution, but it is still not working.

I have now studied the code a little closer in DevTools (Edge Dev).

The generated HTML-Code for the window looks like this (I removed some parts to make it easier to read):

<div class="k-window" tabindex="0" data-role="draggable" role="dialog" aria-labelledby="winAddVoucher_wnd_title" style="min-width: 90px; min-height: 50px; display: none; top: 166.528px; left: 317.101px;">
	<div class="k-window-titlebar k-hstack">
		<span class="k-window-title" id="winAddVoucher_wnd_title"></span>
		<div class="k-window-titlebar-actions">
			<!-- minimize-button -->
			<!-- maximize-button -->
			<!-- close-button -->
		</div>
	</div>
	<div id="winAddVoucher" name="winAddVoucher" style="" data-role="window" class="k-window-content" tabindex="0">
		<form method="post" class="needs-validation" novalidate="">
            <!-- form-content (TextBox, DateTimePicker...) -->
		</form>
	</div>
</div>

The div with ID winAddVoucher does never have a style to hide the window. display:none or display:block is always set to the outer-div with class k-window.

So I tried to change your code from:

$('#btnAddVoucher').click(function(e){
        if(isOpen){
          $('#winAddVoucher').css("display", "none");
          isOpen = false;
        }
        else
        {
          $('#winAddVoucher').css("display", "block");
          isOpen = true
        }
      });

to:

$('#btnAddVoucher').on("click", function (e) {
        alert(isOpen);
        if (isOpen) {
          $('.k-window').css("display", "none");
          isOpen = false
        } else {
          $('.k-window').css("display", "block");
          isOpen = true
        }
      });

And I added the close-event in the window, to set IsOpen to false too.

Do you think there might be something to this?

Now, every click opens the window but...

After first click it looks like this (which is correct):

But after the second click it looks like this:

All events (like close...) are not working too.

[Vasko]

Hi Mirko,

 

I'm glad you've found a solution that works fine for you! If you have some additional questions, feel free to issue another ticket.

 

Kind regards,
Vasko
Progress Telerik