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)