In addition to built-in client services, you can also programmatically create your own datasource entirely in the client-side, then bind it to the WebCombo via client API. This mode is called ClientDataSource.
This topic shows how to bind WebCombo to client-side Data Source.
From the WebCombo Designer, select Columns from the left navigation. Add a column with following detail:
Property | Value |
---|---|
Name | Text |
BaseFieldName | Text |
HeaderText | Item Text |
Repeat above step and add another column with following detail:
Property | Value |
---|---|
Name | Desc |
BaseFieldName | Desc |
HeaderText | Item Description |
Width | 120 |
First of all, create a DataTable using the following code:
var combo = ISGetObject("WebCombo1"); var dataTable = new ISDataTable(); var idColumn = new ISDataColumn(dataTable); var textColumn = new ISDataColumn(dataTable); var checkColumn = new ISDataColumn(dataTable); var descColumn = new ISDataColumn(dataTable); |
Then, set up the data columns like following:
/* setup data columns */ dataTable.Name = dataTable.TableName = "Root"; idColumn.Name = idColumn.ColumnName = "ID"; textColumn.Name = textColumn.ColumnName = "Text"; checkColumn.Name = checkColumn.ColumnName = "Bool"; descColumn.Name = descColumn.ColumnName = "Desc"; |
Next, add the created columns to the data table:
/* add columns to data table */ dataTable.Columns.Add(idColumn); dataTable.Columns.Add(textColumn); dataTable.Columns.Add(checkColumn); dataTable.Columns.Add(descColumn); |
The columns has been set. Now, add rows to the data table like following:
/* add rows to data table */ for (var i = 0; i < 100; i++) { var dataRow = dataTable.NewRow(); dataRow.Cells.GetNamedItem("ID").Value = i; dataRow.Cells.GetNamedItem("Text").Value = "Item " + i; dataRow.Cells.GetNamedItem("Bool").Value = (i % 3 != 0); dataRow.Cells.GetNamedItem("Desc").Value = "Description " + i; dataTable.Rows.Add(dataRow); } |
Everything has been configured. Finally, bind the data table to WebCombo.
/* bind the data table to WebCombo */ combo.SetDataSource(dataTable); combo.DataBind(); combo.Render(); combo.ShowDropDown(); event.cancelBubble = true; event.returnValue = false; |
The CreateData() function has been completed. You can invoke this function using any control, such as using HTML Input Button's OnClick event.
function CreateData() { var combo = ISGetObject("WebCombo1"); var dataTable = new ISDataTable(); var idColumn = new ISDataColumn(dataTable); var textColumn = new ISDataColumn(dataTable); var checkColumn = new ISDataColumn(dataTable); var descColumn = new ISDataColumn(dataTable); /* setup data columns */ dataTable.Name = dataTable.TableName = "Root"; idColumn.Name = idColumn.ColumnName = "ID"; textColumn.Name = textColumn.ColumnName = "Text"; checkColumn.Name = checkColumn.ColumnName = "Bool"; descColumn.Name = descColumn.ColumnName = "Desc"; /* add columns to data table */ dataTable.Columns.Add(idColumn); dataTable.Columns.Add(textColumn); dataTable.Columns.Add(checkColumn); dataTable.Columns.Add(descColumn); /* add rows to data table */ for (var i = 0; i < 100; i++) { var dataRow = dataTable.NewRow(); dataRow.Cells.GetNamedItem("ID").Value = i; dataRow.Cells.GetNamedItem("Text").Value = "Item " + i; dataRow.Cells.GetNamedItem("Bool").Value = (i % 3 != 0); dataRow.Cells.GetNamedItem("Desc").Value = "Description " + i; dataTable.Rows.Add(dataRow); } /* bind the data table to WebCombo */ combo.SetDataSource(dataTable); combo.DataBind(); combo.Render(); combo.ShowDropDown(); event.cancelBubble = true; event.returnValue = false; } |
Related Topics