Execute javascript function when openning any kendo window

12 posts, 0 answers
  1. Miguel
    Miguel avatar
    17 posts
    Member since:
    Jan 2019

    Posted 03 Apr 2019 Link to this post

    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.

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2025 posts

    Posted 05 Apr 2019 Link to this post

    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.
  3. Miguel
    Miguel avatar
    17 posts
    Member since:
    Jan 2019

    Posted 05 Apr 2019 in reply to Ivan Danchev Link to this post

    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 })
    )
  4. Miguel
    Miguel avatar
    17 posts
    Member since:
    Jan 2019

    Posted 05 Apr 2019 in reply to Miguel Link to this post

    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 })
    )
  5. Miguel
    Miguel avatar
    17 posts
    Member since:
    Jan 2019

    Posted 05 Apr 2019 Link to this post

    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.

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2025 posts

    Posted 09 Apr 2019 Link to this post

    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.
  7. Miguel
    Miguel avatar
    17 posts
    Member since:
    Jan 2019

    Posted 09 Apr 2019 in reply to Ivan Danchev Link to this post

    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.

  8. Miguel
    Miguel avatar
    17 posts
    Member since:
    Jan 2019

    Posted 09 Apr 2019 Link to this post

    The problem is that the function is called before the elements are rendered, then the autocomplete can't be set.
  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2025 posts

    Posted 11 Apr 2019 Link to this post

    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.
  10. Miguel
    Miguel avatar
    17 posts
    Member since:
    Jan 2019

    Posted 15 Apr 2019 in reply to Ivan Danchev Link to this post

    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.

  11. Miguel
    Miguel avatar
    17 posts
    Member since:
    Jan 2019

    Posted 15 Apr 2019 Link to this post

    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.

  12. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2025 posts

    Posted 17 Apr 2019 Link to this post

    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.
Back to Top