jQWidgets Forums
Forum Replies Created
-
jqxgrid.js:7 Uncaught TypeError: Cannot read property ‘length’ of undefined
i have the same issue.
<!DOCTYPE html>
<html lang=”en”>
<head>
<!– librerias css –>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../../styles/bootstrap.min.css” type=”text/css” />
<link rel=”stylesheet” href=”estilos/estilo.css”>
<!– librerias jqwidgets y js –>
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {// primera letra en mayuscula
String.prototype.capitalizeFirstLetter = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘fname’ , type: ‘string’ },
{ name: ‘lname’ , type: ‘string’ },
{ name: ‘departamento’ , type: ‘string’ },
{ name: ‘fechvac’ },
{ name: ‘direccion’ , type: ‘string’ },
{ name: ‘ciudad’ , type: ‘string’ },
{ name: ‘cp’ , type: ‘string’ },
{ name: ‘pais’ , type: ‘string’ },
{ name: ‘telefono’ , type: ‘string’ },
{ name: ‘notas’ , type: ‘string’ }],
async: false,
url: ‘datos/test.json’
};
// INICIALIZA INFORMACION DE LAS FILAS y DE LOS TABS
var initrowdetails = function (index, parentElement, gridElement, datarecord) {
var tabsdiv = null;
var information = null;
var notes = null;
var datPerso = null;tabsdiv = $($(parentElement).children()[0]);
if (tabsdiv != null) {
information = tabsdiv.find(‘.information’);
notes = tabsdiv.find(‘.notes’);
var title = tabsdiv.find(‘.title’);
title.text(datarecord.fname);
var container = $(‘<div style=”margin: 5px;”></div>’)
container.appendTo($(information));
var photocolumn = $(‘<div style=”float: left; width: 15%;”></div>’);
var leftcolumn = $(‘<div style=”float: left; width: 45%;”></div>’);
var rightcolumn = $(‘<div style=”float: left; width: 40%;”></div>’);
container.append(photocolumn);
container.append(leftcolumn);
container.append(rightcolumn);// se agrega la foto del usuario
var photo = $(“<div class=’jqx-rc-all’ style=’margin: 10px;’><b>Foto:</b></div>”);
var image = $(“<div style=’margin-top: 10px;’></div>”);
var imgurl = ‘imagenes/’ + datarecord.fname.toLowerCase() + ‘.png’;
var img = $(‘‘);
image.append(img);
image.appendTo(photo);
photocolumn.append(photo);// datos generales del usuario
var fname = “<div style=’margin: 10px;’><b>Nombre:</b> ” + datarecord.fname.capitalizeFirstLetter() + “</div>”;
var lname = “<div style=’margin: 10px;’><b>Apellido:</b> ” + datarecord.lname.capitalizeFirstLetter () + “</div>”;
var departamento = “<div style=’margin: 10px;’><b>Departamento:</b> ” + datarecord.departamento + “</div>”;
var direccion = “<div style=’margin: 10px;’><b>Direccion:</b> ” + datarecord.direccion + “</div>”;// COLUMNA IZQUIERDA — pondremos nombre,apellido,departamento y direccion
$(leftcolumn).append(fname);
$(leftcolumn).append(lname);
$(leftcolumn).append(departamento);
$(leftcolumn).append(direccion);
var cp = “<div style=’margin: 10px;’><b>C.P:</b> ” + datarecord.cp + “</div>”;
var ciudad = “<div style=’margin: 10px;’><b>Ciudad:</b> ” + datarecord.ciudad + “</div>”;
var telefono = “<div style=’margin: 10px;’><b>Telefono:</b> ” + datarecord.telefono + “</div>”;
var fechvac = “<div style=’margin: 10px;’><b>Fecha de vacaciones:</b> ” + datarecord.fechvac + “</div>”;
var editar = “Editar“;
var id = “<div style=’margin: 10px;’><b>Id:</b> ” + datarecord.id + “</div>”;// COLUMNA DERECHA — codigo postal, ciudad, telefono, fecha de vacaciones
$(rightcolumn).append(cp);
$(rightcolumn).append(ciudad);
$(rightcolumn).append(telefono);
$(rightcolumn).append(fechvac);
$(rightcolumn).append(editar);
$(rightcolumn).append(id);// notas
var notescontainer = $(‘<div style=”white-space: normal; margin: 5px;”><span>’ + datarecord.notas + ‘</span></div>’);
$(notes).append(notescontainer);
$(tabsdiv).jqxTabs({ width: 750, height: 195});
}
}var dataAdapter = new $.jqx.dataAdapter(source);
// filtros en la grid
function addFiter(value) {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
var filtertype = ‘stringfilter’;
var filtergroup = new $.jqx.filter();var filter = filtergroup.createfilter(‘stringfilter’, value,’CONTAINS’);
filtergroup.addfilter(1, filter);
// add the filters.
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘fname’, filtergroup);// se aplican los filtros
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
showtoolbar: true,
height: 300,
theme: ‘bootstrap’,
filterable: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
var span = $(“<span style=’float: right; margin-top: 5px; margin-right: 4px;’>Buscar: </span>”);
var input = $(“<input class=’jqx-input jqx-widget-content jqx-rc-all’ id=’searchField’ type=’text’ style=’height: 23px; float: right; width: 223px;’ />”);// Agregamos nuestros botones o html mediante el metodo container.append()
toolbar.append(container);
// INPUT BUSCAR
container.append(input);
// TITULO SPAN BUSCAR
container.append(span);
// BOTON CREAR
container.append(‘ Crear ‘);
container.append(‘<input style=”margin-left: 5px;” id=”addmultiplerowsbutton” type=”button” hidden /> ‘);
// BOTON ACTUALIZAR
container.append(‘ Actualizar ‘);
// BOTON BORRAR
container.append(‘ Borrar ‘);// buscador funcion
if (theme != “”) {
input.addClass(‘jqx-widget-content-‘ + theme);
input.addClass(‘jqx-rc-all-‘ + theme);
}
var oldVal = “”;
input.on(‘keydown’, function (event) {
if (input.val().length >= 1) {
if (me.timer) {
clearTimeout(me.timer);
}
if (oldVal != input.val()) {
me.timer = setTimeout(function () {
addFiter(input.val());
}, 1000);
oldVal = input.val();
}
}
else {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
}});
$(“#addrowbutton”).jqxButton();
$(“#addmultiplerowsbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();
},
rowdetails: true,
rowdetailstemplate: { rowdetails: “<div style=’margin: 10px;’><ul style=’margin-left: 30px;’><li class=’title’> - Notas
<div class=’information’></div><div class=’notes’></div></div>”, rowdetailsheight: 200 },
initrowdetails: initrowdetails,
columns: [
{ text: ‘Nombre’, datafield: ‘fname’, width: 200 },
{ text: ‘Apellido’, datafield: ‘lname’, width: 200 },
{ text: ‘Departamento’, datafield: ‘departamento’, width: 180 },
{ text: ‘Ciudad’, datafield: ‘ciudad’, width: 100 },
{ text: ‘Pais’, datafield: ‘pais’}
]
});
});
</script>
</head>
<body class=’default’>
<center>
<h2>Catalogo de Trabajadores</h2>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
</div>
</center>
</body>
</html>