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.

Checkboxes in DataTables. Little-known techniques

You probably already know that DataTable has the ability to show checkboxes instead of plain text data. It allows you to provide a simple solution for status marking and data selection.

Basic checkboxes

The minimal code for initializing a DataTable with checkboxes will look as follows:

    { id:"status", header:"Is Active", width:80, css:"center",
    { id:"value", header:"Records", fillspace:1 },
  data: [
    { status:0, value:"Record A"},
    { status:1, value:"Record B"},
    { status:0, value:"Record C"}

It will result in a nice-looking JavaScript grid presented in the picture below. The “{common.checkbox()}” line in the template expands in a checkbox control.

Basic Webix Checkboxes


Live Demo >>

Creating a Mobile App with PhoneGap and Webix

With the help of Webix you can create a web app which will work equally well on both desktop and mobile devices. However, it still remains only an HTML page. In order to create a native app, you need some other tools. One of such tools is PhoneGap.

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. Phohegap works on base of HTML5 and can be used to create native app for all major mobile systems – iOS, Android, Windows Phone and others.

webix and phonegap mobile app

In this tutorial we will describe the process of creating a simple native app by means of Webix and PhoneGap tools.
You can get the final code of the application from github.

Using Webix with NodeJS

NodeJS is one of the hottest programming technologies. It allows creating fully functional web apps in a few lines of code. What is more, apps on NodeJS platform can be made completely in JavaScript. Using the same language on client and server side gives us real bonuses.

Let’s see how the client-side code based on Webix UI can be connected to a database with the help of NodeJS.

nodejs webix

Using Handlebars Templates with Webix UI

JavaScript UI library Webix allows redefining the appearance of many elements through templating. For example, in tree view we can define the look of item through the following template:

    view:"tree", data:tree_data,
    template:"{common.icon()} #value#"

simple template


Here you can see the two main components of webix templates: common helpers and property placeholders. Common helpers are predefined pieces of logic which renders some common elements (tree icon in the above case). Property placeholders are markers that will be replaced with data from related data object.
By using html tags in the template we can change the look of component in many ways.

1 2 3 4