Infragistics UltraWebGrid Control Discussions.Ultrawebgrid.blogspot.com offers ultrawebgrid asp.net

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

2009-06-01T18:44:00.001-07:00

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

2009-06-01T18:41:00.000-07:00

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

2009-06-01T18:39:00.000-07:00

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?

2009-06-01T18:36:00.000-07:00

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

2008-12-03T11:46:00.000-08:00

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

2008-12-03T11:45:00.000-08:00

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

2008-12-03T11:44:00.000-08:00

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

2008-12-03T11:42:00.000-08:00

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

2008-12-03T11:41:00.001-08:00

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

2008-12-03T11:39:00.000-08:00

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

2008-12-03T11:37:00.000-08:00

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

2008-12-03T11:35:00.000-08:00

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

2008-12-03T11:33:00.001-08:00

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

2008-12-03T11:33:00.000-08:00

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

2008-12-03T11:28:00.000-08:00

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

2008-12-03T11:22:00.000-08:00

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

Filtering the XSLT / AJAX WebGrid

2008-09-21T12:02:00.001-07:00

Whenever we enable the WebGrid’s XML Load On Demand functionality, this essentially makes use of AJAX requests to fetch the additional rows as they are scrolled into view. Performing other programmatic actions against the Data Source of the Grid such as filtering and sorting requires us to follow some important guidelines so that you will get the results that you expect. This article will show how to allow filtering on the underlying DataView that the WebGrid is bound to.

Whenever we have XML Load On Demand functionality enabled, any posting back will essentially cause the page and the WebGrid to be reset back to the way it was since the first time it was loaded. For example, if the page with the Grid is loaded and the user requests several batches of rows and then performs a full postback, the Grid will be loaded on the page with the same amount of rows that were initially loaded on the first page load. The Web Server is not aware of any additional rows that were fetched with AJAX requests. In the case that we want to allow the user to filter the data that the WebGrid is bound to, you will need to essentially clear the Grid rows explicitly and then rebind to the new result set. You can think of the XML Load On Demand as a form of “Paging” where you have a fixed Data Source and as you scroll through the records, the additional “Pages” are fetched using AJAX requests. The WebGrid needs to have the same exact Data Source each time its _InitializeDataSource event is fired. If you plan on changing the Data Source in any way (Ex: change its schema, change the rows that it contains, etc) you will need to clear the Grid rows and then reassign the Data Source and then DataBind. This will now allow the Grid to work with the new Data Source.

Step-By-Step Example

In this particular implementation, we are going to follow a particular pattern to have the following functionality:

1) The page will load with all records from a particular table
2) The user has the ability to enter text and apply a filter to the Data
3) The page then reloads with the resulting records

To achieve this functionality within a standard grid would be very simple. You would retrieve all of your data the first time and then whenever you need to apply a filter, you would set the filter and then rebind the grid and the page will reload with the new data. With the AJAX functionality enabled, we will need to work with the understanding that the WebGrid uses the InitializeDataSource event to build itself up and create its rows. Whenever applying a filter through server side code, it will be required that the WebGrid rows are all completely removed and then we explicitly assign the DataSource and then call DataBind. Here is the following code to further illustrate what is actually done:

/// Make a property that returns a cached set of Data
///

public WebGrid_AJAX_Filtering_DataView_2005V2_CS.DataSetNorthWind.OrdersDataTable Orders
{
get
{
if (Session["data"] == null)
{
this.sqlDataAdapterOrders.Fill(this.dataSetNorthWind1.Orders);
this.dataSetNorthWind1.Orders.DefaultView.Sort = "CustomerID ASC";
Session["data"] = this.dataSetNorthWind1.Orders;
}

return (WebGrid_AJAX_Filtering_DataView_2005V2_CS.DataSetNorthWind.OrdersDataTable) Session["data"];
}
}

///

/// Give the grid its Data
///

///

///
private void UltraWebGrid1_InitializeDataSource(object sender, Infragistics.WebUI.UltraWebGrid.UltraGridEventArgs e)
{

this.UltraWebGrid1.DataSource = this.Orders.DefaultView;
}

///

/// Whenever we click on this button, we will apply a filter to the DataView.
/// We need to clear the Grid rows and then rebind it explicitly so that the results
/// are shown.
///

///
///
private void Button1_Click(object sender, System.EventArgs e)
{
this.UltraWebGrid1.Rows.Clear();
if (this.TextBox1.Text == "")
{
this.Orders.DefaultView.RowFilter = "";
}
else
{
this.Orders.DefaultView.RowFilter = "CustomerID LIKE '%" + this.TextBox1.Text + "%'" ;
}

this.Label2.Text = this.Orders.DefaultView.Count + " Records Were Found";

this.UltraWebGrid1.DataSource = this.Orders.DefaultView;
this.UltraWebGrid1.DataBind();
}

If you notice, we cache the Orders DataTable in the Session so that the user can work with a particular set of Data. Filtering and sorting can be applied to this cached Data and each time the user applies a filter, the Cached Data is filtered and assigned to the WebGrid. Upon filtering and DataBinding, the WebGrid now has an altered Data Source that will be reloaded with a complete postback. The user can now navigate the new result set by scrolling and causing the AJAX requests to be made against the new result set so that the WebGrid’s InitializeDataSource event can fetch the data that it needs from the Session. This allows a flexible means for the user to work on the Data as well as enjoy the benefit of having the Load On Demand functionality.

Filtering the XSLT / AJAX WebGrid

2008-09-21T12:02:00.000-07:00

Step-By-Step Example

/// Make a property that returns a cached set of Data
///

/// Give the grid its Data
///

///

///
private void UltraWebGrid1_InitializeDataSource(object sender, Infragistics.WebUI.UltraWebGrid.UltraGridEventArgs e)
{

this.UltraWebGrid1.DataSource = this.Orders.DefaultView;
}

///

/// Whenever we click on this button, we will apply a filter to the DataView.
/// We need to clear the Grid rows and then rebind it explicitly so that the results
/// are shown.
///

WebGrid header text orient vertically instead of horizontally

2008-09-21T12:01:00.001-07:00

The HTML rendered for the display of the HeaderText can be modified to reorient vertically by adding a DIV tag to the HeaderText of the column.

To show the HeaderText of a column vertically oriented you would need to modify the HeaderText of the column. As the UltraWebGrid eventually renders down as HTML, modification of the HTML elements, or adding new HTML elements as is the case in this sample, enhances the customizable look and feel of the UltraWebGrid.

This solution is based off of IE6+ and will render normally in most other browsers as the attributes on the DIV tag will be ignored.

e.Layout.Bands[0].Columns.FromKey("Active").HeaderText = "

" + e.Layout.Bands[0].Columns.FromKey("Active").HeaderText + "

"
e.Layout.Bands[0].Columns.FromKey("Active").Width = Unit.Pixel(10)

Make a WebGrid cell read-only in certain conditions

2008-09-21T12:00:00.000-07:00

Sometimes it is necessary to make a WebGrid cell read-only based on some condition. This article shows how to set a cell as read-only, which can be done on the client-side or server-side.

To do this on the server, set the AllowEditing property of the cell to "AllowEditing.No". On the client, the cell needs to be disabled using the BeforeEnterEditMode client-side event handler.

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

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

2008-09-21T11:58:00.001-07:00

You can make a WebGrid display with no scrollbars, and fit its height and width to the size of the browser.

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

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

2008-09-21T11:57:00.000-07:00

hide the AddNew button for some, but not all of the bands in UltraWebGrid

2008-09-21T11:53:00.000-07:00

This is possible through some JavaScript code.

The Grid's add new buttons are given IDs as follows:
gridname+_+an+_+band number.

Example:
Grid name=UltraWebGrid1
band=1.
the button Id = UltraWebGrid1_an_1

Therefore, place the following JavaScript block AFTER the grid in the HTML, and your grid will no longer display the band 1 add new button:

place this code inside script tags:

igtbl_getElementById("UltraWebGrid1_an_1").style.display="none";

Code for creating grid dynamically

2008-09-21T11:45:00.000-07:00

UltraWebGrid can be created dynamically from code, without being placed on the form at design-time. To accomplish this, a specific constructor must be used which passes in the Id of the control.

To create the grid dynamically, use the following code:

protected Infragistics.WebUI.UltraWebGrid.UltraWebGrid UltraWebGrid1;
UltraWebGrid1 = new Infragistics.WebUI.UltraWebGrid.UltraWebGrid("UltraWebGrid1");
UltraWebGrid1.Columns.Add("col1", "Column 1");
UltraWebGrid1.Columns.Add("col2", "Column 2");
UltraWebGrid1.Columns.Add("col3", "Column 3");

object [] cells = { "Cell1", "Cell2", "Cell3"};
UltraWebGrid1.Rows.Add(new UltraGridRow(cells));
UltraWebGrid1.Rows.Add(new UltraGridRow(cells));
UltraWebGrid1.Rows.Add(new UltraGridRow(cells));
this.Controls.Add(UltraWebGrid1);