Telerik Grid - Form Template Edit Form for the CRUD Operations

Question

I use Telerik Grid - Form Template Edit Form for the CRUD Operations in my asp.net web application.

---

but the web designer has told me that the telerik controls has many issues concerning :

• The User experience (user like to see every thing from the beginning rather than (for example) click edit to show the form for editing or insert)
• Hard to customize the design (Apply specific CSS )
• Performance issues

---

Are Telerik controls have problems from UX perspectives? What are the alternative especially for CRUD operations?

Answer 1

I worked directly with ASP.NET and Telerik controls for several years. I'm not very fond of Telerik, and here are some of the insights I gained from those experiences.

The value that Telerik controls provides (in my opinion) is drag-and-drop, pre-built user controls for developers who are not strong or motivated in UI/UX. I believe the most appropriate target audience for these are developers who want a UI that is "good enough", so they can continue to focus on business logic.

Usability

For better or worse, the usability is essentially locked in. There is almost no opportunity to whiteboard ideas and brainstorm creative wireframes.

This can limit the team's UI/UX thought process. Instead of thinking through a problem and coming up with creative concepts as a solution, the default go-to action is to look at the Telerik documentation for a tool that already exists and implement that. So, often the resulting UI is generic grids and filters, ugly charts, and cumbersome UX.

Technical Issues with Telerik

Some of the Telerik-specific issues I have experienced are:

• Loaded its own duplicate jQuery resource, which happened to be a different version than our main jQuery dependency. This caused bugs elsewhere that were difficult to track down.
• CSS styles were served dynamically from within a compiled .DLL, rather than a static file we could modify.
• Web Designers who didn't come from a .NET background were often lost and frustrated when trying to make simple modifications.
• The time commitment and investment required from the team to master customizing Telerik controls was inefficient. A disproportionate amount of time was spent implementing customizations and resolving inadvertent bug fixes, than building actual business logic or implementing new UI/UX features.
• The responsiveness of the UI felt sluggish and bloated, because it was.

Recommendation: Back-end Agnostic UI

I would recommend avoiding Telerik, and any other .NET-specific UI tools, entirely. A well-built web interface (client-side browser) shouldn't have hard dependencies on the type of server framework being used (ASP.NET, Python, Ruby). There are really great general purpose UI frameworks available, and this gives you the freedom to hire and utilize talented web designers from different background.

There are a few simple steps you can take to move in this direction while keeping your existing ASP.NET web application in tact:

• Create a clean MasterPage, remove all references to any .NET UI controls, stylesheets, js (ASP.NET or Telerik). Instead use only client-side libraries such as jQuery, Angular, Bootstrap (or an alternative [1]).
• Create separate stylesheets to handle your custom UI, and override any Bootstrap defaults
• Use generic ASP.NET controls like a Repeater to generate things like grids and lists. This is almost identical to a for loop in other platforms, and will be familiar to web designers. It is also a familiar tool to C#/VB developers. Developers can manually code HTML lists, tables, etc.
• You can use WebMethods or WebApi to create clean .NET methods that can be called directly from the UI using ajax.
• Migrate one page at a time to the new UI framework MasterPage.

[1] = http://modernweb.com/2014/02/17/8-bootstrap-alternatives/

Answer 2

Don't use that one unless you're ready to tweak it heavily, it has tons of UX problems, plus the ones mentionned by your web designer. I could make a list but it would take too long, so I'll ask you to trust your web designer. Just ask a colleague to perform some operations on the demo and watch him doing and you will notice that something's wrong. The problem with those products is that when you want to do something a bit different than the example, or tweak it completely, it becomes hell.

Of course Telerik is a very quick solution, but if you want something tailored to your special needs, I strongly advise you to code it yourself while using the information here https://stackoverflow.com/questions/578146/best-examples-of-crud-web-form-design concerning the good patterns. That's my personnal point of view.

Anyway, using that kind of product is really a compromise. You have a quick result and you don't have to heavily code the mechanisms. But the truth is you're not in control of the user experience, because you're not the designer, and those components are very rigids.

Here is a list of component vendors/open source/free projects that may be an alternative to Telerik. Just talk with your web designer if one suits both of you :

https://www.devexpress.com/Products/NET/Controls/ASP/

https://www.syncfusion.com/products/aspnet

http://www.componentone.com/Studio/Platform/ASPNETWebForms

http://www.infragistics.com/products/aspnet

https://jqueryui.com/

http://www.evolutility.org/

http://jqgrid.com/jqgrid/

Etc.

Some are more flexible others, but the more you're in control of the design, the better it is for the users. If we talk about pure UX without considering coding difficulties, go and do something tailored to your special needs.

Answer 3

After playing with that site, it is clear it has some UX problems and your post suggests there are some technical constraints which limit what you can change about it. Sadly this is quite common with some of the tools out there - you are locked into how they want it to work.

This Stack Overflow is dedicated to User Experience and it is not really within our remit to give you recommendations on alternatives, especially as this Telerik Grid is an ASP.net solution, which might limit the number of alternatives that might be available.

Answer 4

If you have a choice of presenting the "Edit" page in a different screen, you could employ the simple View Grid --> Edit --> Confirm Edit --> View Grid pattern. This pattern is so simple, well tested and can be achieved without using any custom controls.

Another option is to show a "Modal" dialog with editable controls. Jira uses this pattern extensively. This way, the user stays on the same screen.

Answer 5

The first thing I noticed while experiencing the Telerik Grid - Form Template Edit Form is it is hard to click the edit button as it is on the left most corner of the table, every time the user should move the mouse pointer from right to left to edit each record (while most users are right handed). The users should only be provided with limited content which is important and showing all the contents at first place is unnecessary and it would be clumsy when we show them all the contents in a single row.

In the Telerik grid, you can implement a Content template to perform CRUD operation which will get the details as a popup model like in the example below which would be user-friendly as the user can only focus on a selected detail. And don't have to mess up with other data.

The delays to fetch details is one of the major performance issues I think, which can be tackled by adding some innovative loading animations to get the user engaged to the application.