Current filter:
                                You should refresh the page.
                                  • Hi,
                                    Could you please clarify for me what are your recommendations in terms of using data editors on DxForm  for numeric properties of the bound object?
                                    Binding Text editor results in type mismatch.

                                    The only "numeric" data editor you seem to offer is an integer data spinner, which is not suitable for a wide variety of numeric fields.

                                    Similarly, I would like to provide data editors for fields that must satisfy certain RegEx masks.
                                    Obviously I can (and) do annotate the property with relevant data annotations, but all this does is that it provides the user with an error message.
                                    In WPF data editors you allow the masks for data editors, which dramatically simplifies data entry.

                                    Finally, and also from your WPF functionality - it would be nice to be able to provide empty value text and tooltips for your data editors. Just to make it look a bit more "grown-up".

                                    Many thanks for your great work

                                1 Solution

                                Creation Date Importance Sort by

                                Hello Igor,

                                Currently our editors do not provide the capability to specify their mask. However, it is possible to bind the editor to a property with a regular expression defined. For example, if you have the following model:

                                [C#]
                                public class ExampleModel { [Required] [RegularExpression("^(?!0+$)(\\+\\d{1,3}[- ]?)?(?!0+$)\\d{10,15}$", ErrorMessage = "Please enter valid phone no.")] public string Name { get; set; } }

                                Bind the TextBox in the following manner:

                                <EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
                                    <DataAnnotationsValidator />
                                    <ValidationSummary />
                                    <DxTextBox @bind-Text="@exampleModel.Name" CssClass="my-textbox"></DxTextBox>
                                    <button type="submit">Submit</button>
                                </EditForm>

                                Clipboard-File-2.png
                                Clipboard-File-3.png
                                I've attached a sample project so you can test how it works.

                                Null Text is also not supported yet, but you can use the workaround suggested in the Blazor - How to make the grid responsive and how to set a Null Text / placeholder for DxTextBox ticket. This workaround is also included in the attached project.
                                Let me know if you have additional questions.

                                • Igor Pikovsky 1 11.05.2019

                                  Hi Paul,
                                  Did you consider using this solution: https://github.com/estelle/input-masking ?

                                  I would like to continue using DX controls for form input, but lack of masking and placeholders is quite a serious drawback.

                                  It would also be nice to have an option to display validation errors next to the field in question, rather than all together at the top or bottom of the form.

                                  I can achieve all of this with raw <input> fields, but obviously would rather stick with DX.

                                  Also, I notice that using DX form layout elements introduces huge amount of white space, and very significantly impairs information density. With just a handful of fields I end up scrolling the page up and down. Could this amount of whitespace (margins, padding) be controlled?

                                • Paul V (DevExpress Support) 11.06.2019

                                  Hello Igor,

                                  Did you consider using this solution: https://github.com/estelle/input-masking ?

                                  We are not aware of this solution, and we would like to create our own input masking mechanism.

                                  It would also be nice to have an option to display validation errors next to the field in question, rather than all together at the top or bottom of the form.

                                  In this case, use the ValidationMessage component instead of ValidationSummary:

                                  <DxTextBox @bind-Text="@exampleModel.Name" CssClass="my-textbox"></DxTextBox>
                                  <ValidationMessage For="@(() => exampleModel.Name)"></ValidationMessage>

                                  Also, I notice that using DX form layout elements introduces huge amount of white space, and very significantly impairs information density. With just a handful of fields I end up scrolling the page up and down. Could this amount of whitespace (margins, padding) be controlled?

                                  You can customize a component's style by writing custom CSS rules. See the How to implement CSS-related solutions for DevExpress components article. If you have any questions regarding this, I would suggest creating a separate ticket to make the entire conversation easier to follow.