Customizing Grid(Columns) or Dialog(Form) in Serenity

We have generated forms and grid for movie table here. We will use these in the examples below,

Changing Grid Title

After logging in to the serenity application and navigating to MovieDataBase,  Movie, we will see the following screen. And here we can see the grid title "Movie"

now, open the file movieRow.cs and change the attribute value. This value represents the Grid Title.

Please note that grid title can also be changed from file ClassIndex.cshtml

Changing Form Title

Form title can be changed by changing the [InstanceName(FormTitle)] attribute of class classRow in ClassRow.cs file. This will also change the new button text.

Changing Field Captions in Dialog and Grid

Field caption of both form and grid can be changed from file classRow.cs by changing the attribute [DisplayName("field_name")] of respective field.

Changing Field Captions in dialog

Field caption of dialog(form) can be changed from file classForm.cs by changing the attribute [DisplayName("field_name")] of respective field. This change will overwrite the name in classRow.cs

Changing Field Captions in grid

Field caption of grid can be changed from file classColumns.cs by changing the attribute [DisplayName("field_name")] of respective field. This change will overwrite the name in classRow.cs

Changing Editor Type

Editor is the input element used for the form fields. By default serenity assigns suitable editor for every field depending upon its data type. However we still have some options of changing editor type by using following attributes,

• DateTimeEditor
• TextAreaEditor
• HtmlContentEditor
• EmailEditor
• PasswordEditor
• DateYearEditor
• ImageUploadEditor
• MultipleImageUploadEditor

These attributes can be applied to class fields in classRow.cs file. More usage of these attribute can be seen here 

Setting Initial Dialog Size With CSS (Less)

Serene auto generates CSS files. Dialog(form) size can be changed from file at  Project_name.Web\wwwroot\Content\site\site.classdatabase.less by changing the width and height.

.s-ClassDialog {
    > .size { width: 650px; height: 500px; }
    .caption { width: 150px; }

Set Default Value in Form or Grid

Add attribute [DefaultValue("value")]  or [DefaultValue(value)] to the field in classForm.cs file.

remove all buttons from toolbar

remove title from the grid
remove paging functionality
add or remove a column in grid
add or remove a field in dialog
merge two columns in grid