In order to complete this walkthrough, you will need the following:

• Access to the Microsoft Access Northwind database.
• Visual Studio 2005/2008/2010 Application.

1. Bind WebGrid to AccessDataSource control.
2. Drag and drop four TextBox controls from toolbox to WebForm.
3. Add OnRowSelect client side event.
   
   

   C#	Copy Code
   function WebGrid1_OnRowSelect(controlId, tblName, rowIndex, rowEl) { var grid = ISGetObject("WebGrid1"); var selRow = grid.GetSelectedObject().GetRowElement(); grid.AddInput("keyValue", selRow.keyValue); grid.SendCustomRequest(); return true; }

   
   
4. After SendCustomRequest then WebGrid will call InitializePostBack server side event. In InitializePostBack insert  these codes to retrieve record based on the selected row's keyValue. After the column value is retrieved, you then call a JavaScript function in the client with parameters set to the columns' value.
   
   

   C#

   Copy Code

   private void WebGrid1_InitializePostBack(object sender, ISNet.WebUI.WebGrid.PostbackEventArgs e) { if(e.Action == ISNet.WebUI.WebGrid.PostBackAction.Custom) { string keyValue = Request.Form["keyValue"].ToString(); DataSet ds = (DataSet)WebGrid1.DataSource; string filter = "CustomerID = '" + keyValue + "'"; DataRow[] rows = ds.Tables["Customers"].Select(filter); string Address = rows[0]["Address"].ToString(); string City = rows[0]["City"].ToString(); string CompanyName = rows[0]["CompanyName"].ToString(); string ContactName = rows[0]["ContactName"].ToString(); ISNet.WebUI.FunctionParameter[] prms = new ISNet.WebUI.FunctionParameter[4]; prms[0] = new ISNet.WebUI.FunctionParameter(Address,"string"); prms[1] = new ISNet.WebUI.FunctionParameter(City,"string"); prms[2] = new ISNet.WebUI.FunctionParameter(CompanyName,"string"); prms[3] = new ISNet.WebUI.FunctionParameter(ContactName,"string"); this.WebGrid1.ClientAction.InvokeScript("SetTxtValue", prms); } }

   
   
5. Add SetTxtValue client side function used to display values sent from server to TextBox.
   
   

   JavaScript	Copy Code
   function SetTxtValue(Address,City,CompanyName,ContactName) { document.getElementById("txtAddress").value = Address; document.getElementById("txtCity").value = City; document.getElementById("txtCompanyName").value = CompanyName; document.getElementById("txtContactName").value = ContactName; }