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

Execute javascript function when openning any kendo window

11 Answers 2124 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Miguel
Top achievements
Rank 1
Miguel asked on 03 Apr 2019, 10:40 AM

Hi,

In our app we have a js frunction to prevent the autocomplete of inputs and textboxes:

function autoCompleteOff() {
    $(':text, form').attr('autocomplete', 'nope');
}

The function it's loaded when the app starts so that be executed in every form we have.

The problem that we have is that when we open a kendo window the function it's not working and the text boxes show possible options to select.

 

We would like know how to load this function and prevent these suggestions.

We could add a call in each window but it does not seem like the best option. We believe that it should be defined only once. Any idea how to fix it?

Thanks in advance.

11 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 05 Apr 2019, 10:37 AM
Hi Miguel,

Could you provide more details on you scenario and on how opening a Window is related to the inputs? Are the inputs placed within the Window by using the .Content() option? Is the Window's content loaded through AJAX? Have you tried calling the function in the Window's Open event handler?

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Miguel
Top achievements
Rank 1
answered on 05 Apr 2019, 10:59 AM

Hi,

I didn't know about the event handler, I'm going to investigate.

About the windows are loaded like this:

function anadirLicencia() {
    var window = $("#windowLicencias").data("kendoWindow");
    window.title("@Html.Raw(Colaboradores.titleForLicencias)");
    window.refresh({
        modal: true,
        url: '@Url.Action("EditLicencia", "LicenciasMunicipios")',
        data: { idLicencia: -1 }
    }).center().open();
}

 

function showWindowEditLicencia(_idLicencia) {
        rowIdLicencia = _idLicencia;
        var window = $("#windowLicencias").data("kendoWindow");
        window.title("@Html.Raw(Colaboradores.titleForLicencias)");
        window.refresh({
            url: '@Url.Action("EditLicencia", "LicenciasMunicipios")',
            data: { idLicencia: _idLicencia }
        }).center().open();
    }

And the window declaration:

@(Html.Kendo().Window()
      .Name("windowMunicipios")
      .Width(930)
      .Resizable()
      .Modal(true)
      .Visible(false)
      .Title("")
      .Draggable(true)
      .Actions(actions =>
      {
          if ((bool)ViewData["canAdd"] || (bool)ViewData["canEdit"]) actions.Custom("Save");
          actions.Close();
      })
      .LoadContentFrom("EditMunicipio", "LicenciasMunicipios", new { idMunicipio = -1 })
)
0
Miguel
Top achievements
Rank 1
answered on 05 Apr 2019, 11:00 AM

Hi again,

I've pasted a wrong window declaration. The correct window is:

@(Html.Kendo().Window()
      .Name("windowLicencias")
      .Title(Colaboradores.titleForLicencias)
      .Width(930)
      .Resizable()
      .Visible(false)
      .Modal(true)
      .Title("")
      .Draggable(true)
      .Actions(actions =>
      {
          if ((bool)ViewData["canDelete"]) actions.Custom("trash");
          if ((bool)ViewData["canAdd"] || (bool)ViewData["canEdit"]) actions.Custom("Save");
          actions.Close();
      })
      .LoadContentFrom("EditLicencia", "LicenciasMunicipios", new { idLicencia = -1 })
)
0
Miguel
Top achievements
Rank 1
answered on 05 Apr 2019, 11:04 AM

Hi,

I've been looking the window open event handler. The problem that I've using this is that I should edit all the windows in the app, and add it in every new window. I was looking for a way to only add it in one place and for all the windows.

Would be possible override the window open event handler?

Thanks in advance.

0
Ivan Danchev
Telerik team
answered on 09 Apr 2019, 07:56 AM
Hi Miguel,

You can attach a single Open event handler to all the Windows on your page as demonstrated below:
function onOpen (e) {
    console.log("open event handler");
}
 
$(document).ready(function () {
    var windows = $(".k-window-content").each(function (index) {
        $(this).data("kendoWindow").bind("open", onOpen);
    });
})

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Miguel
Top achievements
Rank 1
answered on 09 Apr 2019, 09:33 AM

Hi,

It's not working, the function is called when the view is loaded and when the window is opened it's not called again. First I've tried with my function autocompleteoff (the function I want to execute): 

// binding, added on the $(document).ready(function () {
var windows = $(".k-window-content").each(function (index) {
     $(this).data("kendoWindow").bind("open",  autoCompleteOff);
});
 
// function to execute on window open
function autoCompleteOff() {
    $(':text, form').attr('autocomplete', 'off');
}

and the autocomplete off it's not setted on textboxes. Then I've changed to this function:

var windows = $(".k-window-content").each(function (index) {
    $(this).data("kendoWindow").bind("open", alert('***** OPEN *****'));
});

and the alert it's thrown when the main page it's loaded, not when the window it's opened. I've also tried with activated event and it's not working too.

I'm declaring my window and I'm calling it like this:

// KENDO WINDOW DECLARATION
    @(Html.Kendo().Window()
          .Name("windowLicencias")
          .Title(Colaboradores.titleForLicencias)
          .Width(930)
          .Resizable()
          .Visible(false)
          .Modal(true)
          .Title("")
          .Draggable(true)
          .Actions(actions =>
          {
              if ((bool)ViewData["canDelete"]) actions.Custom("trash");
              if ((bool)ViewData["canAdd"] || (bool)ViewData["canEdit"]) actions.Custom("Save");
              actions.Close();
          })
          .LoadContentFrom("EditLicencia", "LicenciasMunicipios", new { idLicencia = -1 })

 

// FUNCTION TO OPEN WINDOW

    function showWindowEditLicencia(_idLicencia) {
        rowIdLicencia = _idLicencia;
        var window = $("#windowLicencias").data("kendoWindow");
        window.title("@Html.Raw(Colaboradores.titleForLicencias)");
        window.refresh({
            url: '@Url.Action("EditLicencia", "LicenciasMunicipios")',
            data: { idLicencia: _idLicencia }
        }).center().open();
    }

Also I've tried to execute the bind with other jquery options and I'm obtainning the same result:

$(".k-window-content").data("kendoWindow").bind("open", alert('***** OPEN *****'));
$(".k-window-content").kendoWindow({
    open: alert('***** OPEN *****')
}).data("kendoWindow");

Any idea what should I do? I continue investigating.

Thanks for your help.

0
Miguel
Top achievements
Rank 1
answered on 09 Apr 2019, 11:18 AM
The problem is that the function is called before the elements are rendered, then the autocomplete can't be set.
0
Ivan Danchev
Telerik team
answered on 11 Apr 2019, 07:50 AM
Hello Miguel,

At my end the textbox is found on opening the Window and its autocomplete attribute is successfully set to "off". See this screencast. The sample runnable project I tested this in is attached to this reply. Could you modify it accordingly reproducing the issue in it and attach it back for further review?

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Miguel
Top achievements
Rank 1
answered on 15 Apr 2019, 06:36 AM

Hi,

Looking your code I've seen the difference. Before call the function to add the autocomplete you are openning the window and hidding it:

$("#undo").bind("click", function() {
    $("#windowMunicipios").data("kendoWindow").open();
    $("#undo").hide();
});

After you set the autocomplete:

var windows = $(".k-window-content").each(function (index) {
    $(this).data("kendoWindow").bind("open", autoCompleteOff);
});

If we don't do the first doesn't works, that's my case, the function was called but the autocomplete was not setted because the object is not rendered yet.

0
Miguel
Top achievements
Rank 1
answered on 15 Apr 2019, 06:47 AM

Would be nice an event that it's executed when the window it's fully loaded to don't have to work with windows inside divs and works hidding/showing them, for me it's not pretty cool, moreover I should change a lot of code.

Thanks for your time.

0
Ivan Danchev
Telerik team
answered on 17 Apr 2019, 06:53 AM
Hi Miguel,

Actually the Window is initially hidden through configuration:
.Visible(false)

What this code:
$("#undo").bind("click", function() {
    $("#windowMunicipios").data("kendoWindow").open();
    $("#undo").hide();
});
does is it opens the Window on clicking the button and hides the button with id "undo", not the the Window. So the hide() and show() methods are used for the hiding/showing the button.

As for an event that fires when the Window loads its content, at the moment such event is not exposed. You could consider using a timeout in the Window's open event to delay setting the attributes a little bit.

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Miguel
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Miguel
Top achievements
Rank 1
Share this question
or