WEBIX JAVASCRIPT LIBRARY BLOG

UI development best practices, front-end programming tips and news to speed up your Web development.

Follow us:

Write for us: learn about our guest posts guidelines.

Drag-and-Drop in Webix UI

Not so long ago, the drag-and-drop functionality was used in web apps quite rarely. With HTML5 coming on the scene, native drag-and-drop has become easily accessible and popular. The functionality that required lots of coding efforts before, now can be added with a few lines of HTML code. While developing the Webix library, we tried to keep all features and advantages of native drag-and-drop. At the same time, we’ve added new capabilities that might be useful in web app development.

Component Level Drag-and-Drop

While HTML5 drag-and-drop is focused on an HTML element, Webix drag-and-drop concentrates on the UI components. For example, try to drag items between the tree and the grid in the demo below:

Creating a custom view – HipChat integration

One of the Webix’s great advantages is the possibility to use the third-party components. Obviously, instead of reinventing the wheel, it is better to take advantage of reliable, ready to use solutions. Especially now when the open source community is actively developing and supporting a variety of interesting libraries.

The standard Webix pack already includes wrappers for such popular solutions as Google Maps, FCK Editor, D3 charts and lots of others. However, it is a drop in the ocean. Every day new js libraries appear, and it’s impossible to provide support to all of them out of the box. Instead of this, Webix allows creating new integration for any third party library by, literally, several lines. Lets check how it can be done.

DataTable – 1000 columns and more

As you may know from the previous article JS Grid with 1 000 000 rows, DataTable is not limited by the number of rows. What about columns?

The above example shows a grid with 1 000 columns. Yep, it is not a million, but still quite impressive, isn’t it?

Webix Grid – 1 000 000 Rows and More

It would be nice to have a UI that could support any amount of data. Even if today you have only a hundred of records to load into a grid, it wouldn’t guarantee that this hundred won’t turn into 10 000 in a month or into 100 000 in a year. The more successful your application is, the greater the chance that the amount of data will increase. It means that you will have to adjust your app to support a large data set.

1 14 15 16