Filtros en Cascada en Grid Kendo.

Aplicación

HTML / JavaScript

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    
	<title>Grid Kendo con filtros en cascada</title>
	<link href="http://www.critza.com//Pages/Grid%20Kendo/css/kendo.common.min.css" rel="stylesheet"/>
    <link href="http://www.critza.com//Pages/Grid%20Kendo/css/kendo.custom.css" rel="stylesheet"/>
	
	<script type="text/javascript">
		function FilterMenu(e)
		{
			if (e.sender.dataSource.options.schema.model.fields[e.field].type == "date")
			{
				var _primerOperador = e.container.find("select:eq(0)").data("kendoDropDownList");
				var _operadorCondicional = e.container.find("select:eq(1)").data("kendoDropDownList");
				var _segundoOperador = e.container.find("select:eq(2)").data("kendoDropDownList");

				this.thead.find("[data-field='fechaNacimiento'] .k-grid-filter").click(function (e)
				{
					setDropDownList();
				});

				var setDropDownList = function ()
				{
					_primerOperador.value("gte");
					_primerOperador.trigger("change");

					_operadorCondicional.value("and");
					_operadorCondicional.trigger("change");

					_segundoOperador.value("lte");
					_segundoOperador.trigger("change");
				}

				setDropDownList();

				setTimeout(function ()
				{
					_primerOperador.wrapper.hide();
					_segundoOperador.wrapper.hide();
					_operadorCondicional.wrapper.hide();
				});

				var _iterador=1;

				e.container.find(":input").each(function ()
				{
					if(_iterador==2 || _iterador==5)
						($(this).attr("readonly", true));
					else
					{
						var _widget = kendo.widgetInstance($(this));

						if(_widget)
							_widget.readonly(true);
					}

					_iterador+=1;
				});
			}

			if(e.field=='estadoNacimiento')
			{
				var _filtroMultiCheck =  this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");

				if(_cargaInicialEstadoNacimiento)
				{
					_cargaInicialEstadoNacimiento=false;
					FiltroEstadoNacimientoEnCascada(_filtroMultiCheck);
				}

				this.thead.find("[data-field='estadoNacimiento'] .k-grid-filter").click(function (e)
				{
					FiltroEstadoNacimientoEnCascada(_filtroMultiCheck);
				});

				setTimeout(function (){});
			}			
		}
	
		function FiltroEstadoNacimientoEnCascada(filterMultiCheck)
		{
			filterMultiCheck.container.empty();

			var _origenDatos=$('#grid').data('kendoGrid').dataSource;

			var _origenDatosFinal;

			var _filtros = _origenDatos.filter();

			if(_filtros==null)
				_origenDatosFinal= _origenDatos.data();
			else
				_origenDatosFinal= (new kendo.data.Query(_origenDatos.data())).filter(_filtros).data;

			var _arreglo= new Array();

			for (var i = 0; i < _origenDatosFinal.length; i++)
			{
				if(_origenDatosFinal[i].estadoNacimiento!=null)
				{
					var _existe=false;

					for(var x=0; x < _arreglo.length; x++)
					{
						if(_arreglo[x].estadoNacimiento == _origenDatosFinal[i].estadoNacimiento)
						{
							_existe=true;
							break;
						}
					}

					if(!_existe)
					{
						var _objeto= new Object();
						_objeto.estadoNacimiento=_origenDatosFinal[i].estadoNacimiento;
						_arreglo.push(_objeto);
					}
				}
			}

			function OrdenaElementos()
			{
				_arreglo.sort(function(a, b)
				{
					var _x = a.estadoNacimiento.toLowerCase();
					var _y = b.estadoNacimiento.toLowerCase();

					if (_x < _y)
						return -1;
					if (_x > _y)
						return 1;
					return 0;
				});
			}

			OrdenaElementos();
			filterMultiCheck.checkSource.data(_arreglo);
			filterMultiCheck.createCheckBoxes();
		}
		
		function FiltroGenero(element) {
			element.kendoDropDownList({
				dataSource: [ 'Femenino', 'Masculino' ],
                optionLabel: 'Seleccionar...'
            });
        }
	</script>
	
</head>
<body>
	<div id="grid">
	</div>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/jquery-2.1.4.min.js"></script>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/kendo.all.min.js"></script>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/kendo.grid.min.js"></script>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/Cultures/kendo.culture.es-MX.min.js"></script>
	<script src="http://www.critza.com//Pages/Grid%20Kendo/js/Messages/kendo.messages.es-ES.min.js"></script>
	<script type="text/javascript">
		var _grid;
		var _origenDatos;						
		var _tamanioPaginacion=10;
		var _cargaInicialEstadoNacimiento=true;
		
		kendo.culture('es-MX');
		
		$(document).ready(function ()
		{
			_grid = $("#grid");
			
			_origenDatos= new kendo.data.DataSource
			({
				data:
				[
					{
						personaId: 1,
						nombre: 'Adrian',
						apellidoPaterno: 'Gonzalez',
						apellidoMaterno: 'Fernandez',
						fechaNacimiento: '1990-10-12',
						genero: 'Masculino',
						estadoNacimiento: 'Veracruz de Ignacio de la Llave'
					},
					{
						personaId: 2,
						nombre: 'Maria',
						apellidoPaterno: 'Sanchez',
						apellidoMaterno: 'Torres',
						fechaNacimiento: '1960-02-04',
						genero: 'Femenino',
						estadoNacimiento: 'Chiapas'
					},
					{
						personaId: 3,
						nombre: 'Luis Fernando',
						apellidoPaterno: 'Morales',
						apellidoMaterno: 'Salgado',
						fechaNacimiento: '1988-09-20',
						genero: 'Masculino',
						estadoNacimiento: 'Oaxaca'
					},
					{
						personaId: 4,
						nombre: 'Victor',
						apellidoPaterno: 'Ferrer',
						apellidoMaterno: 'Lopez',
						fechaNacimiento: '1970-05-21',
						genero: 'Masculino',
						estadoNacimiento: 'Puebla'
					},
					{
						personaId: 5,
						nombre: 'Amanda',
						apellidoPaterno: 'Sandria',
						apellidoMaterno: 'Martinez',
						fechaNacimiento: '1991-09-15',
						genero: 'Femenino',
						estadoNacimiento: 'Campeche'
					},
					{
						personaId: 6,
						nombre: 'Rodrigo',
						apellidoPaterno: 'Montes',
						apellidoMaterno: 'Hernandez',
						fechaNacimiento: '1985-07-27',
						genero: 'Masculino',
						estadoNacimiento: 'Puebla'
					},
					{
						personaId: 7,
						nombre: 'Emilio',
						apellidoPaterno: 'Duran',
						apellidoMaterno: 'Ruiz',
						fechaNacimiento: '2000-01-06',
						genero: 'Masculino',
						estadoNacimiento: 'México'
					},
					{
						personaId: 8,
						nombre: 'Santiago',
						apellidoPaterno: 'Montiel',
						apellidoMaterno: 'Garcia',
						fechaNacimiento: '1970-06-20',
						genero: 'Masculino',
						estadoNacimiento: 'Puebla'
					},					
					{
						personaId: 9,
						nombre: 'Monica',
						apellidoPaterno: 'Ortigoza',
						apellidoMaterno: 'Posadas',
						fechaNacimiento: '1975-11-04',
						genero: 'Femenino',
						estadoNacimiento: 'Querétaro'
					},
					{
						personaId: 10,
						nombre: 'Ricardo',
						apellidoPaterno: 'Parra',
						apellidoMaterno: 'Zuñiga',
						fechaNacimiento: '1997-08-16',
						genero: 'Masculino',
						estadoNacimiento: 'Zacatecas'
					},
					{
						personaId: 11,
						nombre: 'Andrea',
						apellidoPaterno: 'Perdomo',
						apellidoMaterno: 'Juárez',
						fechaNacimiento: '1988-01-19',
						genero: 'Femenino',
						estadoNacimiento: 'Tabasco'
					},
					{
						personaId: 12,
						nombre: 'Armando',
						apellidoPaterno: 'Rosales',
						apellidoMaterno: 'Maza',
						fechaNacimiento: '1988-10-12',
						genero: 'Masculino',
						estadoNacimiento: 'Puebla'
					},
					{
						personaId: 13,
						nombre: 'Anabel',
						apellidoPaterno: 'Jiménez',
						apellidoMaterno: 'Ortiz',
						fechaNacimiento: '1978-10-06',
						genero: 'Femenino',
						estadoNacimiento: 'Sonora'
					},
					{
						personaId: 14,
						nombre: 'Erica',
						apellidoPaterno: 'Rumilla',
						apellidoMaterno: 'Santos',
						fechaNacimiento: '1980-10-10',
						genero: 'Femenino',
						estadoNacimiento: 'Puebla'
					},
					{
						personaId: 15,
						nombre: 'Alejandra',
						apellidoPaterno: 'Martinez',
						apellidoMaterno: 'Maldonado',
						fechaNacimiento: '1994-08-14',
						genero: 'Femenino',
						estadoNacimiento: 'Sonora'
					},
					{
						personaId: 16,
						nombre: 'Pedro',
						apellidoPaterno: 'Carrillo',
						apellidoMaterno: 'Arcos',
						fechaNacimiento: '1997-12-23',
						genero: 'Masculino',
						estadoNacimiento: 'Yucatán'
					},
					{
						personaId: 17,
						nombre: 'Rocio',
						apellidoPaterno: 'Soto',
						apellidoMaterno: 'Quiroz',
						fechaNacimiento: '1978-11-18',
						genero: 'Femenino',
						estadoNacimiento: 'Aguascalientes'
					},
					{
						personaId: 18,
						nombre: 'Francisco',
						apellidoPaterno: 'Herrera',
						apellidoMaterno: 'Brito',
						fechaNacimiento: '1986-08-28',
						genero: 'Masculino',
						estadoNacimiento: 'Baja California Sur'
					},
					{
						personaId: 19,
						nombre: 'Karla',
						apellidoPaterno: 'Lara',
						apellidoMaterno: 'Morales',
						fechaNacimiento: '1997-03-15',
						genero: 'Femenino',
						estadoNacimiento: 'Chiapas'
					},
					{
						personaId: 20,
						nombre: 'Rodolfo',
						apellidoPaterno: 'Zapata',
						apellidoMaterno: 'Villa',
						fechaNacimiento: '1980-01-03',
						genero: 'Masculino',
						estadoNacimiento: 'Guanajuato'
					},
					{
						personaId: 21,
						nombre: 'Jonathan',
						apellidoPaterno: 'Robles',
						apellidoMaterno: 'Oronzor',
						fechaNacimiento: '2001-04-05',
						genero: 'Masculino',
						estadoNacimiento: 'Hidalgo'
					},
					{
						personaId: 22,
						nombre: 'Ingrid',
						apellidoPaterno: 'Nuñez',
						apellidoMaterno: 'Meneses',
						fechaNacimiento: '1984-10-29',
						genero: 'Femenino',
						estadoNacimiento: 'Distrito Federal'
					},
					{
						personaId: 23,
						nombre: 'Efren',
						apellidoPaterno: 'Garcia',
						apellidoMaterno: 'Flores',
						fechaNacimiento: '1991-09-25',
						genero: 'Masculino',
						estadoNacimiento: 'México'
					},
					{
						personaId: 24,
						nombre: 'Martha',
						apellidoPaterno: 'Guerrero',
						apellidoMaterno: 'Duran',
						fechaNacimiento: '1980-04-21',
						genero: 'Femenino',
						estadoNacimiento: 'Michoacán de Ocampo'
					},
					{
						personaId: 25,
						nombre: 'Ezequiel',
						apellidoPaterno: 'Romano',
						apellidoMaterno: 'Vazquez',
						fechaNacimiento: '2005-12-11',
						genero: 'Masculino',
						estadoNacimiento: 'Zacatecas'
					}					
				],
				schema:
				{
					model:
					{
						fields:
						{
							personaId: { type: 'number' },
							nombre: { type: 'string'},
							apellidoPaterno: { type: 'string' },
							apellidoMaterno: { type: 'string' },
							fechaNacimiento: { type: 'date' },
							genero: { type: 'string' },
							estadoNacimiento: { type: 'string' }
						}
					}
				},
				pageSize: _tamanioPaginacion
			});							
		
			_grid.kendoGrid
			({
				dataSource: _origenDatos,
				columnMenu: false,
				sortable: true,	
				filterMenuInit: FilterMenu,				
				filterable:
				{
					extra: false,
					messages:
					{
						search: "Buscar",
						filter: "Filtrar",
						clear: "Limpiar"
					},
					operators:
					{
						string:
						{
							eq: "Igual a",
							neq: "No es igual a",
							startswith: "Comienza con",
							endswith: "Termina en",
							contains: 'Contiene',
							doesnotcontain: 'No contiene'
						},
						number:
						{
							eq: "Igual a:",
							neq: "No es igual a:",
							gte: "Mayor o igual a:",
							lte: "Menor o igual a:"
						},     
						date:
						{
							gte: "Mayor o igual a:",
							lte: "Menor o igual a:"
						}						
					}
				},
				scrollable: true,
				pageable: true,
				columns:
				[
					{
						field: 'personaId',
						title: 'Id',
						width: 40,
						template: "<div style='text-align:justify'>#= personaId #</div>"
					},
					{
						field: 'nombre',
						title: 'Nombre',
						width: 40,
						template: "<div style='text-align:justify'>#= nombre #</div>"
					},
					{
						field: 'apellidoPaterno',
						title: 'Apellido paterno',
						width: 50,
						template: "<div style='text-align:justify'>#= apellidoPaterno #</div>"
					},
					{
						field: 'apellidoMaterno',
						title: 'Apellido materno',
						width: 50,
						template: "<div style='text-align:justify'>#= apellidoMaterno #</div>"
					},
					{
						field: 'fechaNacimiento',
						title: 'Fecha de Nacimiento',
						width: 50,
						template: "<div style='text-align:justify'>#= kendo.toString(kendo.parseDate(fechaNacimiento, 'yyyy-MM-dd'), 'dd/MM/yyyy') #</div>",
						filterable:
						{
							extra: true,
							ui: "datepicker"
						}
					},
					{
						field: 'genero',
						title: 'Genero',
						width: 40,
						template: "<div style='text-align:justify'>#= genero #</div>",
						filterable:
						{
							ui: FiltroGenero
						}
					},
					{
						field: 'estadoNacimiento',
						title: 'Estado de Nacimiento',
						width: 70,
						template: "<div style='text-align:justify'>#= estadoNacimiento #</div>",
						filterable:
						{
							multi: true,
							search: true
						}
					}				
				]
			});
		});
	</script>
</body>
</html>

En el siguiente enlace podrás descargar el código fuente:

Grid Kendo.rar (2,94 mb)

Validar Limite de Caracteres con JavaScript.

El siguiente código fuente define una función JavaScript para limitar el número de caracteres que puede almacenar un campo de entrada de texto.

HTML

<input id="txtPrueba" name="txtPrueba" type="text" onkeypress="return ValidaLongitud(this, 10);"/>

JavaScript

<script type="text/javascript">
function ValidaLongitud(campo, longitudMaxima) {
            try {
                if (campo.value.length > (longitudMaxima - 1))
					return false;
				else
					return true;             
            } catch (e) {
				return false;
            }
        }
</script>

 Código en ejecución

Lanzar ModalPopupExtender con JavaScript.

El siguiente código fuente define la creación de una ventana modal usando el componente ModalPopupExtender de AjaxControl Toolkit y una función JavaScript para desplegarla en pantalla.

ASPX

<script src="../Scripts/jquery-2.1.4.js"></script>
<asp:HiddenField ID="hfOcultoModalCargando" runat="server" />
        <asp:Panel ID="pnlModalCargando" runat="server" Width="300" CssClass="modalPopupAjax" Style="display: none">
            <div class="header"></div>
            <div class="body">
                <div class="row">
                    <div class="col-md-12">
                        <div style="text-align: center; font-weight: bold;">
                            Procesando transacción.
                            <br />
                            <br />
                            Espere por favor...
                        </div>
                    </div>
                </div>
            </div>
        </asp:Panel>
        <asp:ModalPopupExtender ID="mpeModalCargando" runat="server" TargetControlID="hfOcultoModalCargando" PopupControlID="pnlModalCargando" BackgroundCssClass="modalBackgroundAjax" DropShadow="false" BehaviorID="bMpeModalCargando" />

JavaScript

function LanzaModal()
{
   $find('bMpeModalProcesamiento').show();
}

 

Registrar .NET Framework en IIS.

Es importante registrar el .NET Framework 4.5 en el IIS después de una instalación de Visual Studio 2013, ya que si no lo hacen, cuando ustedes intenten desarrollar aplicaciones ASP.NET no podrán utilizar dicho Framework, con lo cual se verán obligados a utilizar una versión anterior como lo es el .NET Framework 4.0, desaprovechando las nuevas mejoras contenidas en el nuevo Framework; como podrían ser las nuevas clases para administrar tareas, gestionar recursos y optimizar el rendimiento de las aplicaciones.

Para realizar el registro deben de seguir los siguientes pasos:

1.- Habilitar el IIS.

Ir a: Panel de control > Programas > Programas y características > Activar o desactivar las características de Windows.

Habilitar las siguientes características:

2.- Aparentemente hasta este punto tenemos habilitado nuestro IIS, lo cual pueden comprobarlo en su navegador escribiendo http://localhost/ en su barra de direcciones y pulsando la tecla <Enter> para ser redireccionados al IIS.

3.- Ahora es necesario ejecutar el símbolo de sistema como administrador para registrar el Framework 4.5 mediante línea de comandos, para esto deberán de llegar al siguiente directorio:

C:\Windows\Microsoft.NET\Framework\v4.0.30319

Ya posicionados en este directorio deberán de escribir el comando aspnet_regiis.exe –i  y presionar la tecla <Enter>.

C:\Windows\Microsoft.NET\Framework\v4.0.30319>aspnet_regiis.exe –i

Al presionar la tecla <Enter> deberán de esperar mas o menos de 1 a 2 minutos mientras el sistema termina de realizar la acción y después verán un mensaje de éxito dentro de la misma ventana de símbolo de sistema.

Al finalizar de realizar los pasos anteriores, ustedes ya podrán crear aplicaciones en ASP.NET utilizando la versión del .NET Framework 4.5.