CODEWITHSUNDEEP
asp.net-mvckendo-ui
Buster
Buster

Reputation: 373

Setting the width of Kendo UI Grid Popup (MVC)

I'm using the MVC Wrappers of Kendo UI and I cannot set the width of the popup. I've tried two methods and none are working. Here's what I've tried:

.Editable(edit => edit.Mode(GridEditMode.Popup)
    .TemplateName("Create")
    .Window(w => w.Title("Add Interruption")
        .Name("addInterruption")
        .Width(700)))

and

.Editable(edit => edit.Mode(GridEditMode.Popup)
    .TemplateName("Create")
    .Window(w => w.Title("Add Interruption")
        .Name("addInterruption")
        .HtmlAttributes(new { style="width:700px;" })))

Height doesn't work either.

How do you set the width of the popup window? Thanks!

UPDATE: For anyone else struggling with this, here's the fix:

.k-edit-form-container { width: auto;}

This is found in the kendo.common.min.css file.

Upvotes: 13

Views: 13931

Answers (2)

Rob
Rob

Reputation: 171

For me,

    .k-edit-form-container { width: auto;}

was needed when binding in server mode. I just added it as a style in the view instead of editing the kendo css file.

The other answer,

$("#NameOfTheGrid").data().kendoGrid.options.editable.window.width = "1000px";

worked great with ajax binding but not with server binding.

Upvotes: 7

Petur Subev
Petur Subev

Reputation: 20223

Sadly the Settings you applied in both of your snippets are not serialized and not applied to the window at all when using Ajax binding (not even sure about Server Binding).

Basically to set the Width I suggest you to use the following JavaScript when the page has loaded:

$("#NameOfTheGrid").data().kendoGrid.options.editable.window.width = "1000px";

Upvotes: 9

Related Questions