UltraWebGrid con celdas asociadas a controles WebCombo y WebDataChooser

WebGrid con celdas asociadas a controles WebCombo y WebDataChooser
 

El siguiente ejemplo muestro como crear celdas en un control WebGrid de tipo DropDownList y cómo llenarlas de datos con un dataset que contiene un listado de paises y a su vez la asociación de controles de tipo calendario a una celda, quiero decir que podriamos asociar diferentes objetos a una celda por ejemplo a un WebNumeric para que la celda solo tome números o como en este ejemplo que la celda se asocia a un control WebDataShooser o de tipo fecha.

 

El método InicializarPropiedadesGrilla lo puede adicionar  en el evento Page_Load de la pagina aspx, igualmente puede hacer lo mismo con el método LlenarUWGDropDownList que permite asociar a una celda del control WebGrid una celda de tipo DropDownList como ilustrra la imagen 1 para que el usuario seleecione un Pais de la celda de tipo DropDownList y  la imagen 2 muestra como asociar la celda a un control WebDataShooser para que el usuario seleccioné una fecha desde la celda de la grilla.

 

Pasos:

  • Cree un proyecto web en Visual Studio 2005 o 2008
  • Adicione los controles UltraWegGrid, WebDataChooser y WebCombo a la barra ToolBox de .net. "clic derecho en el ToolBox y de clic en la opción Choose Items"

 

 

Controles de infragistics adicionados al ToolBox

 

  • Cree una instancia de un control UltraWebGrid en el formulario .aspx con el siguiente nombre uwgFestivos en el momento en que crea la instancia del control UltraWebGrid se abre la ventana Infragistics Quick Designer cree los siguientes campos y asigneles los nombres PaisId y FechaFestivo en la propiedad Key como se ilustra en las imagenes siguientes.

 

 

  • Cree una instancia de un control WebDateShooser y asignele el nombre wdcFechaFestivo como se ilustra en la imagen.

  • Copiar código fuente de esta sección.

 

CÓDIGO FUENTE:

 

Antes de Adicionar los siguientes fragmentos de código haga referencia de las siguientes librerias en su formulario web.
using Infragistics.Shared;

using

Infragistics.WebUI.UltraWebGrid;

/// Este fragmento de código lo puede adicionar en el evento Page_Load de la pagina aspx y llama /// al método que carga las propiedades que reciben las celdas del WebGrid y asocia los datos del /// dataSet a la celda PaisId de tipo DropDownList  y asocia el control WebDataShoose a la celda /// FechaFestivo del control UltraWebGrid

if (!Page.IsPostBack)

this.InicializarPropiedadesGrilla();

 

/// <summary>
 

/// Establece las propiedades iniciales de la grilla.

/// </summary>

private void InicializarPropiedadesGrilla()
{

/// se crea una instancia de la clase Pais con el nombre objPais

Pais objPais = new Pais();

/// se crea una instancia de la clase DropDownListInfragistics con el nombre objListas

DropDownListInfragistics objListas = new DropDownListInfragistics();
try
{
// Permite agregar nuevos registros, editar y eliminar filas en el control WegGrid
this.uwgFestivos.DisplayLayout.AllowAddNewDefault = Infragistics.WebUI.UltraWebGrid.AllowAddNew.Yes;
this.uwgFestivos.DisplayLayout.AllowUpdateDefault = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes;
this.uwgFestivos.DisplayLayout.AllowDeleteDefault = Infragistics.WebUI.UltraWebGrid.AllowDelete.Yes;
// Permite visualizar el botón de agregar más registros en el control WegGrid
this.uwgFestivos.DisplayLayout.AddNewBox.Hidden = false;
this.uwgFestivos.DisplayLayout.AddNewBox.Prompt = "Adicionar";
// Se puede redimensionar cada columna
this.uwgFestivos.DisplayLayout.AllowColSizingDefault = Infragistics.WebUI.UltraWebGrid.AllowSizing.Free;
// Deshabilita la posibilidad de mover columnas dentro de la grilla
this.uwgFestivos.DisplayLayout.AllowColumnMovingDefault = Infragistics.WebUI.UltraWebGrid.AllowColumnMoving.None;
// Permite ordenamiento de columnas desde el lado cliente
this.uwgFestivos.DisplayLayout.AllowSortingDefault = Infragistics.WebUI.UltraWebGrid.AllowSorting.OnClient;
// Permite editar celdas luego de hacer clic sobre ella
this.uwgFestivos.DisplayLayout.CellClickActionDefault = Infragistics.WebUI.UltraWebGrid.CellClickAction.Edit;
// Deja fijas el encabezado y el pie de la grilla cuando hay scroll
this.uwgFestivos.DisplayLayout.StationaryMargins = Infragistics.WebUI.UltraWebGrid.StationaryMargins.HeaderAndFooter;
// Permite paginar la grilla y la fija a 30 registros por pagina
this.uwgFestivos.DisplayLayout.Pager.AllowPaging = true;
this.uwgFestivos.DisplayLayout.Pager.PageSize = 30;
// Permite quitar de la grilla la primer columna y deshabilita el drag and drop
this.uwgFestivos.DisplayLayout.GroupByBox.Hidden = true;
// La grilla muestra los datos al estilo Outlook
this.uwgFestivos.DisplayLayout.ViewType = Infragistics.WebUI.UltraWebGrid.ViewType.OutlookGroupBy;
this.uwgFestivos.DisplayLayout.AutoGenerateColumns = false;


// Permite cambiar datos de una celda especifica en este caso la celda PaisId por medio de la propiedad AllowUpdate
this.uwgFestivos.Columns.FromKey("PaisId").AllowUpdate = Infragistics.WebUI.UltraWebGrid.AllowUpdate.Yes;
this.uwgFestivos.Columns.FromKey("PaisId").Width = 700;
// Recupera los registros de paises llenando un combo que es asignado a la columna de Pais de la grilla
DataSet dsPais = new DataSet();

//simulo que el método TraerDrowDownList me trae un DataTable de datos de países.
//cree un método o una clase que devuelva los paises en un dataTable hagalo por medio de cualquier mecanismo
//de llenado manualmente o de una base de datos
dsPais.Tables.Add(objPais.TraerDropDownList());
//La función LlenarUWGDropDownList es la encargada de que la celda paisId se asocie con un control de infragistics de tipo WebCombo
//como ilustra  la imagen 1
LlenarUWGDropDownList(dsPais, "PaisId", uwgFestivos.Columns, "", false);
// asociar el control wdcFechaFestivo que se encuentra instanciado en el formulario aspx y que corresponde a un control WebDataChooser
//en el formulario web y que se asocia en la WebGrilla de infragistics 
this.uwgFestivos.Columns.FromKey("FechaFestivo").Width = 290;
this.uwgFestivos.Columns.FromKey("FechaFestivo").Type = Infragistics.WebUI.UltraWebGrid.ColumnType.Custom;
this.uwgFestivos.Columns.FromKey("FechaFestivo").DefaultValue = "";
this.uwgFestivos.Columns.FromKey("FechaFestivo").DataType = "System.DateTime";
this.uwgFestivos.Columns.FromKey("FechaFestivo").Format = "dd/MM/yyyy";
this.uwgFestivos.Columns.FromKey("FechaFestivo").EditorControlID = "wdcFechaFestivo";
this.uwgFestivos.Columns.FromKey("FechaFestivo").CellStyle.HorizontalAlign = HorizontalAlign.Right;

// Asigna el boton de agregar registros
this.uwgFestivos.Bands[0].AddButtonCaption = "+";
this.uwgFestivos.Bands[0].AddButtonToolTipText = "Adicionar";
}
catch (Exception ex)
{
throw new Exception(ex.Message, ex);
}
}

   

El siguiente método que se adiciona junto al code Behaind de la pagina aspx permite llenar la celda del control WebGrid con la celda en forma de DropDownList

 
/// <summary>
/// Metodo que permite llenar una celda de un control WebGrid en forma de dropDownList
/// </summary>
/// <param name="dsDatos">DataSet con datos de la consulta poe ejemplo de paises</param>
/// <param name="strIDColumnaUWG">Celda que se asocia al Control DropDonwList </param>
/// <param name="uwgDatos"> Control WebGrid</param>
/// <param name="CssClass">Hoja de Stylos a aplicar al Control DropDownList</param>
/// <param name="blnInsertBlankLine">si es verdadero se insertar un item de seleccione en el objeto DropDownList</param>
public void LlenarUWGDropDownList(System.Data.DataSet dsDatos, string strIDColumnaUWG, Infragistics.WebUI.UltraWebGrid.ColumnsCollection uwgDatos, string CssClass, bool blnInsertBlankLine)
{
System.Data.DataRow dr;
try
{
//Se asigna a la celda recibida como parametros el tipo DropDownList
uwgDatos.FromKey(strIDColumnaUWG).Type = Infragistics.WebUI.UltraWebGrid.ColumnType.DropDownList;
// se crea el objeto vlist de tipo ValueList
Infragistics.WebUI.UltraWebGrid.ValueList vlist = uwgDatos.FromKey(strIDColumnaUWG).ValueList;
vlist.Style.CssClass = CssClass;
vlist.ValueListItems.Clear();
if (blnInsertBlankLine == true)
{
dr = dsDatos.Tables[0].NewRow();
dr["Nombre"] = " ";
dr["Identificador"] = System.DBNull.Value;
dsDatos.Tables[0].Rows.InsertAt(dr, 0);
dsDatos.Tables[0].AcceptChanges();
}
//se asigna origen de datos al objeto de tipo ValueList
//y se carga con los datos del dataSet Recibido como parametros
vlist.DataSource = dsDatos;
vlist.DisplayMember = "Nombre";
vlist.DataMember = dsDatos.Tables[0].TableName;
vlist.ValueMember = "Identificador";
vlist.DataBind();
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}

 

Imagenes Finales de la apariencia del control UltraWebGrid en la aplicación Web:

 

 

Imagen1 Celda asociada al Control UltraWebCombo
 
 
 
Imagen2 Celda Asociada a un control UltraDataChooser
 
 

About omaracostacasas

ING SOFTWARE
This entry was posted in Infragistics. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s