WEBIX BLOG

Hey all! Can you already smell the autumn in the air? Alas, the fruitful summer gradually comes to an end, and it’s time to receive a Bachelor’s degree in Webix 🙂 Today I suggest you to brush up your knowledge of data components by uncovering one of the base concepts – DataStore. In the article below you will learn what is hidden behind visual presentation and may pick useful snippets for working with data.

While football players are restricted by the field area (watching the championship, eh?), web developers compete with each other in an even smaller battlefield called viewport. And the one wins who manages to occupy every inch of it wisely.

Still,  you can always add one more layer  to your application and choose content you’d like to show first. No doubt, Webix is always at hand with ready-made solutions for multiple-view layouts:  

• Accordion widget
• Carousel widget
• Multiview widget

“Thanks God it’s Friday” – that’s what people say as they feel a great relief after a fruitful working week. I want to make this day even more happier and suggest the cure to a common developer problem – user inputs.

We all want to collect as much information from users as possible, while making this process predictable and controlled with respect to user freedom of choice. In this article we will try to squeeze through the variety of Webix combobox controls to solve this task.

As a teaser, I’m giving you the numbers: Webix offers 7 ready-made select widgets and 7 suggest lists for autocomplete options alongside with great possibilities to customize and mix them all to create an ultimate web combobox!

Hi everybody! I’m lucky to inform you that summertime is approaching rapidly and it’s high time to rejoice, indulge into various kinds of outdoor activities, twist and shout. Today I suggest you to combine all these things with web development. So, are you ready to play the Accordion? 😉

Still, I don’t want you to read musical notes. In HTML and Javascript accordion means a UI control that consists of panels that can be expanded and collapsed (just like the bellows of a musical accordion) to make the whole interface sound.

Webix accordion widget is one of the basic ui layout types. It seems to be very simple and non-configurable, but one needs to learn and practice to play the music. Here we gathered three common use cases and customization samples with the Accordion component:

I remember my school years and those long evenings spent by painting a family tree. It was the first time in life when I faced the inevitable consequences of a poorly planned work – the sheet of paper unexpectedly came to an end and I had to redraw the scheme from the very beginning. That was a fail!

Time has passed and new technologies stepped into our lives offering a number of tools for that trivial task. I also saw that the big world is built around the same hierarchical schemes used everywhere: from simple IT org charts to multi-department companies’ hierarchy.

And although there’s a number of tools for manual drawing of organograms, drawing itself is no longer needed. Now I can simply pass the data into a cute Webix organogram widget and feast my eyes upon the ready-made chart in the browser!

No magic, just code (and Webix Pro):

Webix offers a number of possibilities to nicely visualize linear data – bar, pie, area, scatter and radar charts – to match any use case. But what can be done if hierarchy matters?  You may think of a Webix Tree as the first and foremost widget as it perfectly shows parent-to-child relation. But that’s almost all about its visualization abilities.

For more powerful tools we should look into the PRO package that includes Organogram (a tree-like diagram ) and TreeMap. We will pay a closer attention to the Webix TreeMap as it is the only Webix widget that can display hierarchical data on a proportional  basis.

The simplest initialization code is brief:

And you get the following output:

Hi everybody. Today we will be speaking about Webix ways to optimize server-client communication in case of huge data. Those of you who are happy to fetch long datasets at once, please raise your hands!

Just as I’ve expected, nobody’s here.  Everybody has gone to dynamic loading which is implemented very easily with Webix data components.

Initially, a limited number of records (e.g. 100) is loaded, while further requests are triggered by scrolling or paging automatically. Guys, isn’t it nice?

Still, such a pattern requires quite a specific format of a server response –  {data:[ /*array of records*/], pos:0, total_count:100  } – and you may ask yourself: “So what should I do, if I cannot tune the response or I don’t know the total length of server-side data?” Indeed, there are lots of web services that do not provide such information.

The article below shows the solution that relies totally on Webix public API and can be built by any of you.

Hey everyone!

Now, while the last days of winter are going by, we are happy to present the first release of the year – Webix 3.2.

And definitely we would like to start with the most important part of our release – the new widget.

Spreadsheet widget

The truly outstanding hallmark of the February release is a feature-rich Spreadsheet widget that allows editing data in Excel-like manner. Being fully client-side it can load data either from plain JSON or database or even Excel document.

Spreadsheet allows you not only to format text values within cells but also define custom dimensions for cells, merge them into spans, copypaste the cells as well as calculate their values using Excel mathematical functions.  During data editing you can revert all the changes you’ve made and apply them back, if needed.

Hey guys, let us check today what Webix offers to make our lives easier during app navigation. I bet that there’s something worth a closer look.

Since the launch of the library its users had a standard Menu at their disposal with the possibility of  placing items horizontally or vertically (too simple). But not very long time ago the developers went further and ended up with two handsome widgets created with user-friendly navigation in mind – Sidemenu and Sidebar.

So, let’s explore the widgets’ functionality to find out the use cases that are more suitable for each of them.

Basically, Sidebar can be initialized on the page with the following code:

And you get: 

Live demo

Webix features the drag-and-drop functionality that is available not only for desktop but also for mobile devices.

The library allows making drag-and-drop operations within a widget itself as well as between a few different widgets or even between the same widgets. In this article it goes about drag-and-drop operations within Webix data management widgets.

Learn how to implement this functionality with ease.

Drag-and-drop modes

Firstly, make sure that both target and source widgets have the drag property set to true. Basically, it is enough to enable drag-and-drop.