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

When trying to use the UltraWebGrid’s FilterRow functionality, if you are handling its server-side Click event, you will not get the functionality you expect. When a cell in the FilterRow is clicked, the grid posts back, the cell loses focus, and the FilterRow drop down never appears. The way around this is to handle the client-side click event for the grid and cancel the postback if a cell in the filter row is clicked.
Additional Information

First set the UltraWebGrid’s AllowRowFiltering property to OnClient and its FilterUIType property to FilterRow.
In C#:
UltraWebGrid1.DisplayLayout.Bands[0].FilterOptions.AllowRowFiltering = Infragistics.WebUI.UltraWebGrid.RowFiltering.OnClient;
UltraWebGrid1.DisplayLayout.Bands[0].FilterOptions.FilterUIType = Infragistics.WebUI.UltraWebGrid.FilterUIType.FilterRow;

In VB.Net:
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:
In C#:
UltraWebGrid1.DataKeyField = "CustomerID";

In VB.Net:
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)
}
}
}

How to move columns

If you want the columns of data in your grid to be in a different order from the order in which it resides in the database, you must manually move the columns.
Additional Information

Open a project that has a grid on it. The "Bind to a DataTable" tutorial is a good place start if you don't have any other projects. Add an ASP button in the design view, and double click it to see the code-behind.

In the button's "click" event add this code:
VB:
UltraWebGrid1.DisplayLayout.Bands(0).Columns(2).Move(0)

C#:
UltraWebGrid1.DisplayLayout.Bands[0].Columns[2].Move(0);

Run the project. Click the button, and a third column will be move to the first column, and the other columns will shift to the right.

Since moving a column bumps all the columns over one, if you are moving muliple columns it is a good idea to start with whichever one you want to appear leftmost. For example:
VB:
UltraWebGrid1.DisplayLayout.Bands(0).Columns.FromKey("SomeColumn").Move(0)
UltraWebGrid1.DisplayLayout.Bands(0).Columns.FromKey("NextColumn").Move(1)
UltraWebGrid1.DisplayLayout.Bands(0).Columns.FromKey("AnotherColumn").Move(2)

C#:
UltraWebGrid1.DisplayLayout.Bands[0].Columns.FromKey("SomeColumn").Move(0);
UltraWebGrid1.DisplayLayout.Bands[0].Columns.FromKey("NextColumn").Move(1);
UltraWebGrid1.DisplayLayout.Bands[0].Columns.FromKey("AnotherColumn").Move(2);

How to change the width of columns in ultrawebgrid

At design-time, follow these steps:

Click on the Columns collection in the property pages.
Select the column you wish to change.
Entering an Integer will set the width in pixels.
Entering a % will set the width of the column to that percentage of the total size of the grid (example: 25% will set the column to be 25% of the total grid width).

At run-time, use the following code.

In VB.Net:

UltraWebGrid1.Columns(0).Width = Unit.Pixel(100)
UltraWebGrid1.Columns(0).Width = Unit.Percentage(33.3)

In C#:

UltraWebGrid1.Columns(0).Width = Unit.Pixel(100);
UltraWebGrid1.Columns(0).Width = Unit.Percentage(33.3);

How to prevent a cell from being edited on the client in UltraWebGrid in javascript?

Here is a method for implementing the functionality of editing only certain cells when the column's AllowUpdate property is set to false. If you cancel the BeforeEnterEditMode event on the client by returning true, the user will not be able to edit that cell.

First, add a handler for the client-side event BeforeEnterEditMode. This property can be set either in the Property Pages under displaylayout>ClientsideEvents>BeforeEnterEditMode or in code:

UltraWebGrid1.DisplayLayout.ClientSideEvents.BeforeEnterEditModeHandler = "BeforeEdit"

This event receives two parameters, gridname and cellid. You would return true to cancel the event which would stop the cell from being edited. The following script demostrates how to cancel the event for any row whose cell in column one ha a value of true.

function BeforeEdit(gridname, cellid)
{
//get the cell that is about to be edited
var row=igtbl_getRowById(cellid);
//get the value for column 1 in the current row, gets the value by getting the cell's row object then goes into the row's cell array
var value=row.getCell(1).getValue();
//check if the value is true, if so then don't allow editing of the column, cancel event by returning true, else do nothing and allow editing
if(value==true)
{
return true;
}
//or in this case since we are basing the editing on the boolean value you could just say
//return value and omit the if statement.
}

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());
}