This walkthrough shows you how to use OnTheFlyPostBack.
During this walkthrough, you will learn how to do the following :
- Binding Flat Datasource to WebGrid.
- Use SendCustomRequest to perform call back.
In order to complete this walkthrough, you will need the following:
- Access to the Microsoft Access Northwind database.
- Visual Studio 2005/2008/2010 Application.
- Bind WebGrid
to AccessDataSource.
- Drag and drop four TextBox controls from toolbox to WebForm.
- Add OnRowSelect client side event.
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;
}
|
- 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.
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);
}
}
|
- Add SetTxtValue client side function used to display values sent from server
to TextBox.
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;
}
|