There are many ways to create and connect the data set and grid. This example will describe the simplest way and the related process of using the setup information.
(To run this example, SMART datagrid script, etc should be ready. Please refer to Product Installation and Preparation page.)
First, organize the field list through fieldName and dataType, so that it can match the structure of the data set which will be loaded from the server. In this example, it will get the data stored as Json array in the server and display it in the grid. If dataType is not stated in the field item, it will be specified as ValueType.TEXT. And, if specify the item of the field list as a simple string rather than an object, Data Field which uses the string as its fieldName and dataType TEXT will be created.
var fields = [
{
fieldName: "product_id",
dataType: "text"
}, {
fieldName: "product_name"
}, {
fieldName: "customer_id"
},
"customer_name",
"country",
"phone",
"unit",
"currency",
}, {
fieldName: "unit_price",
dataType: "number"
}, {
fieldName: "quantity",
dataType: "number"
}, {
fieldName: "order_date",
dataType: "datetime",
datetimeFormat: "yyyy-MM-dd"
}, {
fieldName: "ship_date",
dataType: "datetime"
}
];
Specify the field list declared above as Field List of Data Set.
var dataset = new DataLudi.GridDataSet();
// or
var dataset = DataLudi.createGridDataSet();
// Field List Setup
dataset.setFields(fields);
Now, you can load the data from the server and add it in the data set which has been just created. In SMART datagrid module, it does not contain how to load the data from the server, and you can use the functions provided by stable libraries like jQuery.
// Load the data from the server.
$.ajax({
url: "url",
dataType: 'text',
success: function (data) {
// Add it in the data set after the loading is completed.
ds.setRows(data);
// You can load the data of several formats.
//new DataLudi.DataLoader(dsMain).load("csv", data, {
// start:1
//});
}
});
One data set can be connected to one or more grids. However, this example will create only one grid and connect it to the data set. Similarly to the field list of the data set, it will define the column set of the grid first.
var columns = [
{
"name": "ProductId",
"fieldName": "product_id",
"width": "90"
"header": {
"text": strings["ProductId"]
}
}, {
"name": "ProductName",
"fieldName": "product_name",
...
}, {
"name": "CustomerId",
"fieldName": "customer_id",
...
}, {
"name": "CustomerName",
"fieldName": "customer_name",
...
},
...
];
Specify the column list above as Column List of Grid View. And, after connect it to the data set, the data will be displayed in the grid.
var grid = new DataLudi.GridComponent(null, 'container').gridView();
// or
var grid = DataLudi.createGridView('container');
// Column Setup
grid.setColumns(fields);
// Connect it to the data set.
grid.setDataSource(dataset);
After this, you can set the grid styles or options. The styles and options will be handled in the examples below.
grdMain.checkBar().setVisible(false);
grdMain.header().head().setPopupMenu({
label: 'SMART datagrid Version',
callback: function () { alert(DataLudi.getVersion()); }
});
And, the grid fires events at many points, such as clicking the mouse or editing actions, etc.
grdMain.onDataCellClicked = function (grid, index) {
if (index && index.dataColumn() && index.getDataIndex(grid) >= 0) {
var v = dsMain.getValue(index.getDataIndex(grid), index.dataField());
$('#txtMessage').text('onDataCellClicked: ' + v);
}
};