Search code examples
jquerykendo-uikendo-window

kendo window fill parent

I'm trying to create a custom action 'fillParent' for kendo dialog.

var dialog = $('#dialog').kendoWindow({
    actions: [
        'FillParent', 'Minimize', 'Maximize'
    ]
});

//FillParent definition
dialog.wrapper.find(".k-i-fillparent").click(function(e){
    e.preventDefault();
    dialog.setOptions({
        width: $(".content").width(),
        height: $(".content").height(),
        position: {
            top: 0, left: 0
        }
    })
});

This works only the first time I click on fill parent button. Why?

Any other better way to achieve this goal?

=========

Solved thanks to ezanker. However I notice that content isn't resized related to window. Solved also this problem using .restore() .

var dialog = $('#dialog').kendoWindow({
actions: ['FillParent', 'Minimize', 'Maximize']
});

//FillParent definition
dialog.wrapper.on("click", ".k-i-fillparent", function(e){
    dialog.setOptions({
        width: $(".content").width(),
        height: $(".content").height(),
        position: {top: 0, left: 0}
    });
    dialog.restore();
    e.preventDefault();
});
Solution

  • Try it using the jQuery .on() and delegate to the .k-i-fillparent selector:

    dialog.wrapper.on("click", ".k-i-fillparent", function(e){
      dialog.setOptions({
          width: $(".content").width(),
          height: $(".content").height() - 30,
          position: {
              top: $(".content").offset().top, left: $(".content").offset().left
          }
      });
    e.preventDefault();
});

    Working DEMO