Description
...
Description
This example takes the previous sample and makes it data driven and adds a way for the user to define new DataSource types. It will also be extended to define a new DataSource and change the user interface to allow the user to switch between the two DataSources, we don't need add any method, because when the DataSource is changed by user, the php enging will load the DataSource automatically.
Prerequisites
As this sample builds on the previous one, in order to be able to run it, please esnure you have the latest build of SmartClient (at least version 8.3p). This can be downloaded from here.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
isc.RestDataSource.create({
ID: "employees",
fields: [
{name: "Name", title: "Name", type: "text", length: "128" },
{name: "EmployeeId", title: "Employee ID", type: "integer", primaryKey: "true", required: "true" },
{name: "ReportsTo", title: "Manager", type: "integer", required: "true", foreignKey: "employees.EmployeeId", rootValue: "1", detail: "true" },
{ name: "Job", title: "Title", type: "text", length: "128" },
{ name: "Email", title: "Email", type: "text", length: "128" },
{ name: "EmployeeType", title: "Employee Type",type: "text", length: "40" },
{ name: "EmployeeStatus", title: "Status", type: "text", length: "40" },
{ name: "Salary", title: "Salary", type: "float" },
{ name: "OrgUnit", title: "Org Unit", type:"text", length:"128" },
{ name: "Gender", title: "Gender", type:"text", length:"7",
valueMap: ["male", "female"]
},
{ name: "MaritalStatus", title: "Marital Status", type: "text", length: "10",
valueMap: ["married", "single"]
}
],
dataFormat: "json",
criteriaPolicy: "dropOnChange",
operationBindings: [
{ operationType: "fetch", dataProtocol: "postMessage", dataURL: "process.php" },
{ operationType: "add", dataProtocol: "postMessage", dataURL: "process.php" },
{ operationType: "update", dataProtocol: "postMessage", dataURL: "process.php" },
{ operationType: "remove", dataProtocol: "postMessage", dataURL: "process.php" }
]
}); |
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
isc.HStack.create({
membersMargin: 10,
ID: "gridButtons",
members: [
isc.DynamicForm.create({
values: { dataSource: "Change DataSource" },
items: [
{ name: "dataSource", showTitle: false, editorType: "select",
valueMap: ["supplyItem", "employees"],
change: function (form, item, value, oldValue) {
if (!this.valueMap.contains(value)) return false;
else {
supplyItemGrid.setDataSource(value);
advancedFilter.setDataSource(value);
supplyItemGrid.filterData(advancedFilter.getCriteria());
}
}
}
]
}),
isc.IButton.create({
top: 250,
title: "Edit New",
click: "supplyItemGrid.startEditingNew()"
}),
isc.IButton.create({
top: 250,
left: 100,
title: "Save all",
click: "supplyItemGrid.saveAllEdits()"
}),
]
}); |
Notice that when the user changes the DataSource, the selected DataSource is set, both for the supplyItemGrid and for the advancedFilter FilterBuilder. Then filterData() is called on the grid to refresh the content.
This example now shows a data-driven DataSource that allows users to add/remove/update two DataSources with two different entity classesDataSource, and also apply various filter criterias criteria built with the Filter Builder.
The complete code for this sample project can be downloaded from here.