how to resize grid editable popup window

[hector ventura]

Hi:
I'm using Editable Mode: "popup", within a template, and I can't find information about how to set width of the popup windows, here is part of my code:
I need to increase the size (width of my editing PopUp Window)

$(function() {

            

            $("#grid_cate").kendoGrid({

                dataSource: {

                    transport: {

                        read: "cate_lista.php",

                        update: {

                            url: "cate_lista.php",

                            type: "POST"

                        },

                        create: {

                            url: "cate_update.php",

                            dataType: 'jsonp',

                            type: "POST"

                        },

                        destroy: {

                            url: "cate_delete.php",

                            dataType: 'jsonp',

                            type: "POST"

                        },

                         

                    },

                     

                     

                    schema: {  

                        data: "data",

                        model: {

                            id: "recid",

                            fields: {

                                catego: { validation: { required: true} },

                                estatus: { validation: { required: true} },

                                foto: { validation: { required: true} }

                            }

                        }

                    }

                     

                },

                columns: [

                    { field: "catego",title: "CATEGORIA" },

                    { field: "estatus",title: "ESTATUS", width: "100px" },

                    { field: "foto",title: "FOTO", width: "160px" },

                     

                    { command: ["edit" , "destroy"], title: "OPCIONES", width: "200px" }],

                editable: {

                        mode: "popup",

                        template: $("#popup_editor").html()

                },

                save: function(e,c){

                        e.model.set("foto",$("#uploadedFile").val());

                    },

                  

                 scrollable: true,

                 navigable: true,

                 pageable: true,

                 selectable: true,

                 sortable: true,

                 toolbar: [ "create"]

            });

             

        });

        function onSuccess(e){ 

                $("#uploadedFile").val(e.files[0].name);

        }

 

    </script>

<script  id="popup_editor" type="text/x-kendo-template"  >

             

            <div class="customClass">ESPAÑOL</div>

            <div class="k-edit-label">

                <label for="Estatus">Estatus:</label>

            </div>

                    <select option name='estatus'>

                         <option   value='Activo'>Activo</option>

                         <option   value='Pendiente'>Pendiente</option>

                    </select>

            <br>

             

            <div class="k-edit-label">

                <label for="Categoria">Categoria:</label>

            </div>

            <input type="text" class="k-input k-textbox" name="catego" data-bind="value:catego">

                 

             

             

            <div class="k-edit-label">

                <label for="Descripcion">Descripcion:</label>

            </div>

             

            <textarea cols="47" rows="6" name="descripcion"></textarea>

            <div class="customClass">INGLES</div>

            <div class="k-edit-label">

                <label for="Categoria_ing">Categoria:</label>

            </div>

            <input type="text" class="k-input k-textbox" name="catego_ing" data-bind="value:catego_ing">

            <div class="k-edit-label">

                <label for="Descripcion_ing">Descripcion:</label>

            </div>

            <textarea cols="47" rows="6" name="desc_ing"></textarea>

             

            <div class="customClass">SELECCIONAR IMAGEN:</div>

            <image src="test/${foto}" width="100"></image>

            <input name="foto" type="hidden" id='uploadedFile' data-bind="value: foto" />

            <input type="file" id="files" data-role="upload" data-async='{"saveUrl": "save.php","autoUpload": "true"}' data-success="onSuccess" name="files" />

             

                 

             

 

</script>

[Dimo]

Hello Hector,

A possible appoach is to set some width on the fly in the Grid's edit event. The Window will have to be centered again afterwards.

function setPopupDimensions(ev) {
    window.setTimeout(function(){
        $(".k-edit-form-container").parent().width(800).height(400).data("kendoWindow").center();
    }, 100);
}

Kind regards,
Dimo
the Telerik team

[hector ventura]

Hello Dimo :
 Thank you for your response and sorry for my ignorance.
Where do I put this function ?
Do I have to change this line . $(".k-edit-form-container").parent().width(800).height(400).data("kendoWindow").center(); 

To this:
$("#popup_editor").parent().width(800).height(400).data("kendoWindow").center(); 

Beacuse this is the ID of my template
<script  id="popup_editor" type="text/x-kendo-template"  > 

I just do that, but it's not working,

Best regards,
Hector

[Dimo]

Hello Hector,

The setPopupDimensions function in my previous reply is a standard event handler for the Grid's edit event. The following Grid demo shows how to attach and use event handlers with the Grid widget:

Grid events

You don't need to modify the provide script.

Greetings,
Dimo
the Telerik team

[Bese]

Hi,

It can be a good practice to use the following css:

.k-edit-form-container {

    width: auto;

}

In that case the width of the editor window will be determined by the content's size.

Best regards,
Bese

[Jun]

Thanks Bese, that worked for me.

[Greg]

To complete the example given by Dimo above you need an additional line of code to re-size the container within the popup window or your fields still wont fit. I chose a lightly small value with the height and width of the actual container to avoid scroll bars.

function setPopupDimensions(ev) {

    window.setTimeout(function () {

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

        $(".k-edit-form-container").width(620).height(350);

    }, 100);

}

[Shide]

What is unit used in following statement?
 $(".k-edit-form-container").parent().width(800).height(600).data("kendoWindow").center();

I have an EditorTemplate which has a <table width = "500"> but if I set the popup to width(800).height(600), it can't cover the width of the <Table> and I have to scroll to the right to view the rest, of change my code  to width(900).height(600)

[Dimo]

Hello,

jQuery treats int width values as pixel values.

On a side note, width="500" is not a valid way to set a width. Use a width style instead. Normally, if the table content does not fit, the table will expand.

Regards,
Dimo
the Telerik team

[DJo]

+1 to Bese.