Execute javascript function when openning any kendo window

[Miguel]

Hi,

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

function autoCompleteOff() {
    // https://developer.mozilla.org/es/docs/Web/Security/Securing_your_site/desactivar_autocompletado_formulario
    $(':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.

[Ivan Danchev]

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

[Miguel]

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

[Miguel]

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

[Miguel]

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.

[Ivan Danchev]

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

[Miguel]

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.

[Miguel]

The problem is that the function is called before the elements are rendered, then the autocomplete can't be set.

[Ivan Danchev]

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

[Miguel]

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.

[Miguel]

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.

[Ivan Danchev]

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