function UIControl ([element])

// create the grid columns
var columns = [];

var column1 = new dv.GridColumn("index");
column1.dataType = dv.IntegerType;
column1.editable = false;
column1.caption = "#";
columns.push(column1);

var column2 = new dv.GridColumn("name");
column2.dataType = dv.StringType;
column2.caption = "Name";
columns.push(column2);

var column3 = new dv.GridColumn("profit");
column3.dataType = dv.RealNumberType;
column3.caption = "Profit Fund";
columns.push(column3);

var column4 = new dv.GridColumn("registered");
column4.dataType = dv.DateType;
column4.caption = "Registered";
column4.metaData.set("customEditor", {
    "autoComplete": true,
    "allowEmptyInput": true
});
columns.push(column4);

// create the grid control
var grid = new dv.Grid(document.getElementById("grid"));
grid.theme = "blue";
// set the model
grid.model = new dv.ArrayModel(participants, columns, "index");