Data Binding

Webix JS
1

Hi, am still trying to figure out data binding, in 4 settings:

  1. Binding an array to a datatable.

In this case, i think I have it:

const users = new webix.DataCollection()
{
   view: 'datatable',
   data: users
}

ie: basically set the ‘data’ property to a DataTable, then add/remove to the DataCollection, and the view automatically syncs.

  1. Binding a value to a form control.
    I expected this to work, but it did not:
const username = new webix.DataValue()
{  
   view: 'text',
   value: username
}

  1. Binding a Record to a Form.

  2. Binding an attribute (e.g. background color) to a DataValue.

Thoughts?

David

2

OK, so for the form (3 above), this works:

     const user_detail = new webix.DataRecord()
     {
         view: 'window',
         on: {
            onBeforeShow: () => {
              $$('FORM').bind(user_detail)
          }
         rows: [
            {
               view: 'form',
              id: 'FORM'
            }
        ]
    }

Note: I’m using Typescript, and you have to patch the webix.d.ts:

      //var DataRecord:DataRecord;
      interface DataRecordFactory {
          new():DataRecord;
      }
      var DataRecord:DataRecordFactory;
3
  1. Binding an array to a datatable.

You can’t really bind a raw data array to a datatable.
You can

  • load data from an array into datatable, and when you need the actual data, use a table.serialize() API to get the new array with actual values

  • load array into a datacollection, and bind any component to datacollection. To get the array with actual values, you will need to use collection.serialize() anyway

  1. Binding a value to a form control.

DataValue and DataRecord can be used to bind values, but again, it has sense only if you want to use the value in multiple places and need to catch the moment when it changed.

If you need to show some value or record in the form, it will be better to load data directly into the form.

I expected this to work, but it did not:

Please check the next sample Code Snippet

4

Thanks, excellent snippet!
would be awesome to have these indexed, it’s MUCH easier to figure out Webix using snippets - so much awesome functionality is probably never used because folks don’t know about it!

5

One more question: what is the canonical way to flash a cell in a datatable, e.g. like a table of stocks in which cells flash different colors depending on whether the price is increasing or decreasing?

6

If you target a modern browser - it will be a setCellCss call with CSS animation

http://webix.com/snippet/8381a2cb

7

Thanks.

Have found the Velocity.js animation engine trivial to implement with Webix.

Dave

8

Thoughts on #4. Binding to an attribute like colour?