j-DataGrid — Total.js part 2

j-DataGrid is part of the jComponent library from Total.js. You can find more information about j-DataGrid on componentator.com or GitHub.

In the previous blog post, I wrote about some basic j-DataGrid functionality, such as how to use different data types for columns (string, number, phone, email, boolean, date). In this one, I want to tell you more about more complex functionality, like how to handle click events on rows, how to use checkboxes in rows, or how to use a control panel for every row.

Click event on a row

j-DataGrid supports catching a click event on a row. It is very easy to do. First, we have to add one setting click to our datagrid configuration.

<ui-component name="datagrid" path="?.items" config="margin:22;click:?/click">
  <script type="text/plain">
    [
      { name: 'name', text: 'Name', width: 200 },
      { name: 'age', text: 'Age', type: 'number' },
      { name: 'phone', text: 'Phone', type: 'phone' },
      { name: 'email', text: 'Email', type: 'email' },
      { name: 'online', text: 'Online', type: 'boolean', options: [{ name: 'Yes', id: true }, { name: 'No', id: false }] },
      { name: 'created', text: 'Created', align: 1, template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignheader: 2, filter: false }, 
    ]
  </script>
</ui-component>

As we can see, we want to invoke function ?/click in our PLUGIN. So now we have to create this function.

exports.click = function(row, grid, row_el) {
  console.log(row);
};

In this function, you have available more arguments, but we will use only the first one, which is row. After clicking on some row, we will get back the complete object in this row. By getting this object we can do operations for example redirecting to the detail of the selected object.

Checkboxes in rows

As we noticed, there are checkboxes in each row of our datagrid. We can check them for selecting rows and then we can access these items on a path we chose (all checked rows will be added to this path). To do this we have to add one setting checked to our datagrid configuration.

<ui-component name="datagrid" path="?.items" config="margin:22;click:?/click;checked:?.checked">
  <script type="text/plain">
    [
      { name: 'name', text: 'Name', width: 200 },
      { name: 'age', text: 'Age', type: 'number' },
      { name: 'phone', text: 'Phone', type: 'phone' },
      { name: 'email', text: 'Email', type: 'email' },
      { name: 'online', text: 'Online', type: 'boolean', options: [{ name: 'Yes', id: true }, { name: 'No', id: false }] },
      { name: 'created', text: 'Created', align: 1, template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignheader: 2, filter: false }, 
    ]
  </script>
</ui-component>

With a configuration set like this, we can access checked rows on a path ?.checked (which is common.checked, because we are using the common plugin).

Like this, we can do operations on a group of data.

Control buttons

If we want to have more options to operate with selected row, we can add controls. These controls have to be added to the datagrid declaration in the script tag and we have to add a setting button to our datagrid configuration.

<ui-component name="datagrid" path="?.items" config="margin:22;click:?/click;checked:?.checked;button:?/clicked">
  <script type="text/plain">
    [
      { name: 'name', text: 'Name', width: 200 },
      { name: 'age', text: 'Age', type: 'number' },
      { name: 'phone', text: 'Phone', type: 'phone' },
      { name: 'email', text: 'Email', type: 'email' },
      { name: 'online', text: 'Online', type: 'boolean', options: [{ name: 'Yes', id: true }, { name: 'No', id: false }] },
      { name: 'created', text: 'Created', align: 1, template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignheader: 2, filter: false }, 
      { type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
    ]
  </script>
</ui-component>

Used code:

{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }

As we can see type in this object is controls and the second property is a template. In this template, we used HTML code with three buttons (show, edit, and remove). These controls will appear as a little panel above the row when we hover above it.

After clicking on one of the buttons we want to invoke the function ?.clicked, so we have to create it first.

exports.clicked = function(btnname, row, button, e) {
  console.log(btnname, row);
};

As you can see there are four arguments in our function, but for example purposes, we will use only btnname and row.

In the gif we can see, that after clicking on a button in the control panel we are getting back the name of the button we clicked (which is taken from the attribute name in the HTML code used in controls) and the item, where the button was clicked. In this example, we used three buttons, so when we have the name of the button we can catch which button was clicked and depending on that perform the operation we want with the selected item.

I hope you learned something new with this blog, but do not forget, that this was only for example purposes and you can do a lot more with component j-DataGrid.