|
| 1 | +--- |
| 2 | +title: Column Layout and Scrolling in the Grid Popup Edit Form |
| 3 | +description: How to organize the Grid popup edit form in columns and enable scrolling. |
| 4 | +type: how-to |
| 5 | +page_title: Enable Columns and Scrolling in the Grid Popup Edit Form |
| 6 | +slug: grid-popup-edit-form-columns |
| 7 | +position: |
| 8 | +tags: grid,popup,edit,form,columns,multicolumn,scroll |
| 9 | +ticketid: 1534563,1536862 |
| 10 | +res_type: kb |
| 11 | +--- |
| 12 | + |
| 13 | +## Description |
| 14 | + |
| 15 | +How do I display the Grid popup edit form in a multiple-column layout? How do I show a scrollbar if the number of Grid columns to edit is too large and overflows the page? |
| 16 | + |
| 17 | +## Solution |
| 18 | + |
| 19 | +Use the [`column-count` CSS style](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns) to apply a column-based layout in the Grid popup edit form. The following CSS rule targets TelerikForms inside TelerikWindows: |
| 20 | + |
| 21 | +````css |
| 22 | +.k-window .k-form { |
| 23 | + column-count: 2; |
| 24 | +} |
| 25 | +```` |
| 26 | + |
| 27 | +In addition to column layout, you can also limit the maximum popup Window height. If the form is larger, a scrollbar will appear automatically. The following CSS rule targets the TelerikWindow content container. |
| 28 | + |
| 29 | +````css |
| 30 | +.k-window-content { |
| 31 | + max-height: 300px; |
| 32 | +} |
| 33 | +```` |
| 34 | + |
| 35 | +> If you place the above CSS rules in the global app stylesheet (usually `site.css`), they will affect **all** TelerikWindows in the app. To avoid this, add the CSS code to the Razor file which holds the Grid. [CSS isolation (scoped styles)]({%slug common-kb-css-isolation%}) will not work, because the Window is rendered as a child of the page `<body>`, i.e. outside the Razor component. |
| 36 | +> |
| 37 | +> For full control of the edit form layout and more advanced customizations, you can also use a [custom edit form in a separate TelerikWindow](https://github.com/telerik/blazor-ui/tree/master/grid/custom-popup-form). |
| 38 | +
|
| 39 | +>caption Grid Popup Edit Form Columns and Scrolling |
| 40 | +
|
| 41 | +````CSHTML |
| 42 | +@* Grid popup edit form columns and scrolling *@ |
| 43 | +
|
| 44 | +<style> |
| 45 | +
|
| 46 | + .k-window .k-form { |
| 47 | + column-count: 2; |
| 48 | + } |
| 49 | +
|
| 50 | + .k-window-content { |
| 51 | + max-height: 240px; |
| 52 | + /* you can also use relative units, e.g. 60% of the viewport height: */ |
| 53 | + /* max-height: 60vh; */ |
| 54 | + } |
| 55 | +
|
| 56 | +</style> |
| 57 | +
|
| 58 | +<TelerikGrid Data=@GridData EditMode="@GridEditMode.Popup"> |
| 59 | + <GridToolBar> |
| 60 | + <GridCommandButton Command="Add" Icon="add">Add New Item</GridCommandButton> |
| 61 | + </GridToolBar> |
| 62 | + <GridColumns> |
| 63 | + <GridCommandColumn Width="120px"> |
| 64 | + <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton> |
| 65 | + </GridCommandColumn> |
| 66 | + @for (int i = 1; i <= 15; i++) |
| 67 | + { |
| 68 | + <GridColumn Field="@("FieldName" + i.ToString() )" |
| 69 | + Title="@("Field " + i.ToString() )" |
| 70 | + Width="100px"> |
| 71 | + <Template> |
| 72 | + foo bar |
| 73 | + </Template> |
| 74 | + </GridColumn> |
| 75 | + } |
| 76 | + </GridColumns> |
| 77 | +</TelerikGrid> |
| 78 | +
|
| 79 | +@code { |
| 80 | + public List<Product> GridData { get; set; } |
| 81 | +
|
| 82 | + protected override void OnInitialized() |
| 83 | + { |
| 84 | + GridData = new List<Product>(); |
| 85 | +
|
| 86 | + for (int i = 0; i < 5; i++) |
| 87 | + { |
| 88 | + GridData.Add(new Product() { ID = i }); |
| 89 | + } |
| 90 | + } |
| 91 | +
|
| 92 | + public class Product |
| 93 | + { |
| 94 | + public int ID { get; set; } |
| 95 | + public string FieldName1 { get; set; } |
| 96 | + public string FieldName2 { get; set; } |
| 97 | + public string FieldName3 { get; set; } |
| 98 | + public string FieldName4 { get; set; } |
| 99 | + public string FieldName5 { get; set; } |
| 100 | + public string FieldName6 { get; set; } |
| 101 | + public string FieldName7 { get; set; } |
| 102 | + public string FieldName8 { get; set; } |
| 103 | + public string FieldName9 { get; set; } |
| 104 | + public string FieldName10 { get; set; } |
| 105 | + public string FieldName11 { get; set; } |
| 106 | + public string FieldName12 { get; set; } |
| 107 | + public string FieldName13 { get; set; } |
| 108 | + public string FieldName14 { get; set; } |
| 109 | + public string FieldName15 { get; set; } |
| 110 | + } |
| 111 | +} |
| 112 | +```` |
0 commit comments