In addition to built-in client services, you can also programmatically create your own datasource entirely in client-side, and then bind it to WebGrid via API. This mode is called ClientDataSource.

In this topic, you will learn how to bind client-binding to Client DataSource.

To bind client-binding to Client DataSource

Open WebGrid.NET Designer and choose DataSource (Advanced).
Select Client-side binding (Advanced) and Select Manually assign datasource in client side under client side binding settings.
Go to Advanced tab. Select RootTable and set Data Key Field to ID.
Expand RootTable and select Columns. Add 3 column afterwards.

For the 1st column, set the following properties.

Properties	Value
Name	ID
Caption	ID
DataMember	ID
Data Type	System.Int32

For the 2nd column, set the following properties.

Properties	Value
Name	Text
Caption	Text
DataMember	Text
Data Type	System.String

For the 3rd column, set the following properties.

Properties	Value
Name	Bool
Caption	Check
DataMember	Bool
Data Type	System.Boolean
ColumnType	CheckBox

Create the following function using client-side API.

Javascript

Copy Code

function CreateData()
{
   var grid = ISGetObject("WebGrid1");
   var dataTable = new ISDataTable();
   var idColumn = new ISDataColumn(dataTable);
   var textColumn = new ISDataColumn(dataTable);
   var checkColumn = 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";

   /* add columns to data table */
   dataTable.Columns.Add(idColumn);
   dataTable.Columns.Add(textColumn);
   dataTable.Columns.Add(checkColumn);

   /* 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);

      dataTable.Rows.Add(dataRow); 
   }

   /* bind the data table to WebGrid */
   grid.RootTable.Name = "Root";
   grid.SetDataSource(dataTable);
   grid.DataBind();
   grid.Render();
            
   event.cancelBubble = true;
   event.returnValue = false;
}

Trigger CreateData() function using Button onclick event.

<button onclick="CreateData()">Create Unbound DataSet</button>
Run the project.

Intersoft WebGrid Documentation
How-to: Bind client-binding to Client DataSource
See Also Send comments on this topic.

To bind client-binding to Client DataSource

See Also