CODEWITHSUNDEEP
kendo-uikendo-grid
Severin
Severin

Reputation: 183

How can I widen the popup window in Kendo UI grid?

I want to widen the popup window in Kendo UI grid. So that also the elements in it fill the window.

In the answer How do I Change window size on kendo grid editor template? only the window is made wider, but not also the elements contained in it.

Upvotes: 0

Views: 482

Answers (3)

Sayas Khan
Sayas Khan

Reputation: 21

For Kendo ASP.NET MVC users, add the following code:

.Editable(editable => editable.Mode(GridEditMode.PopUp)
    .Window(s => s.Height(700).Width(1100)))

Upvotes: 0

Carsten Franke
Carsten Franke

Reputation: 1669

Simple provide the width in your grid definition: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.window or see https://stackoverflow.com/a/30778406/4944034 for a practical example.

Upvotes: 1

Severin
Severin

Reputation: 183

in the area of kendoGrid add the following code to the event edit:

jQuery("#grid").kendoGrid({
  ...
  edit: function(e){
    kendoUi_popUpEditWindow_setWidth('950px');
  },
  ...
})

and the corresponding function:

function kendoUi_popUpEditWindow_setWidth(width){
  if(typeof(width) != "string" || (width + '').indexOf("px") == -1 ){
   width = "800px";
  }
  left = (jQuery( window ).width() - parseInt(width)) / 2;
  left = left + "px";
  jQuery(".k-widget.k-window").css('left', left);
  jQuery(".k-edit-form-container").attr('style', 'width:' + width);
  jQuery(".k-edit-form-container .k-edit-field").children().attr('style', 'width:100%');
}

Upvotes: 0

Related Questions