vteam #397 has been working on a web-based loan management system. Due to rapid increase in use of smartphones, the client wanted to make his application responsive and user-friendly for mobile devices. Kendo UI framework controls had been extensively used in the application but these were not responsive.
Telerik support team was consulted for official support by vteams engineer Ahmad Ahsan. They suggested him either to use third party JavaScript libraries or to display minimum data to achieve responsiveness. But these suggestions weren’t feasible for the client’s application context because of the following major requirements:
- The user interface should be highly responsive
- Amount of content should be displayed consistently on cross devices
.
Instead of using 3rd party JavaScript libraries or applying a custom work around for responsive behavior, it was suggested to the client that Kendo UI controls should be integrated with Twitter Bootstrap. Additionally, the application structure should be shifted to Bootstrap Grid to:
- Avoid major cross-browser and cross devices compatibility issues
- Minimize the maintenance cost
.
Implementation
Kendo UI integration with Twitter Bootstrap helped a lot to keep the application structure consistent. As compared to legacy version, nominal custom styling was used. But due to inherited nature of Kendo UI controls, some major controls like Grids were still problematic.
Grids were overflowing on the smartphone screens and scrolling was also not supported. Furthermore, the desired responsive behavior (that popup should remain aligned in the center even if the device orientation is changed) of Grid popup window couldn’t be achieved.
These requirements were fulfilled by applying out of the box solutions. Default styling rules of Bootstrap framework were efficiently tailored. Also, mobile devices orientation events were implemented.
Conclusion
This solution reduced maintenance cost of the application by avoiding too much custom styling rules to make Kendo UI controls responsive. The application was kept light weight as no 3rd party JavaScript library was used.