Intersoft WebCombo Documentation
How-to: Bind WebCombo to Client-side Data Source
See Also Send comments on this topic.
Intersoft WebCombo > WebCombo Features Overview > Features Added In WebCombo 5 > Client Binding API > How-to: Bind WebCombo to Client-side Data Source

Glossary Item Box

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.

To bind WebCombo to Client-side Data Source

  1. Right-click on WebCombo control and select Properties.
  2. Expand ClientBindingSettings and set DataSourceType property to ClientDataSource.
  3. Create a function called CreateData(). In the function, there are several things that need to be configured.
  4. First of all, create a DataTable using the following code:

    Javascript Copy Code
    var combo = ISGetObject("wcClient");
var dataTable = new ISDataTable();
var idColumn = new ISDataColumn(dataTable);
var textColumn = new ISDataColumn(dataTable);
var checkColumn = new ISDataColumn(dataTable);
var descColumn = new ISDataColumn(dataTable);
  5. Then, set up the data columns like following:

    Javascript Copy Code
    /* 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";
  6. Next, add the created columns to the data table:

    Javascript Copy Code
    /* add columns to data table */
dataTable.Columns.Add(idColumn);
dataTable.Columns.Add(textColumn);
dataTable.Columns.Add(checkColumn);
dataTable.Columns.Add(descColumn);
  7. The columns has been set. Now, add rows to the data table like following:

    Javascript Copy Code
    /* 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);
}
  8. Everything has been configured. Finally, bind the data table to WebCombo.

    Javascript Copy Code
    /* bind the data table to WebCombo */
combo.SetDataSource(dataTable);
combo.DataBind();
combo.Render();
combo.ShowDropDown();

event.cancelBubble = true;
event.returnValue = false;
  9. The CreateData() function has been completed. You can invoke this function using any control, such as using HTML Input Button's OnClick event.

    Javascript Copy Code
    function CreateData()
{
   var combo = ISGetObject("wcClient");
   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;
}

See Also