울트라 웹그리드 더블클릭시 이벤트 설정

울트라 웹그리드 더블클릭시 이벤트 설정하기

Before You Begin:

In the course of a web application, you may find it helpful to the user to change colors as a result of some grid event.

In the Page_Load event, the DataTable is created and bound to the WebGrid. For more information about this event, see Data Binding.

Follow These Steps:

The following code changes the WebGrid using the InitializeLayout event.

In Visual Basic:

Private Sub UltraWebGrid1_InitializeLayout(ByVal sender As Object, _
  ByVal e As Infragistics.WebUI.UltraWebGrid.LayoutEventArgs) Handles UltraWebGrid1.InitializeLayout
	' Increase the width of the 2nd and 3rd columns (indexes 1 and 2)
	Me.UltraWebGrid1.DisplayLayout.Bands(0).Columns(1).Width = Unit.Pixel(200)
	Me.UltraWebGrid1.DisplayLayout.Bands(0).Columns(2).Width = Unit.Pixel(200)

	' Set some colors that will be changed later on the client
	Me.UltraWebGrid1.DisplayLayout.HeaderStyleDefault.BackColor = Color.CadetBlue
	Me.UltraWebGrid1.DisplayLayout.RowStyleDefault.BackColor = Color.AliceBlue
	Me.UltraWebGrid1.DisplayLayout.RowAlternateStyleDefault.BackColor = Color.BlanchedAlmond
End Sub

In C#:

private void UltraWebGrid1_InitializeLayout(object sender, 
  Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)
{
	// Increase the width of the 2nd and 3rd columns (indexes 1 and 2)
	this.UltraWebGrid1.DisplayLayout.Bands[0].Columns[1].Width = Unit.Pixel(200);
	this.UltraWebGrid1.DisplayLayout.Bands[0].Columns[2].Width = Unit.Pixel(200);

	// Set some colors that will be changed later on the client
	this.UltraWebGrid1.DisplayLayout.HeaderStyleDefault.BackColor = Color.CadetBlue;
	this.UltraWebGrid1.DisplayLayout.RowStyleDefault.BackColor = Color.AliceBlue;
	this.UltraWebGrid1.DisplayLayout.RowAlternateStyleDefault.BackColor = Color.BlanchedAlmond;
}

Switch to the design view. Select the WebGrid and navigate in the properties grid under the DisplayLayout to ClientSideEvents. Under ClientSideEvents locate the DbleClickHandler, and select in its drop down Add new Handler. A dialog will appear where you can change the name of the event. Once you click OK on the dialog it will take you into the HTML view.

The DblClickHandler takes 2 parameters, the gridName and the cellId of the part of the grid double clicked. Here the cell that was clicked on is returned by the igtbl_getCellById method, and if it is a cell, the fontWeight is set to "Bold". By querying cell.Element, you are accessing the HTML <TD> element. The style.fontWeight property is a standard Cascading Style Sheets property.

Note: JavaScript is case sensitive. igtbl_getCellById(cellid) will not work, nor will igtbl_GetCellById, etc.

In JavaScript:

function UltraWebGrid1_DblClickHandler(gridName, cellId){
	var cell = igtbl_getCellById(cellId);
	if (cell != null)
		cell.Element.style.fontWeight = "Bold";
}

The next function is run by clicking on a button on the page. The button is an HTML element that looks similar to this:
In HTML:
<INPUT onclick="ChangeCell();" type="button" value="Button">
examine what happens in each function. ChangeCell queries the grids active cell, and changes the background color to red. igtbl_getActiveCell("GridName") returns a cell object that represents the current cell. "backgroundColor" is another of the standard CSS properties. This function closely resembles the previous one.

In JavaScript:
```
function ChangeCell(){
    var activeCell = igtbl_getActiveCell("UltraWebGrid1");
    if (activeCell != null)
    activeCell.Element.style.backgroundColor = "Red";
}
```
Run the project. Select a cell in the grid. Click the button. Watch the color, and font weight (the "boldness") change as you click the buttons, or double click on a cell.

What You Accomplished:

Through server-side and client-side code you were able to change the colors of WebGrid's appearance, and have it respond to double-clicks.

엔돌슨의 IT이야기

울트라 웹그리드 더블클릭시 이벤트 설정