Kendo Grid Edit mode Popup - Setting window Width

8 posts, 0 answers
  1. Leigh Barratt
    Leigh Barratt avatar
    3 posts
    Member since:
    Jun 2012

    Posted 02 Aug 2012 Link to this post

    Hi,

    I have used a Kendo Grid and set the editable mode as Popup and used custom template for editing, but I need increase the default width of the popup as the content of the template doesn't fit in the popup.

    I used Window Property for the Editable and specified the Width. It applies the Title but doesn't apply the width to the window.

    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Edit School Details").Name("editWindow").HtmlAttributes(new { id = "editWindow", @width = "700px" })))


    Complete Code below for reference:-

    @(Html.Kendo().Grid(Model)
        .Name("SchoolGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.SchoolID).Width("100px");
            columns.Bound(p => p.Name);
            columns.Bound(p => p.Campus).Width("100px");
            columns.Bound(p => p.StateCode).Width("100px");
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width("180px");
        })
        .ToolBar(tb => tb.Create())
        .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Edit School Details").Name("editWindow").HtmlAttributes(new { id = "editWindow", @width = "700px" })))
        .Pageable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.SchoolID))
            .Read("Index""School")
            .Update("Edit""School")
            .Create("Create""School")
            .Destroy("Delete""School")
        )
    )


    Please help the needful

    Cheers
  2. Ratna
    Ratna avatar
    6 posts
    Member since:
    Jul 2012

    Posted 05 Aug 2012 Link to this post

    Hi Barratt,

    I had the same issue but I solve it now.

    Instead of this line:
    .HtmlAttributes(new { id = "editWindow", @width = "700px" })
    use below line:
    .HtmlAttributes(new { @style = "width:700px;" })

    This worked for me.
  3. Travis
    Travis avatar
    226 posts
    Member since:
    Jan 2003

    Posted 23 Aug 2012 Link to this post

    How would you set this with the kendo web version instead of the MVC razor version I wonder?
  4. Developix
    Developix avatar
    15 posts
    Member since:
    Jan 2011

    Posted 06 Sep 2012 Link to this post

    Ratna solution did not work for me.

    Put the following code in the Edit event handler of the grid:

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

    Please extend your MVC APIs, Telerik MVC is still lightyears ahead!!!
  5. Nick
    Nick avatar
    2 posts
    Member since:
    Jun 2012

    Posted 11 Sep 2012 Link to this post

    editable:
    {
        mode: "popup"
        , template: $("#PopupTemplate").html()
    },
    edit: function (e) 
    {
        var editWindow = this.editable.element.data("kendoWindow");
        editWindow.wrapper.css({ width: 600 });
    },

    Travis see the answer you are looking for above.  Good luck!!
  6. Nattapong
    Nattapong avatar
    6 posts
    Member since:
    Jun 2013

    Posted 25 Jun 2013 Link to this post

    .Editable(editable => editable.Mode(GridEditMode.PopUp)                                 
                                      .TemplateName("SectionTemplate")
                                      .Window( w => w.Width(700))))
    This worked for me. 

    Window property    Width(int pixelWidth)  

  7. David
    David avatar
    22 posts
    Member since:
    Jun 2013

    Posted 10 Mar 2014 in reply to Nattapong Link to this post

    Thanks Nattapong!
  8. Marty
    Marty avatar
    1 posts
    Member since:
    Sep 2019

    Posted 31 Jan 2020 in reply to Nick Link to this post

    Thanks this worked perfectly for what I needed.
Back to Top