How do I Change window size on kendo grid editor t

Question

I have a editor template for my kendo grid defined as

<script id="my-editor-template" type="text/x-kendo-template"> 
    <div class="k-edit-label">
        <label for="ContactName">Contact</label>
    </div>
    <div data-container-for="ContactName" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
    </div>
    <!-- more fields, etc -->
</script>

In my grid definition, I definte editable like this:

        editable =
        {
            mode: 'popup',
            template: kendo.template($('#my-editor-template').html()),
            confirmation: 'Are you sure you want to delete rec'
        };

But I would like to make the popup window wider. I tried wrapping the contents of my template in a

<div style="width: 800px;"></div> 

but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).

I know I can do a

$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();

after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?

Answer 1

Kendo grid popup window is using kendo window, so you can set the height and width like this

editable: {
  mode: "popup",
  window: {
      title: "My Custom Title",
      animation: false,
      width: "600px",
      height: "300px",
  }
}

Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.

Answer 2

After an hour+ long research following code fixed my issue. I had to put this code in the edit event.

$(".k-edit-form-container").attr('style', "width:auto");