how to resize grid editable popup window

10 posts, 0 answers
  1. hector ventura
    hector ventura avatar
    3 posts
    Member since:
    Aug 2012

    Posted 27 Aug 2012 Link to this post

    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>
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 Aug 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. hector ventura
    hector ventura avatar
    3 posts
    Member since:
    Aug 2012

    Posted 29 Aug 2012 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 03 Sep 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Bese
    Bese avatar
    3 posts
    Member since:
    Dec 2010

    Posted 12 Sep 2012 Link to this post

    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
  7. Jun
    Jun avatar
    47 posts
    Member since:
    Sep 2006

    Posted 12 Sep 2012 Link to this post

    Thanks Bese, that worked for me.
  8. Greg
    Greg avatar
    3 posts
    Member since:
    Aug 2012

    Posted 24 Oct 2012 Link to this post

    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);
    }
  9. Shide
    Shide avatar
    1 posts
    Member since:
    Jul 2012

    Posted 11 Dec 2012 Link to this post

    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)

  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. DJo
    DJo avatar
    23 posts
    Member since:
    Nov 2012

    Posted 21 May 2013 Link to this post

    +1 to Bese.
Back to Top
Kendo UI is VS 2017 Ready