For one of our web projects developed with asp.net MVC technology, we had to analyze different UI
For one of our web projects developed with asp.net MVC technology, we had to analyze different UI control options .
The business is complex and needs a wide range of different controls for numbers, percentages, configurable dates, etc. The options analyzed were: KendoUI and DevExpress .
Five basic criteria were evaluated during this analysis
: quality of the controls and grids, ease of use, time of integration with an existing project and automatic code generation.
1. Controls
In this criterion, we evaluated the available controls in each library and how good they were. The focus was on the controls of text and dates.
KendoUI
Kendo UI controls provide two controls for text fields: Autocomplete and NumericTextBox . The last control offers different options, such as prices, percentages, measures, and quantities. In my opinion, they are very good controls. Its weakness is that it does not provide a mask text field, for example, to complete emails or addresses with certain format, but this difficulty can be easily overcome with any jQuery plugin.
KendoUI offers three options for text fields: Calendar, DatePicker and DateTimePicker . I thought Calendar was excellent because it works smoothly and allows to customize the template, for instance adding icons to calendar days.
DatePicker and DateTimePicker are simple to use date fields which allow to pick a dynamic range of dates depending on other DatePicker with just one code line. They are fully customizable. They even allow to pick a month per calendar year instead of a date. DateTimePicker also enables to pick a particular hour.
DevExpress
DevExpress has a good variety of controls and possibilities, for instance, text controls can use masks which allow them to be used with numbers, emails, addresses, IPs or whatever is needed . It also allows, among other things, to add validations with regex and to define messages.
2. Grids
KendoUI
KendoUI grids are fantastic ; they offer almost endless possibilities, allowing to use master-slave structures, row templates, online edition, paginated and asynchronic load among other things. See here a complete list of all the options .
DevExpress
DevExpress grids live up to expectations and are a very good choice, but they do not have so many possibilities: templates cannot be easily specified, master-slave structures cannot be achieved and grids are simpler than KendoUI ones.
3. Ease of use
KendoUI
Installing KendoUI is a bit more complicated than installing DevExpress since helpers have to be manually registered, but after that, it is very easy to create a control. For example:
@Html.Kendo().NumericTextBox().Name(“MyNumericText”)
Helpers are typed, for instance, NumericTextBoxFor, and, if there is a model with text fields (such as the one used in our project where even though the data has to be validated as numerical, it must be saved as text in the data base), fields can be easily bound using ‘Name’. In the example above mentioned, the field sets the value to the property MyNumericText of the model and the conversion is automatic even if it is a text field.
The same is true for date fields. Creating a date field which only shows the month and year is as simple as doing the following:
@Html.Kendo().DatePicker().Name("MyTextBox").Depth(CalendarView.Year).Start(CalendarView.Year).Format("MMMM yyyy")
DevExpres
DevExpress installation is both simple and complicated at the same time. DevExpress has an installer which automatically installs a series of templates in Visual Studio allowing to create projects with everything they require to use DevExpress already configured.
If these templates are not used, it is considerably harder to manually register a wide range of assemblies and namespaces, to include references (which are many) and also to register a handler and DevExpress section in our web.config. In any case, we can copy it from a template project without problems, but with some margin of error. Creating a control is more complicated than doing it in KendoUI because controls are so generic that we are compelled to configure or to create a helper for each of them. For instance:
@Html.DevExpress().SpinEdit(settings => { settings.Name = "MyPercent"; settings.Properties.MinValue = 0; settings.Properties.MaxValue = 100; settings.Properties.NumberFormat = SpinEditNumberFormat.Percent; settings.Properties.SpinButtons.ShowIncrementButtons = false; }).GetHtml()
In this example, a percentage field is created. The code is a little bit cumbersome. Besides, it doesn´t have typed helpers. The same occurs with the grids.
4. Time of integration
KendoUI
KendoUI can be rapidly integrated with an existent project since it requires neither a wide range of assemblies nor too much configuration. Changing an existent field for one done in KendoUI does not take more time than replacing the code line and applying an adequate CSS.
Kendo grids are easy to use, but depending on the complexity of our business, integration can take a long time since they are not grids which can be integrated in just a couple of hours.
DevExpress
DevExpress is a little slower to integrate due to the required configuration needed both to work in our site and for each field.
5. automatic code generation
KENDOUI
This is basically one of the best features of KendoUI. The HTML and js code generated by KendoUI is quite clean; it does not use tables but divs which allows an easier and more fluid skinning. Additional js is not seen in the views since it uses all js included in its library.
DevExpress
In my opinion, DevExpress is very feeble in this criterion: it generates a large quantity of extra javascript code making it difficult to debug. The HTML generated is not friendly at all; it uses tables instead of divs, making skinning more difficult and little reusable.
Summary
KendoUI
- Advantages
It gives support through forums, webinars and training, documentation and a blog.
Even though the helpers are strongly typed, they can be resolved without binding it to the model property and using the MVC automatic binding to the ‘Name’ method of the non-typed helper. Controls are generated with a more skin friendly structure, it doesn´t use tables, and additionally provides a javascript API that allows using the controls in the jQuery traditional way.
- Disadvantages
It doesn’t have an only-text textbox, or provide masks other than for numbers or dates. In spite of this, a jQuery plug-in can be applied. Some needed functionalities may need to be done manually, such as keeping the focus on a DatePicker field once a date is selected.
DevExpress
- Advantages
Controls for platforms such as WPF, Winforms, and Silverlight are obtained by acquiring the Universal subscription. Support is provided through forums, webinars and training, documentation, and a blog.
- Disadvantages
The resulting HTML is not so friendly, for instance, tables are used instead of divs. Some needed functionalities may need to be done manually, such as keeping the focus on DatePicker fields.
Many setting lines must be added for each control to work properly, which results in a more cumbersome piece of code.
Conclusion
Our choice was KendoUI, mainly for its ease of use, the friendly HTML code generated and because its limitations can be overcome with some of the many available jQuery plugins.
Are you searching for the best technical solution for your company? Do not hesitate to Contact us for more information. We will get back to you!
