Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Anchor
header-1
header-1

To bind WebCombo to Client-side Data Source

  1. Right-click on WebCombo control and select Properties.
  2. Select an instance of WebCombo in designer surface.
  3. Press F4 to bring up the Property Window.
  4. Set  BindingOperationMode  to  ClientBinding .
    Image Added
  5. Expand ClientBindingSettings and set DataSourceType property to ClientDataSource.
    Image Added
  6. Set DataTextField to "Text".
    Image Added 
  7. Set DataValueField to "ID".
    Image Added 
  8. Open WebCombo Designer, select Data Source from the left navigation. Tick the Enable Multiple Columns checkbox.
    Image Added 
  9. From the WebCombo Designer, select Columns from the left navigation. Add a column with following detail:

    PropertyValue
    NameText
    BaseFieldNameText
    HeaderTextItem Text



    Image Added 

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

    PropertyValue
    NameDesc
    BaseFieldNameDesc
    HeaderTextItem Description
    Width120

     

    Image Added

  11. Create a function called CreateData(). In the function, there are several things that need to be configured.
  12. First of all, create a DataTable using the following code:

    Code Block
    titleJavaScript
    languagejs
    var combo = ISGetObject("wcClientWebCombo1");
    var dataTable = new ISDataTable();
    var idColumn = new ISDataColumn(dataTable);
    var textColumn = new ISDataColumn(dataTable);
    var checkColumn = new ISDataColumn(dataTable);
    var descColumn = new ISDataColumn(dataTable);
  13. Then, set up the data columns like following:

    Code Block
    titleJavaScript
    languagejs
    /* setup data columns */
    DataTabledataTable.Name = dataTable.TableName = "Root";
    idColumn.Name = idColumn.ColumnName = "ID";
    textColumn.Name = textColumn.ColumnName = "Text";
    checkColumn.Name = checkColumn.ColumnName = "Bool";
    descColumn.Name = descColumn.ColumnName = "Desc";
  14. Next, add the created columns to the data table:

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

    Code Block
    titleJavaScript
    languagejs
    /* 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  dataRow.Cells.GetNamedItem("Desc").Value = "Description " + i;
        dataTable.Rows.Add(dataRow);
    }
  16. Everything has been configured. Finally, bind the data table to WebCombo.

    Code Block
    titleJavaScript
    languagejs
    /* bind the data table to WebCombo */
    combo.SetDataSource(dataTable);
    combo.DataBind();
    combo.Render();
    combo.ShowDropDown();
    
    event.cancelBubble = true;
    event.returnValue = false;
  17. The CreateData() function has been completed. You can invoke this function using any control, such as using HTML Input Button's OnClick event.

    Code Block
    titleJavaScript
    languagejs
    function CreateData()
    {
        var combo = ISGetObject("wcClientWebCombo1");
        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 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  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

Content by Label
spaces@self
reversetrue
showLabelsfalse
max5
sortmodified
labelswebcombo-kb-how-to-article -bind-webcombo-to-client-side-data-source
showSpacefalse
typepage