Using the "map" Column Attribute

You can define mapping between loaded data and columns of datagrid. By default, DataGrid will assume that incoming JSON/XML has an attribute with the same name as the column ID and you need to define only the column ID. For arbitrary data that do not conform to the default, you might need data mapping.

There are several ways to implement mapping:

using the map attribute of a column
using the scheme property of DataGrid
using the map attribute of DataGrid for common mapping of all data items

Using the “map” Column Attribute

The map attribute defines which property of the loaded data object needs to be used for this column in the grid:

Loading from XML

webix.grid({
  columns:[
      {
          id:"size",
          map:"#cells[0]#",       /*!*/
          header:"Will use the value from the first cell sub-tag"
        },
        {
          id:"url",
            map:"#details#",       /*!*/
            header:"Will use the value from the details attribute or sub-tag"
        }
    ],
    datatype:"xml",
  url:"data/data.xml"
});

The code above will correctly show data from XML as in:

<rows>
    <item details="http://mysite.com"><cell>15x24</cell><cell>19.02.2008</cell></item>
    <item details="http://mysite.com"><cell>10x12</cell><cell>22.02.2008</cell></item>
    ...
</rows>

CSV and JsArray data types

During CSV (JsArray) parsing, its columns are named as data1..dataN. You can use these values as column ids:

webix.grid({
  columns:[
      { id:"data1"  },
        { id:"data2"  }
    ]
});

Alternatively, you can use mapping to define more meaningful names for columns:

webix.grid({
  columns:[
      { id:"url",   map:"#data1#"  },
        { id:"size",  map:"#data2#"  }
    ]
});

Converting values to the native type

When you load data from XML, all values are loaded as strings (in JSON as strings or numbers). This is not suitable for data of different types (objects and date objects, for example).

Mapping allows you to convert values from string to the defined type, e.g. date:

webix.grid({
    columns:[
      { id:"start", map:"(date)#start#" }
    ]
});

If the id of the column and the name of the mapped field are the same, you can shorten the record as follows:

webix.grid({
    columns:[
      { id:"start", map:"(date)" }
    ]
});

Scheme Data Mapping

If all the above doesn’t work, you can use the scheme property to define a custom data mapping function:

webix.grid({
    scheme:{                                                    /*!*/
        $init:function(obj){                                    /*!*/
            //obj - data object from incoming data              /*!*/
            // set value based on data in the incoming dataset  /*!*/
            obj.count = obj.cells[0];                         /*!*/
            obj.price = obj.cells[1];                           /*!*/
            // or calculate values on the fly                   /*!*/
            obj.total = obj.price * obj.count;          /*!*/
        }                            /*!*/
    },                              /*!*/
    columns:[
        { id:"count" },
        { id:"price" },
        { id:"total" }
    ]
});

Common Mapping for All Data Items

You can collect all column IDs and their corresponding data fields in the map property of DataGrid:

webix.grid({
  map:{                    /*!*/
    name:"#firstname# #lastname#",      /*!*/
    birth:"(date)#birthdate#"        /*!*/
  },                      /*!*/
  columns:[
      { id:"name", header:"User name" },
        { id:"birth", header:"Date of birth"}
    ],
    data:[
      { id:1, firstname:"Adam", lastname:"Smith", birthdate:new Date(1985, 1, 1) },
        { id:2, firstname:"Tom", lastname:"Brown", birthdate:new Date(1986, 2, 2) }
    ]
});