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)

Agregar comentario

Loading