Kendo Grid Edit mode Popup - Setting window Width

[Leigh Barratt]

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

[Ratna]

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.

[Travis]

How would you set this with the kendo web version instead of the MVC razor version I wonder?

[Developix]

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!!!

[Nick]

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!!

[Nattapong]

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

This worked for me. 

Window property    Width(int pixelWidth)  

[David]

Thanks Nattapong!

[Marty]

Thanks this worked perfectly for what I needed.