Contar vocales con JQuery.

05 enero 2017 Administrador Aplicaciones Web, JQuery

En el presente post te presento la forma de contar las vocales de un párrafo utilizando JQuery.

ConteoVocales.html

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'/>
	<title>Conteo de vocales</title>
</head>
<body>
	<label for='instrucciones'>Ingresa un párrafo:</label>
	</p>
	<textarea id='txtEntrada' rows='5' cols='50' style='resize:none;'></textarea>
	</p>
	<button type="button" id="btnContarVocales" name="btnContarVocales">
		Contar vocales
	</button>  
	<script src="../scripts/jquery-3.1.1.min.js"></script>
	<script type='text/javascript'>   
        $(document).ready(function()
        {         
            //Se asocia el evento click al Button [btnContarVocales].
            $('#btnContarVocales').on('click', function()
            {   
				/*
				Se obtiene el texto ingresado, se le quitan los espacios en blanco,
				se convierte a minusculas y se encapsula en la variable '_parrafo'.				
				*/
				var _parrafo= ($('#txtEntrada').val()).replace(/ /gi, '').toLowerCase();
            
				/*
				Se crea el arreglo '_vocales' con los caracteres que vamos a contabilizar.
				*/
                var _vocales = [ 'a', 'e', 'i', 'o', 'u'];
				
				/*
				Se crean e inicializan variables para encapsular el conteo de cada una 
				de las vocales.
				*/
				var _contadorA= 0;
				var _contadorE= 0;
				var _contadorI= 0;
				var _contadorO= 0;
				var _contadorU= 0;				

				/*
				Se recorre el texto encapsulado en la variable '_parrafo' y de acuerdo al
				caracter recorrido se va aumentando el contador relacionado con cada una 
				de las vocales segun corresponda.
				*/
				for(var i=0; i < _parrafo.length; i++)
				{
					switch(_parrafo[i])
					{
						case 'a':
						{
							_contadorA++;
							break;							
						}
						case 'e':
						{
							_contadorE++;
							break;							
						}
						case 'i':
						{
							_contadorI++;
							break;							
						}
						case 'o':
						{
							_contadorO++;
							break;							
						}
						case 'u':
						{
							_contadorU++;
							break;							
						}						
					}					
				}
				
				/*
				Se encapsula en la variable '_resultado' un mensaje con las vocales 
				y sus respectivos contadores.
				*/
				var _resultado= 'El resultado del conteo es el siguiente:\n\n' + '[a]: ' +  _contadorA + '\n[e]: ' + _contadorE + '\n[i]: ' + _contadorI + '\n[o]: ' + _contadorO + '\n[u]: ' + _contadorU;
				
				/*
				Se despliega en pantalla el resultado encapsulado en la variable '_resultado'
				*/
				alert(_resultado);
            });     
        });
    </script>
</body>
</html>

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

ConteoVocales.rar (29,97 kb)

Crear Tabla con JQuery.

16 noviembre 2016 Administrador Aplicaciones Web, JQuery

En el presente post te presento la forma de crear una tabla responsiva utilizando Bootstrap y JQuery.

Helper.js

//Función para generar y retornar un conjunto de datos de prueba.
function ObtenDatos()
{
	var _personas= 
	[
		{
			personaId: 1,
			nombre: 'Adrian',
			apellidoPaterno: 'Gonzalez',
			apellidoMaterno: 'Fernandez',
			fechaNacimiento: '1990-10-12',
			genero: 'M'			
		},
		{
			personaId: 2,
			nombre: 'Maria',
			apellidoPaterno: 'Sanchez',
			apellidoMaterno: 'Torres',
			fechaNacimiento: '1960-02-04',
			genero: 'F'
		},
		{
			personaId: 3,
			nombre: 'Luis Fernando',
			apellidoPaterno: 'Morales',
			apellidoMaterno: 'Salgado',
			fechaNacimiento: '1988-09-20',
			genero: 'M'			
		},
		{
			personaId: 4,
			nombre: 'Victor',
			apellidoPaterno: 'Ferrer',
			apellidoMaterno: 'Lopez',
			fechaNacimiento: '1970-05-21',
			genero: 'M'
		},
		{
			personaId: 5,
			nombre: 'Amanda',
			apellidoPaterno: 'Sandria',
			apellidoMaterno: 'Martinez',
			fechaNacimiento: '1991-09-15',
			genero: 'F'
		},
		{
			personaId: 6,
			nombre: 'Rodrigo',
			apellidoPaterno: 'Montes',
			apellidoMaterno: 'Hernandez',
			fechaNacimiento: '1985-07-27',
			genero: 'M'
		},
		{
			personaId: 7,
			nombre: 'Emilio',
			apellidoPaterno: 'Duran',
			apellidoMaterno: 'Ruiz',
			fechaNacimiento: '2000-01-06',
			genero: 'M'
		},
		{
			personaId: 8,
			nombre: 'Santiago',
			apellidoPaterno: 'Montiel',
			apellidoMaterno: 'Garcia',
			fechaNacimiento: '1970-06-20',
			genero: 'M'
		},                  
		{
			personaId: 9,
			nombre: 'Monica',
			apellidoPaterno: 'Ortigoza',
			apellidoMaterno: 'Posadas',
			fechaNacimiento: '1975-11-04',
			genero: 'F'
		},
		{
			personaId: 10,
			nombre: 'Ricardo',
			apellidoPaterno: 'Parra',
			apellidoMaterno: 'Zuñiga',
			fechaNacimiento: '1997-08-16',
			genero: 'M'
		}		
	]

	return _personas;
}

//Función para crear la tabla.
function MuestraPersonas(tabla, datos)
{
	//Se limpiar el contenido de la tabla, excepto los titulos de las columnas.
	$('#' + tabla).find('tr:not(:first)').remove();		

	//Se valida si el origen de datos no contiene información.
	if(datos==null || datos.length==0)
	{		
		//Se crea una nueva fila.
		var _filaVacia = $((document).createElement('tr'));
        _filaVacia.css('text-align', 'center');

		//Se anexa la fila a la tabla.
        $('#' + tabla).append(_filaVacia);
		
		//Se crea una columna y se le asigna un tamaño de 4 columnas.
        var _columnaVacia = $((document).createElement('td'));            
        _columnaVacia.attr('colspan', 4);

		//Se crea un nodo de texto para definir un mensaje que se mostrará cuando no haya elementos.
        var _contenidoVacio = $((document).createTextNode('No se encontraron resultados :('));
		
		//Se anexa el nodo de texto a la columna.
        _columnaVacia.append(_contenidoVacio);
            
		//Se anexa la columna a la fila.
        _filaVacia.append(_columnaVacia);
		
		//Se finaliza la función.
		return;
	}
	
	//Se recorre cada uno de los elementos del origen de datos.
	$.each(datos, function (key, item)
	{
		//Se crea una nueva fila y se le asigna un identificador.
		var _fila= $((document).createElement('tr'));
		_fila.attr('id', 'fila'+item.personaId);

		//Se anexa la fila a la tabla.
		$('#' + tabla).append(_fila)
		
		//Identificador de la persona.

		//Se crea una nueva columna para encapsular los identificadores de las personas.		
		var _columnaPersonaId= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el identificador de la persona.
		var _personaId= $((document).createTextNode(item.personaId));
		
		//Se anexa a la columna [_columnaPersonaId] el nodo de texto.
		_columnaPersonaId.append(_personaId);
		
		//Se anexa la columna [_columnaPersonaId] a la fila.
		$('#fila' + item.personaId).append(_columnaPersonaId);
		
		//Nombre completo.
		
		//Se crea una nueva columna para encapsular el nombre completo de las personas.		
		var _columnaNombre= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el nombre completo de la persona.
		var _nombre= $((document).createTextNode(item.nombre + ' ' + item.apellidoPaterno + ' ' + item.apellidoMaterno));
		
		//Se anexa a la columna [_columnaNombre] el nodo de texto.
		_columnaNombre.append(_nombre);
		
		//Se anexa la columna [_columnaNombre] a la fila.
		$('#fila' + item.personaId).append(_columnaNombre);

		//Fecha de Nacimiento.
		
		//Se crea una nueva columna para encapsular la fecha de nacimiento de las personas.		
		var _columnaFechaNacimiento= $((document).createElement('td'));
		
		//En caso de que la fecha venga en formato largo, se debera de obtener el formato corto para cuestiones de presentación.
		var _fechaCorta= item.fechaNacimiento.split(' ')[0];
		
		//Se da formato a la fecha para presentarla como DD/MM/YYYY.
		var _elementosFecha= _fechaCorta.split('-');
		var _fecha= _elementosFecha[2] + '/' + _elementosFecha[1] + '/' + _elementosFecha[0];
				
		//Se crea un nodo de texto y se le asigna la fecha de nacimiento de la persona.
		var _fechaNacimiento= $((document).createTextNode(_fecha));
		
		//Se anexa a la columna [_columnaFechaNacimiento] el nodo de texto.
		_columnaFechaNacimiento.append(_fechaNacimiento);
		
		//Se anexa la columna [_columnaFechaNacimiento] a la fila.
		$('#fila' + item.personaId).append(_columnaFechaNacimiento);
		
		//Genero
		
		//Se crea una nueva columna para encapsular el genero de de las personas.		
		var _columnaGenero= $((document).createElement('td'));
		
		//Se crea un nodo de texto y se le asigna el genero de la persona.
		var _genero= $((document).createTextNode((item.genero == 'F')? 'Femenino': 'Masculino'));
		
		//Se anexa a la columna [_columnaGenero] el nodo de texto.
		_columnaGenero.append(_genero);
		
		//Se anexa la columna [_columnaGenero] a la fila.
		$('#fila' + item.personaId).append(_columnaGenero);
	});		
}

Tabla.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="utf-8">
	<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">    
	<link href="../css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="container">
		<div class="row">
			<br/>
			<div class="col-md-12">
				<div class="panel panel-primary">
					<div class="panel-heading">				
						<div style="text-align:center;">
							Creación de una tabla con JQuery
						</div>
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-12">
								<button type="button" id="btnCreaTabla" name="btnCreaTabla" class="btn btn-success">Crear tabla
								</button>                            
							</div>
						</div>
						<br/>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<table id="tblConsulta" class="table table-bordered table-hover textColor" style="width:100%;">
										<tr style="font-weight: bold; background-color: #373a3c; color: white;">                                        
											<td class="bold">#</td>
											<td class="bold">Nombre</td>																			
											<td class="bold">Fecha de Nacimiento</td>
											<td class="bold">Genero</td>											
										</tr>
									</table>
								</div>
							</div>
						</div>						
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="../scripts/jquery-2.2.1.js"></script>
	<script src="../scripts/bootstrap.js"></script>
	<script src="../scripts/helper.js"></script>
	
	<script type='text/javascript'>	
		$(document).ready(function()
		{
			//Se invoca la función para crear y mostrar la tabla cuando no hay origen de datos.
			MuestraPersonas('tblConsulta', null);
		
			//Se asocia el evento click al Button [btnCreaTabla].
			$('#btnCreaTabla').on('click', function()
			{				
				//Se invoca a la función para crear y mostrar la tabla con un origen de datos.
				MuestraPersonas('tblConsulta', ObtenDatos());
			});		
		});
	</script>
</body>
</html>

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

Tabla con JQuery.rar (215,67 kb)

Analizador Léxico en C#.

08 noviembre 2016 Administrador Aplicaciones de Escritorio

En el presente artículo te comparto un analizado léxico creado en visual studio 2012 utilizando como lenguaje C#.

Dicho analizador es capaz de recibir una secuencia de caracteres y producir una salida compuesta de tokens (componentes léxicos).

Los tokens reconocidos por el analizador son los siguientes:

  • Números: 0 1 2 3 4 5 6 7 8 9
  • Variables: A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z
  • Operadores: + - * /
  • Delimitadores: ( )

AnalizadorLexico

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

Analizador.rar (52,71 kb)

Filtros en Cascada en Grid Kendo.

06 noviembre 2016 Administrador Aplicaciones Web, 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)