I've been using DevExpress's ASPxGridView on a fairly big ASP.Net project for the past few months. When I started using it, I was really frustrated. The documentation was written more like a class reference guide and the tutorials were fairly basic in nature.
The real MEAT of the controls didn't seem to be there - all this great potential but where?
The Community forums was a great place to look for details but as with many communities, it's hard to find all the answers.
Hopefully, this post will help identify some of the areas where developers may be having some problems:
Fixing Edit Forms
1. Edit Form Column Layouts
The ASPxGridView lets you do direct "form" editing but when you first do it, the boxes usually go two per line. To resolve this, add
<SettingsEditing EditFormColumnCount="1" />
right under the grid definition.
2. Changing Edit Captions
You have a column that is titled Years but in the edit form, you want it to say "Years working for company". Within the column definition, add
<dxwgv:GridViewDataTextColumn FieldName="Years" Caption="Years"/>
<EditFormSettings Caption="Years working for the company " />
</dxwgv:GridViewDataTextColumn>
Grouping Grids
The ASPxGridView lets you group the grids automatically.
1) Call grid.ExpandAll( ) right after the DataBind (or the Page_Load) to automatically open the groups (by default, they are closed)
2) The Group header starts by showing the name of the Group a colon and then the name. In the Grid definition, add"
Settings-GroupFormat="{1} {2}"
Commands
One thing I didn't like about the Grid View was that it would add New/Edit/Delete buttons on each row. Why show New on each one? I originally put a hyperlink on the top of the grid but instead, I've started to use the HeaderTemplate option instead.
Here's my initial Column set:
<Columns>
<dxwgv:GridViewCommandColumn VisibleIndex="0">
<NewButton Text="New" Visible="false">
</NewButton>
<EditButton Text="Edit" Visible="true">
</EditButton>
<DeleteButton Text="Delete" Visible="true">
</DeleteButton>
<HeaderTemplate><dxe:ASPxHyperLink ID="lblNew" runat=server Text="New" Font-Underline=true Cursor=pointer><ClientSideEvents Click="function(s,e){officers.AddNewRow();}" /></dxe:ASPxHyperLink></HeaderTemplate>
</dxwgv:GridViewCommandColumn>
The end result looks like this
Grid Form Validation
You can easily make a field mandatory in a grid by setting the IsRequired property to true. But there are two gotchas with this. By default, this puts a little exclamation mark by the field when you hit the Update button. The ErrorText property is then put into the tooltip.
Set the ErrorDisplayMode property to Text instead of the default which is ImagewithTooltip.
Another way to better manage this process is to put the validation settings directly into the code instead of the property settings.
loCol = grid.Columns(0)
With locol.PropertiesTextEdit.ValidationSettings
.RegularExpression.ValidationExpression = regexp
.ErrorDisplayMode = DevExpress.Web.ASPxEditors.ErrorDisplayMode.Text
.RegularExpression.ErrorText = msg
.RequiredField.IsRequired = True
End With
The above code also shows one of the other cool tips - instead of trying to validate the text after, by setting the ValidationExpression property, the input can be immediately validated via Regular Expression.
Column Widths
By default, the ASPxGridView will resize the widths based on the content. Some of our users found this disorienting when they edited the grid - because it would constantly change. Solution? Explicitly set the widths of each column.
I'm sure there are a lot more and some of the above are likely pretty obvious but I wish I had known about them when I first got started. I'll be adding to this post (or creating new ones) as I move forward.
The other cool part about devExpress is that a number of their developers are on Twitter, making it easier to find them and get help.
The real MEAT of the controls didn't seem to be there - all this great potential but where?
The Community forums was a great place to look for details but as with many communities, it's hard to find all the answers.
Hopefully, this post will help identify some of the areas where developers may be having some problems:
Fixing Edit Forms
1. Edit Form Column Layouts
The ASPxGridView lets you do direct "form" editing but when you first do it, the boxes usually go two per line. To resolve this, add
<SettingsEditing EditFormColumnCount="1" />
right under the grid definition.
2. Changing Edit Captions
You have a column that is titled Years but in the edit form, you want it to say "Years working for company". Within the column definition, add
<dxwgv:GridViewDataTextColumn FieldName="Years" Caption="Years"/>
<EditFormSettings Caption="Years working for the company " />
</dxwgv:GridViewDataTextColumn>
Grouping Grids
The ASPxGridView lets you group the grids automatically.
1) Call grid.ExpandAll( ) right after the DataBind (or the Page_Load) to automatically open the groups (by default, they are closed)
2) The Group header starts by showing the name of the Group a colon and then the name. In the Grid definition, add"
Settings-GroupFormat="{1} {2}"
Commands
One thing I didn't like about the Grid View was that it would add New/Edit/Delete buttons on each row. Why show New on each one? I originally put a hyperlink on the top of the grid but instead, I've started to use the HeaderTemplate option instead.
Here's my initial Column set:
<Columns>
<dxwgv:GridViewCommandColumn VisibleIndex="0">
<NewButton Text="New" Visible="false">
</NewButton>
<EditButton Text="Edit" Visible="true">
</EditButton>
<DeleteButton Text="Delete" Visible="true">
</DeleteButton>
<HeaderTemplate><dxe:ASPxHyperLink ID="lblNew" runat=server Text="New" Font-Underline=true Cursor=pointer><ClientSideEvents Click="function(s,e){officers.AddNewRow();}" /></dxe:ASPxHyperLink></HeaderTemplate>
</dxwgv:GridViewCommandColumn>
The end result looks like this
Grid Form Validation
You can easily make a field mandatory in a grid by setting the IsRequired property to true. But there are two gotchas with this. By default, this puts a little exclamation mark by the field when you hit the Update button. The ErrorText property is then put into the tooltip.
Set the ErrorDisplayMode property to Text instead of the default which is ImagewithTooltip.
Another way to better manage this process is to put the validation settings directly into the code instead of the property settings.
loCol = grid.Columns(0)
With locol.PropertiesTextEdit.ValidationSettings
.RegularExpression.ValidationExpression = regexp
.ErrorDisplayMode = DevExpress.Web.ASPxEditors.ErrorDisplayMode.Text
.RegularExpression.ErrorText = msg
.RequiredField.IsRequired = True
End With
The above code also shows one of the other cool tips - instead of trying to validate the text after, by setting the ValidationExpression property, the input can be immediately validated via Regular Expression.
Column Widths
By default, the ASPxGridView will resize the widths based on the content. Some of our users found this disorienting when they edited the grid - because it would constantly change. Solution? Explicitly set the widths of each column.
I'm sure there are a lot more and some of the above are likely pretty obvious but I wish I had known about them when I first got started. I'll be adding to this post (or creating new ones) as I move forward.
The other cool part about devExpress is that a number of their developers are on Twitter, making it easier to find them and get help.
Comments