Adding a Mutually Exclusive Radio Button Column to WebGrid

In JavaScript:

//This is used to activate the Grid Row whenever we click on a radio button
function activateGridRow(theIndex){
igtbl_getGridById('UltraWebGrid1').Rows.getRow(theIndex).activate();
}

As you notice, we are simply using the client side object model of the WebGrid to access a row at the specified Index. Once we access the Row, we will activate it.

Now that we have some JavaScript to activate the Row, we need to somehow put Radio Buttons inside the cells of the WebGrid’s column that will be dedicated for this purpose.

private void UltraWebGrid1_InitializeLayout(object sender,
Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)
{
e.Layout.AllowSortingDefault = AllowSorting.Yes;
e.Layout.HeaderClickActionDefault = HeaderClickAction.SortSingle;

//add the Radio Button Column
e.Layout.Bands[0].Columns.Insert(0,"RADIO");
e.Layout.Bands[0].Columns.FromKey("RADIO").Header.ClickAction = HeaderClickAction.Select;
}

Now that we have added an unbound column and moved it into position so that it is the very first column in the WebGrid, we can Bind to some Data and then iterate through the Rows and add our HTML:

private void Page_Load(object sender, System.EventArgs e)
{
if (this.IsPostBack)
return;

this.sqlDataAdapterProducts.Fill(this.dataSetNorthWind1.Products);
this.UltraWebGrid1.DataBind();

this.initRadioButtons(); //set up the Radio Buttons
}

private void initRadioButtons()
{
if (this.UltraWebGrid1.Rows.Count > 0)
{
//Add the HTML to create the radio button and connect the onclick event to our JavaScript
for (int i = 0; i < value =" @" name="TheRadioGroup" onclick="'activateGridRow(" type="radio">";
}
}
}

private void UltraWebGrid1_SortColumn(object sender,
Infragistics.WebUI.UltraWebGrid.SortColumnEventArgs e)
{
//Sorting throws off the Index, so set the radio buttons up again in this event
this.initRadioButtons();
}

Now that everything is set up, whenever the page loads, the WebGrid gets its data and we add and move the Radio Button column. Then we iterate through the rows and set the HTML for each cell that is part of the Radio Button Column. Now the user can click on each Radio Button in the Column and cause the entire row to be Activated.