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. Select an instance of WebCombo in designer surface.
  2. Press F4 to bring up the Property Window.
  3. Set  BindingOperationMode  to  ClientBinding .
  4. Expand ClientBindingSettings and set DataSourceType property to ClientDataSource.
  5. Set DataTextField to "Text".
     
  6. Set DataValueField to "ID".
     
  7. Open WebCombo Designer, select Data Source from the left navigation. Tick the Enable Multiple Columns checkbox.
     

  8. From the WebCombo Designer, select Columns from the left navigation. Add a column with following detail:

    PropertyValue
    NameText
    BaseFieldNameText
    HeaderTextItem Text



     

  9. Repeat above step and add another column with following detail: 

    PropertyValue
    NameDesc
    BaseFieldNameDesc
    HeaderTextItem Description
    Width120

     

  10. Create a function called CreateData(). In the function, there are several things that need to be configured.

  11. 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);

  12. 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";

  13. 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);

  14. 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);
}

  15. 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;

  16. 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