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.
}