Prevent Editing In WebGrid Child Row Based On Value In Parent Row

To accomplish this, handle the BeforeEnterEditMode client-side event. Depending on the value of the parent row we can either cancel the event or allow it to continue.

Example flow in pseudo-code for this implementation:
1. Is the row a child row? If so, we should check the value of one of the cells on the parent; if not, allow editing as normal.
2. Examine the Value of a boolean cell in the parent row.
3. If the Value is false, then cancel the event, so that edit mode is never entered.
4. If the value is true, allow editing as normal.

In JavaScript:

function UltraWebGrid1_BeforeEnterEditModeHandler(gridName, cellId)
{
var oRow = igtbl_getRowById(cellId);

if ((oRow.ParentRow != null) && (oRow.ParentRow.getCell(3).getValue() == false))
{
// Return true to cancel the event.
return true;
}
else
{
// Return false to let processing continue uninterrupted
return false;
}
}

Make a WebGrid cell read-only in certain conditions

Server-Side:

In the InitializeRow event, set AllowEditing property to "AllowEditing.No" after checking the condition. In this example, updates are forbidden for cells in the fourth column if the value is already greater than 5000:

private void UltraWebGrid1_InitializeRow(object sender, Infragistics.WebUI.UltraWebGrid.RowEventArgs e)
{
if ((int) e.Row.Cells[3].Value > 5000)
{
e.Row.Cells[3].AllowEditing = Infragistics.WebUI.UltraWebGrid.AllowEditing.No;
}
}


Client-Side:

Disable editing on the cell in the BeforeEnterEditMode client-side event handler by canceling the event (returning a value of "true") after checking the condition. In this example, updates are forbidden for cells that belong in the "Dept" column whose value is not "Finance":

In JavaScript:

function UltraWebGrid1_BeforeEnterEditModeHandler(gridName, cellId)
{
var c = igtbl_getCellById(cellId);

if (c.Column.Key == "Dept" && c.getValue() != "Finance")
{
return true;
}
}

Retrieve value of the selected rows in WebCombo on the client

Accessing the selected rows in a WebCombo requires accessing its underlying WebGrid control. The following example uses the AfterSelectChange client-side event of the WebCombo to get the selected row's cell values, and displays each value in an alert() dialog.



In JavaScript:

function WebCombo1_AfterSelectChange(webComboId)
{
// get the combo from the passed-in id
var combo = igcmbo_getComboById(webComboId);

// get the currently selected row in webcombo
var index = combo.getSelectedIndex();

// get grid reference from webcombo
var grid = combo.getGrid();

// get selected row in grid
var row = grid.Rows.getRow(index);

// get cell values in row
alert(row.getCell(0).getValue());
alert(row.getCell(1).getValue());
alert(row.getCell(2).getValue());
alert(row.getCell(3).getValue());
}

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.

get rid of scrollbars and set maximum width and height in UltraWebGrid

this.ultraWebGrid1.Width = Unit.Percentage(100);
this.ultraWebGrid1.Height = Unit.Percentage(100);
this.ultraWebGrid1.DisplayLayout.FrameStyle.CustomRules = "table-layout:auto";

Copy selected rows from a WebGrid to Excel using the clipboard

When copying from the clipboard to Excel, the default cell delimiter is a tab character ('\t'), while the row delimiter is the newline character ('\n'). Therefore, in Javascript, you can build a string of the cells and rows by iterating through the selected rows collection of the WebGrid, and inserting the proper delimiters as necessary. For this article, this functionality is wired to the standard key combination Ctrl-C, using a combination of the KeyDownHandler and KeyUpHandler client-side events:

In JavaScript:


var ctrlPressed = false;

function UltraWebGrid1_KeyDownHandler(gridName, cellId, key)
{
if (key == 17)
ctrlPressed = true;
else if (ctrlPressed && key == 67)
{
var rowString = "";
var isFirstRow = true;
var grid = igtbl_getGridById(gridName);

for (var rowId in grid.SelectedRows)
{
var row = igtbl_getRowById(rowId);

if (!isFirstRow)
rowString += '\n';

for (var i=0; i < cell =" row.getCell(i);" isfirstrow =" false;" key ="="" ctrlpressed =" false;">
Since there is no way to tell Excel to paste only into a certain column of a row using a delimiter, this functionality will only work correctly for selected rows.

Display a progress bar inside a cell of a WebGrid

The WebGrid allows the injection of any type of any HTML object inside a cell, simply by setting the cell's Value property on the server to the desired HTML string. Further, the container for any such HTML element is the cell's rectangle; thus, we can set the width of such an HTML element as a percentage of the cell's width. With this in mind, we can use a "DIV" HTML element, set it's background color as desired, and set its width to the desired percentage of progress.

To accomplish this, handle the InitializeLayout event of the WebGrid to add an unbound column, which will contain the simulated progress bar. Also, handle the InitializeRow event, where the HTML will be added to the cell of this column, with its width set as desired.


Handle the InitializeLayout event of the WebGrid to set its layout properties. For this example, we will add an unbound column which the user is not allowed to update:

private void UltraWebGrid1_InitializeLayout(object sender, Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)
{
// Configure the WebGrid so that it displays all its data,
// and so the user can update and resize the columns
this.UltraWebGrid1.Width = Unit.Empty;
this.UltraWebGrid1.Height = Unit.Empty;
this.UltraWebGrid1.DisplayLayout.TableLayout = Infragistics.WebUI.UltraWebGrid.TableLayout.Auto;
e.Layout.Bands[0].AllowUpdate = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes;
e.Layout.Bands[0].AllowColSizing = Infragistics.WebUI.UltraWebGrid.AllowSizing.Free;

// Add an unbound, not-updatable column to contain show the progress bar
e.Layout.Bands[0].Columns.Add("ProgressBar","Progress Bar");
e.Layout.Bands[0].Columns.FromKey("ProgressBar").AllowUpdate = Infragistics.WebUI.UltraWebGrid.AllowUpdate.No;
}


Handle the InitializeRow event of the WebGrid to populate row-specific information that will be set at the time of data binding. For this example, we will determine the percentage value to use as the width of our progress bar, and use this to inject an HTML DIV element into the Progress Bar cell for this row:


private void UltraWebGrid1_InitializeRow(object sender, Infragistics.WebUI.UltraWebGrid.RowEventArgs e)
{
// Inject a DIV element inside the progress bar cell, using the value in
// the Completed column as the percentage width of the element
e.Row.Cells.FromKey("ProgressBar").Value = "

";
}

Hiding and showing Add New buttons for specific Bands in WebGrid

To accomplish this, you will need to get a reference to the Add New Button element on the client. Once we have that reference, then it is just a matter of setting the "display" property to "none" as follows:

In JavaScript:

//When the Grid initializes, you can use the ID that is

//available in the Event Arguments to get the AddNew

//button's Element. Once we get the Element, set the

//Display type to "none"

function UltraWebGrid1_InitializeLayoutHandler(gridName){
//This is the naming convention for "Band 0 Add New":
var e = document.getElementById(gridName + '_an_0');

//Bands 1, 2, etc would be:
//var e = document.getElementById(gridName + '_an_1');
//var e = document.getElementById(gridName + '_an_2');

if(e){
e.style.display = 'none';
}
}

Add new rows to WebCombo in client-side javascript

Infragistics.WebUI.UltraWebGrid.UltraWebGrid comboGrid = (Infragistics.WebUI.UltraWebGrid.UltraWebGrid) this.WebCombo1.Controls[0];

Then allow add new and updates to the WebGrid

if(comboGrid != null)
{
comboGrid.DisplayLayout.AllowAddNewDefault = Infragistics.WebUI.UltraWebGrid.AllowAddNew.Yes;
comboGrid.DisplayLayout.AllowUpdateDefault = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes;
}

Write javascript to call the igtbl_addNew method to add a new row to the grid inside of the combo:

function AddNewRow()
{
var cbo = igcmbo_getComboById('WebCombo1');
var row = igtbl_addNew(cbo.grid.Id, 0);
row.getCell(0).setValue(11);
row.getCell(1).setValue("Name11");
row.getCell(2).setValue(new Date());
}

Add new rows to WebCombo in client-side javascript

Infragistics.WebUI.UltraWebGrid.UltraWebGrid comboGrid = (Infragistics.WebUI.UltraWebGrid.UltraWebGrid) this.WebCombo1.Controls[0];

Then allow add new and updates to the WebGrid

if(comboGrid != null)
{
comboGrid.DisplayLayout.AllowAddNewDefault = Infragistics.WebUI.UltraWebGrid.AllowAddNew.Yes;
comboGrid.DisplayLayout.AllowUpdateDefault = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes;
}

Write javascript to call the igtbl_addNew method to add a new row to the grid inside of the combo:

function AddNewRow()
{
var cbo = igcmbo_getComboById('WebCombo1');
var row = igtbl_addNew(cbo.grid.Id, 0);
row.getCell(0).setValue(11);
row.getCell(1).setValue("Name11");
row.getCell(2).setValue(new Date());
}

FilterRow functionality in the UltraWebGrid when handling its server-side Click event

First set the UltraWebGrid’s AllowRowFiltering property to OnClient and its FilterUIType property to FilterRow.

UltraWebGrid1.DisplayLayout.Bands[0].FilterOptions.AllowRowFiltering = Infragistics.WebUI.UltraWebGrid.RowFiltering.OnClient;
UltraWebGrid1.DisplayLayout.Bands[0].FilterOptions.FilterUIType = Infragistics.WebUI.UltraWebGrid.FilterUIType.FilterRow;

A DataKey must be set so that the UltraWebGrid can distinguish between the FilterRow and a regular GridRow

UltraWebGrid1.DataKeyField = "CustomerID";

Add a client-side handler for the UltraWebGrid’s CellClick event and check for a DataKey to allow postback:

In Javascript:

function UltraWebGrid1_CellClickHandler(gridName, cellId, button){
var rowObj = igtbl_getRowById(cellId);
if( rowObj != null )
{
if( rowObj.getDataKey() == null )
{
igtbl_cancelPostBack(rowObj.gridId)
}
}
}

use the WebCombo as a column editor in WebGrid

The WebDataInput controls can be used as editors for columns within the WebGrid, the EditorControlID property has been added to the column object. This property should be assigned the UniqueID of the control you wish to use an editor. In the following code, you will see that the ValueList.WebCombo property is no longer used and the EditorControlID should be utilized. The code below is placed within the Page_Load event and outlines all of the necessary steps for using a bound WebCombo as an editor for a column within a bound WebGrid. The Products and Categories table of the Northwind database serve as the respective datatables.


if (! this.IsPostBack)
{ //fill the adapters
this.oleDbDataAdapter1.Fill(this.dataSet11, this.dataSet11.Products.TableName);
this.oleDbDataAdapter2.Fill(this.dataSet11,this.dataSet11.Categories.TableName);
//set the datasource of the grid and databind
this.UltraWebGrid1.DataSource = this.dataSet11.Products;
this.UltraWebGrid1.DataBind();
//set the datasource and text and value fields of the combo... databind
this.WebCombo1.DataSource = this.dataSet11.Categories;
this.WebCombo1.DataTextField = this.dataSet11.Categories.CategoryNameColumn.ColumnName;
this.WebCombo1.DataValueField = this.dataSet11.Categories.CategoryIDColumn.ColumnName;
this.WebCombo1.DataBind();
//make sure the grid allows for editing
this.UltraWebGrid1.DisplayLayout.AllowUpdateDefault = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes;
//assign the webcombo as an editor for the CategoryID column in the grid
this.UltraWebGrid1.DisplayLayout.Bands[0].Columns.FromKey("CategoryID").Type = Infragistics.WebUI.UltraWebGrid.ColumnType.DropDownList;
this.UltraWebGrid1.DisplayLayout.Bands[0].Columns.FromKey("CategoryID").EditorControlID = this.WebCombo1.UniqueID;
}