How to get a cell value?

[jefferson.darisMember]

I have a problem!
How do I get the value of the grid cell. Example, the column of my grid is displaying a label, and when I try to get the value of the cell my post returns the value of the label, but would like to get the value of label.
How do I get the worth of a cell?

$(document).ready(function (){

// prepare the data
var theme = ‘DATE’;

//Array com todos os usuário do combobox
var hrmov_user = [{“hrmov_user”:”C”,”hrmov_userLabel”:”USUARIO C”},
{“hrmov_user”:”D”,”hrmov_userLabel”:”USUARIO D”},
{“hrmov_user”:”E”,”hrmov_userLabel”:”USUARIO E”},
{“hrmov_user”:”F”,”hrmov_userLabel”:”USUARIO F”},
{“hrmov_user”:”G”,”hrmov_userLabel”:”USUARIO G”}];

var hrmov_userSource = {
datatype: “array”,
datafields: [{value:’hrmov_user’},{name:’hrmov_userLabel’}],
localdata: hrmov_user
};

var hrmov_userAdapter = new $.jqx.dataAdapter(hrmov_userSource, {
autoBind: true
});

var source = {
datatype: “json”,
datafields: [
{ name: ‘hrmov_seq’, type: ‘number’},
{ name: ‘pac_codigo’, type: ‘number’},
{ name: ‘vig_dt_ag’, type: ‘string’},
{ name: ‘vig_dt’, type: ‘string’},
{ name: ‘hrmov_hora’, type: ‘string’},
//{ name: ‘hrmov_user’},
{ name: ‘hrmov_user’, values: {source: hrmov_userAdapter.records, value: ‘hrmov_user’, name: ‘hrmov_userLabel’} },
{ name: ‘hrmov_obs’, type: ‘string’},
{ name: ‘hrmov_dt_entrada’, type: ‘string’},
{ name: ‘hrmov_hr_entrada’, type: ‘string’},
{ name: ‘hrmov_per_ini’, type: ‘string’},
{ name: ‘hrmov_per_fim’, type: ‘string’},
],
url: ‘response.php’,
root: ‘Rows’,
beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;
}
};

var dataadapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({
width: 1200,
height: 300,
source: dataadapter,
theme: theme,
showfilterrow: true,
filterable: true,
autoheight: false,
columnsresize: true,
sortable: true,
showsortcolumnbackground: false,
scrollmode: ‘logical’,
verticalscrollbarlargestep: 50,
rendergridrows: function()
{
return dataadapter.records;
},
ready: function(){
$(‘#jqxgrid’).jqxGrid(‘selectrow’, 0);
$(‘#jqxgrid’).jqxGrid(‘focus’);
},
columns: [
{ text: ‘Seq’, datafield: ‘hrmov_seq’, width: 200},
{ text: ‘Cod’, datafield: ‘pac_codigo’, width: 200},
{ text: ‘Vig. Dt. Ag.’, datafield: ‘vig_dt_ag’, width: 200, cellsalign: ‘left’},
{ text: ‘Data Vig.’, datafield: ‘vig_dt’, width: 200, cellsalign: ‘left’},
{ text: ‘Hora’, datafield: ‘hrmov_hora’, width: 200},
{ text: ‘User’, width: 200, datafield: ‘hrmov_user’, displayfield: ‘hrmov_user’, columntype: ‘combobox’},
//value: ‘hrmov_user’, values: { source: hrmov_userAdapter, value: ‘hrmov_user’, name: ‘hrmov_userLabel’ }
{ text: ‘Obs’, datafield: ‘hrmov_obs’, width: 200},
{ text: ‘Data Ent.’, datafield: ‘hrmov_dt_entrada’, width: 200, cellsalign: ‘left’},
{ text: ‘Hora Ent.’, datafield: ‘hrmov_hr_entrada’, width: 200},
{ text: ‘Periodo Ini.’, datafield: ‘hrmov_per_ini’, width: 200, cellsalign: ‘left’},
{ text: ‘Periodo Fim.’, datafield: ‘hrmov_per_fim’, width: 200, cellsalign: ‘left’}
]
})
.bind(‘rowselect’, function (event){

var row = event.args.rowindex;

var datarow = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);

//var value = $(“#jqxgrid”).jqxGrid(‘getcellvaluebyid’, row, ‘hrmov_user’);

//console.log(value);

gridToForm(‘form_jqxgrid’,datarow);

});

[Peter StoevKeymaster]

Hi,

For getting a cell value, you can the “getcellvalue” method. It works with row index. The “getcellvaluebyid” expects row ID which you can get by using the “getrowid” method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jefferson.darisMember]

Hi Peter,

Thanks. methods worked!

[Rodolfo HillParticipant]

I have the same problem with the current version of the jqWidget.

I try to get the value of column, and allways return the label, not the value

The FK Source is standardTypeSource and the adapter is standardTypeAdapter.

The Grid is standardGrid, source is standardSource and the adapter is standardAdapter.

There are 3 botton on the toolbar. In this moment I want to present the window, of selected row. The window (popupWindow ) contain a standardTypeId ( is a dropDownList ). When the user click on the row, and later click on updateRowButton, I want to present the standardTypeId correctly.

I use getcellvalue and also getcellvaluebyid and I don’t have the values.value of standardTypeId or value of standardTypeId. I only have values.value.

var selectedrowindex = $(“#standardGrid”).jqxGrid(‘getselectedrowindex’);
var rowid = $(“#standardGrid”).jqxGrid(‘getrowid’, selectedrowindex);

alert(“selectedrowindex = ” + selectedrowindex);
var valueFromGetCellValue = $(‘#standardGrid’).jqxGrid(‘getcellvalue’, selectedrowindex, ‘standardTypeId’);
alert(“valueFromGetCellValue = ” + valueFromGetCellValue);

alert(“rowid = ” + rowid);
var valueFromGetCellValueById = $(‘#standardGrid’).jqxGrid(‘getcellvaluebyid’, rowid, ‘standardTypeId’);
alert(“valueFromGetCellValueById = ” + valueFromGetCellValueById);

Please Help Me

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>

<meta name=”_csrf” th:content=”${_csrf.token}”/>
<meta name=”_csrf_header” th:content=”${_csrf.headerName}”/>

<style>
.jqx-grid-header
{
height: 40px !important;
}
</style>

<script type=”text/javascript”>

$(document).ready(function () {

var header = $(“meta[name=’_csrf_header’]”).attr(“content”);
var token = $(“meta[name=’_csrf’]”).attr(“content”);

$.ajaxSetup({
beforeSend: function(xhr) {
xhr.setRequestHeader(‘X-CSRF-TOKEN’, token);
}
});

This is the standardTypeSource

var standardTypeSource =
{
datatype: “json”,
datafields: [
{ name: ‘standardTypeId’, type: ‘number’ },
{ name: ‘name’, type: ‘string’ }
],
id: ‘standardTypeId’,
url: “/getStandardType”,
type: “GET”,
async: false
}

var standardTypeAdapter = new $.jqx.dataAdapter(standardTypeSource, { autoBind: true });

var enterpriseSource =
{
datatype: “json”,
datafields: [
{ name: ‘enterpriseId’, type: ‘number’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘street1’, type: ‘string’ },
{ name: ‘street2’, type: ‘string’ },
{ name: ‘city’, type: ‘string’ },
{ name: ‘county’, type: ‘string’ },
{ name: ‘postalCode’, type: ‘string’ },
{ name: ‘state’, type: ‘string’ },
{ name: ‘country’, type: ‘string’ },
{ name: ‘phone’, type: ‘string’ },
{ name: ‘active’, type: ‘number’ },
{ name: ‘rfc’, type: ‘string’ }
],
id: ‘enterpriseId’,
url: “/getEnterprise”,
type: “GET”,
async: false
}

var enterpriseAdapter = new $.jqx.dataAdapter(enterpriseSource, { autoBind: true });

This is my grid.

var standardSource =
{
datatype: “json”,
datafields: [
{ name: ‘standardId’, type:’number’ },
{ name: ‘standardTypeId’, type:’number’, value:’standardTypeId’, values: { source: standardTypeAdapter.records, value: ‘standardTypeId’, name: ‘name’ }},
{ name: ‘enterpriseId’, type:’number’, value:’enterpriseId’, values: { source: enterpriseAdapter.records, value: ‘enterpriseId’, name: ‘name’ }},
{ name: ‘name’, type: ‘string’ },
{ name: ‘main’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘version’, type: ‘string’ },
{ name: ‘issueDate’, type: ‘string’ },
{ name: ‘dueDate’, type: ‘string’ }
],
id: ‘standardId’,
url: “/bringStandardRows”,
root: ‘rows’,
type: “GET”,
async: false,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
commit(true);
},
updaterow: function (rowid, newdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
},
beforeprocessing: function(data)
{
standardSource.totalrecords = data[0].totalRows;
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
},
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
//alert(“hubo movimiento en el pager”);
}
}

var standardAdapter = new $.jqx.dataAdapter(standardSource);

var theme = ‘darkblue’;

// initialize the input fields.
//$(“#standardTypeId”).jqxInput({ theme: theme });
$(“#standardTypeId”).jqxDropDownList({
source: standardTypeAdapter, displayMember: “name”, valueMember: “standardTypeId”, width: 200, height: 25,
theme: theme
});
$(“#name”).jqxInput({ theme: theme });
$(“#main”).jqxInput({ theme: theme });
$(“#description”).jqxInput({ theme: theme });
$(“#version”).jqxInput({ theme: theme });
$(“#issueDate”).jqxInput({ theme: theme });
$(“#dueDate”).jqxInput({ theme: theme });

$(“#Save”).jqxButton({ theme: theme });
$(“#Cancel”).jqxButton({ theme: theme });

//$(“#standardTypeId”).width(200);
//$(“#standardTypeId”).height(23);
$(“#name”).width(400);
$(“#name”).height(23);
$(“#main”).width(100);
$(“#main”).height(23);
$(“#description”).width(400);
$(“#description”).height(23);
$(“#version”).width(100);
$(“#version”).height(23);
$(“#issueDate”).width(100);
$(“#issueDate”).height(23);
$(“#dueDate”).width(100);
$(“#dueDate”).height(23);

/*
$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#product”).width(150);
$(“#product”).height(23);
$(“#quantity”).jqxNumberInput({spinMode: ‘simple’, width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });
$(“#price”).jqxNumberInput({ spinMode: ‘simple’, symbol: ‘$’, width: 150, min: 0, height: 23, spinButtons: true });
*/
//var editrow = -1;

// initialize jqxGrid
$(“#standardGrid”).jqxGrid(
{
width: “100%”,
theme: ‘darkblue’,
autoheight: true,
source: standardAdapter,
columnsresize: true,
pageable: true,
pagesizeoptions: [’25’,’50’,’100′,’200′,’300′,’400′,’500′,’1000′,’2000′,’3000′],
pagesize: 25,
virtualmode: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input id=”addRowButton” type=”button” value=”Adiciona” />’);
container.append(‘<input style=”margin-left: 5px;” id=”deleteRowButton” type=”button” value=”Elimina el Standard Seleccionado” />’);
container.append(‘<input style=”margin-left: 5px;” id=”updateRowButton” type=”button” value=”Actualiza el Standard Seleccionado” />’);
$(“#addRowButton”).jqxButton({ theme: theme });
$(“#deleteRowButton”).jqxButton({ theme: theme });
$(“#updateRowButton”).jqxButton({ theme: theme });
// create new row.
$(“#addRowButton”).on(‘click’, function () {
//var datarow = generaterow();
var commit = $(“#standardGrid”).jqxGrid(‘addrow’, null, datarow);
});
// delete row.
$(“#deleteRowButton”).on(‘click’, function () {
var selectedrowindex = $(“#standardGrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#standardGrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#standardGrid”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#standardGrid”).jqxGrid(‘deleterow’, id);
}
});
$(“#updateRowButton”).on(‘click’, function () {

//var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var selectedrowindex = $(“#standardGrid”).jqxGrid(‘getselectedrowindex’);
var rowid = $(“#standardGrid”).jqxGrid(‘getrowid’, selectedrowindex);

//getcellvaluebyid” expects row ID which you can get by using the “getrowid”

alert(“selectedrowindex = ” + selectedrowindex);
var valueFromGetCellValue = $(‘#standardGrid’).jqxGrid(‘getcellvalue’, selectedrowindex, ‘standardTypeId’);
alert(“valueFromGetCellValue = ” + valueFromGetCellValue);

alert(“rowid = ” + rowid);
var valueFromGetCellValueById = $(‘#standardGrid’).jqxGrid(‘getcellvaluebyid’, rowid, ‘standardTypeId’);
alert(“valueFromGetCellValueById = ” + valueFromGetCellValueById);

editrow = selectedrowindex;
var offset = $(“#standardGrid”).offset();
alert(“offset = ” + offset);

$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 }, theme: theme, width:”700px” });

var dataRecord = $(“#standardGrid”).jqxGrid(‘getrowdata’, editrow);
//$(“#standardTypeId”).val(dataRecord.standardTypeId);
//$(“#standardTypeId”).jqxDropDownList(‘val’, dataRecord.standardTypeId );

//alert( $(‘#standardGrid’).jqxGrid(‘getcellvalue’, 10, “standardTypeId”));
//alert( $(‘#standardGrid’).jqxGrid(‘getcellvalue’, 11, “standardTypeId”));
//alert( $(‘#standardGrid’).jqxGrid(‘getcellvalue’, 12, “standardTypeId”));

alert(“standardTypeId.value = ” + dataRecord.standardTypeId.val);
$(“#standardTypeId”).jqxDropDownList(“selectItem”, valueFromGetCellValue );
//$(“#standardTypeId”).val($(“#standardGrid”).jqxGrid(‘getcellvaluebyid’, rowid, ‘standardTypeId’));

//$(“#standardTypeId”).jqxDropDownList(“selectIndex”, 3); –> jala

$(“#name”).val(dataRecord.name);
$(“#main”).val(dataRecord.main);
$(“#description”).val(dataRecord.description);
$(“#version”).val(dataRecord.version);
$(“#issueDate”).val(dataRecord.issueDate);
$(“#dueDate”).val(dataRecord.dueDate);
// show the popup window.

$(“#popupWindow”).jqxWindow(‘open’);

/*
var datarow = generaterow();
var selectedrowindex = $(“#standardGrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#standardGrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#standardGrid”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#standardGrid”).jqxGrid(‘updaterow’, id, datarow);
$(“#standardGrid”).jqxGrid(‘ensurerowvisible’, selectedrowindex);
}
*/

});
},
rendergridrows: function () {
return standardAdapter.records;
},
renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
},
columns: [
{ text: ‘Id’, datafield: ‘standardId’, width: “5%” },
{ text: ‘Tipo Estandard’, datafield: ‘standardTypeId’, width: “10%” },
{ text: ‘Empresa’, datafield: ‘enterpriseId’, width: “10%” },
{ text: ‘Nombre’, datafield: ‘name’, width: “45%” },
{ text: ‘Codigo’, datafield: ‘main’, width: “7%” },
{ text: ‘Descripcion’, datafield: ‘description’, width: “8%” },
{ text: ‘Version’, datafield: ‘version’, width: “5%” },
{ text: ‘Fecha de<br/>Emision’, datafield: ‘issueDate’, width: “5%”,
renderer: function (text, align) {
return ‘<div style=”margin: 5px;”>Fecha de<br/>Emision</div>’;
}
},
{ text: ‘Fecha de<br/>Vencimiento’, datafield: ‘dueDate’, width: “5%”,
renderer: function (text, align) {
return ‘<div style=”margin: 5px;”>Fecha de<br/>Vencimiento</div>’;
}
}
]
});

$(“#standardGrid”).bind(“pagechanged”, function (event) {

var args = event.args;
var pagenumber = args.pagenum;
var pagesize = args.pagesize;

});

$(“#standardGrid”).bind(“pagesizechanged”, function (event) {

var args = event.args;
var pagenumber = args.pagenum;
var pagesize = args.pagesize;

});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
//$(“#popupWindow”).on(‘open’, function () {
//$(“#standardTypeId”).jqxInput(‘selectAll’);
//});

});

</script>

</head>

<body class=’default’>

<!– <div id=’standardTypeWidget’>
<h3 id=”regional” align=”center”>Estandares</h3> –>
<div id=”standardGrid”></div>

<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>Tipo Estandard:</td>
<td align=”left”><div id=”standardTypeId” /></div></td>
</tr>
<tr>
<td align=”right”>Nombre:</td>
<td align=”left”><input id=”name” /></td>
</tr>
<tr>
<td align=”right”>Codigo:</td>
<td align=”left”><input id=”main” /></td>
</tr>
<tr>
<td align=”right”>Descripcion:</td>
<td align=”left”><input id=”description” /></td>
</tr>
<tr>
<td align=”right”>Version:</td>
<td align=”left”><input id=”version” /></td>
</tr>
<tr>
<td align=”right”>Fecha de Emision:</td>
<td align=”left”><input id=”issueDate” /></td>
</tr>
<tr>
<td align=”right”>Fecha de Vencimiento:</td>
<td align=”left”><input id=”dueDate” /></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”>
<input style=”margin-right: 5px;” type=”button” id=”Save” value=”Salva” />
<input id=”Cancel” type=”button” value=”Cancela” />
</td>
</tr>
</table>
</div>
</div>

</body>
</html>

[Rodolfo HillParticipant]

I don´t know what happen.

I create a subset of my program. But now, we dont see the description of standardTypeId.

This line

{ name: ‘standardTypeId’, values: { source: standardTypeAdapter.records, value: ‘standardTypeId’, name: ‘name’ }},

do not display the name of the of the standardTypeAdapter.

I get cell value. But the grid ( standardGrid ) do not display the name of the correspondent value.

<script type=”text/javascript”>

$(document).ready(function () {

var header = $(“meta[name=’_csrf_header’]”).attr(“content”);
var token = $(“meta[name=’_csrf’]”).attr(“content”);

$.ajaxSetup({
beforeSend: function(xhr) {
xhr.setRequestHeader(‘X-CSRF-TOKEN’, token);
}
});

var standardTypeData = [{“standardTypeId”:10,”name”:”Estandar”},
{“standardTypeId”:20,”name”:”Clase de Requisito”},
{“standardTypeId”:30,”name”:”Requisito”},
{“standardTypeId”:40,”name”:”Caracteristica”},
{“standardTypeId”:50,”name”:”Especificacion”}];

var standardTypeSource =
{
datatype: “array”,
datafields: [
{ name: ‘standardTypeId’, type: ‘number’ },
{ name: ‘name’, type: ‘string’ }
],
localdata:standardTypeData
}

var standardTypeAdapter = new $.jqx.dataAdapter(standardTypeSource, { autoBind: true });

var standardSourceData = [{“dueDate”:”2017-07-11″,”standardId”:11,”name”:”Energía”,”description”:””,”main”:”A.2.2.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:10},
{“dueDate”:”2017-07-11″,”standardId”:12,”name”:”Sistemas de comunicación”,”description”:””,”main”:”A.2.3.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:20},
{“dueDate”:”2017-07-11″,”standardId”:13,”name”:”Ventilación.”,”description”:””,”main”:”A.2.4.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:30},
{“dueDate”:”2017-07-11″,”standardId”:14,”name”:”Protección de las tomas de aire exterior.”,”description”:””,”main”:”A.2.5.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:30},
{“dueDate”:”2017-07-11″,”standardId”:15,”name”:”Distancia de seguridad”,”description”:””,”main”:”A.3.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:40},
{“dueDate”:”2017-07-11″,”standardId”:16,”name”:”Mantiene una ZONA CLARA de 30 pies, entre el perímetro y el límite de las construcciones.”,”description”:””,”main”:”A.3.1.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:40},
{“dueDate”:”2017-07-11″,”standardId”:17,”name”:”Mantiene una distancia crítica de 50 pies, entre el perímetro y los espacios críticos.”,”description”:””,”main”:”A.3.2.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:20},
{“dueDate”:”2017-07-11″,”standardId”:18,”name”:”Camino perimetral.”,”description”:””,”main”:”A.4.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:30},
{“dueDate”:”2017-07-11″,”standardId”:19,”name”:”Un ancho mínimo de 10 a 20 pies (3 a 6 metros).”,”description”:””,”main”:”A.4.1.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:10},
{“dueDate”:”2017-07-11″,”standardId”:20,”name”:”Línea interior adicional de valla.”,”description”:””,”main”:”A.4.2.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:20},
{“dueDate”:”2017-07-11″,”standardId”:11,”name”:”Energía”,”description”:””,”main”:”A.2.2.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:30},
{“dueDate”:”2017-07-11″,”standardId”:12,”name”:”Sistemas de comunicación”,”description”:””,”main”:”A.2.3.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:40},
{“dueDate”:”2017-07-11″,”standardId”:13,”name”:”Ventilación.”,”description”:””,”main”:”A.2.4.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:50},
{“dueDate”:”2017-07-11″,”standardId”:14,”name”:”Protección de las tomas de aire exterior.”,”description”:””,”main”:”A.2.5.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:30},
{“dueDate”:”2017-07-11″,”standardId”:15,”name”:”Distancia de seguridad”,”description”:””,”main”:”A.3.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:30},
{“dueDate”:”2017-07-11″,”standardId”:16,”name”:”Mantiene una ZONA CLARA de 30 pies, entre el perímetro y el límite de las construcciones.”,”description”:””,”main”:”A.3.1.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:40},
{“dueDate”:”2017-07-11″,”standardId”:17,”name”:”Mantiene una distancia crítica de 50 pies, entre el perímetro y los espacios críticos.”,”description”:””,”main”:”A.3.2.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:40},
{“dueDate”:”2017-07-11″,”standardId”:18,”name”:”Camino perimetral.”,”description”:””,”main”:”A.4.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:50},
{“dueDate”:”2017-07-11″,”standardId”:19,”name”:”Un ancho mínimo de 10 a 20 pies (3 a 6 metros).”,”description”:””,”main”:”A.4.1.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:40},
{“dueDate”:”2017-07-11″,”standardId”:20,”name”:”Línea interior adicional de valla.”,”description”:””,”main”:”A.4.2.”,”enterpriseId”:0,”issueDate”:”2017-07-11″,”version”:”1.0.0″,”standardTypeId”:40}];

var standardSource =
{
datatype: “array”,
datafields: [
{ name: ‘standardId’, type:’number’ },
{ name: ‘standardTypeId’, values: { source: standardTypeAdapter.records, value: ‘standardTypeId’, name: ‘name’ }},
{ name: ‘enterpriseId’, type:’number’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘main’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘version’, type: ‘string’ },
{ name: ‘issueDate’, type: ‘string’ },
{ name: ‘dueDate’, type: ‘string’ }
],
localdata: standardSourceData
}

var standardAdapter = new $.jqx.dataAdapter(standardSource, { autoBind: true });

var theme = ‘darkblue’;

$(“#Elimina”).jqxButton({ theme: theme });
$(“#Cancela”).jqxButton({ theme: theme });

// initialize the input fields.
//$(“#standardTypeId”).jqxInput({ theme: theme });
$(“#standardTypeId”).jqxDropDownList({
source: standardTypeAdapter, displayMember: “name”, valueMember: “standardTypeId”, width: 200, height: 25,
theme: theme
// selectedIndex: 0, source: standardTypeAdapter, displayMember: “name”, valueMember: “standardTypeId”, width: 200, height: 25,
// theme: theme
});
$(“#name”).jqxInput({ theme: theme });
$(“#main”).jqxInput({ theme: theme });
$(“#description”).jqxInput({ theme: theme });
$(“#version”).jqxInput({ theme: theme });
$(“#issueDate”).jqxDateTimeInput({ width: ‘300px’, height: ’25px’, theme: theme });
$(“#dueDate”).jqxDateTimeInput({ width: ‘300px’, height: ’25px’, theme: theme });
$(“#Save”).jqxButton({ theme: theme });
$(“#Cancel”).jqxButton({ theme: theme });

//$(“#standardTypeId”).width(200);
//$(“#standardTypeId”).height(23);
$(“#name”).width(400);
$(“#name”).height(23);
$(“#main”).width(100);
$(“#main”).height(23);
$(“#description”).width(400);
$(“#description”).height(23);
$(“#version”).width(100);
$(“#version”).height(23);

// initialize jqxGrid
$(“#standardGrid”).jqxGrid(
{
width: “100%”,
theme: ‘darkblue’,
autoheight: true,
selectionmode: ‘singlerow’,
source: standardAdapter,
//columnsresize: true,
//pageable: true,
//pagesizeoptions: [’25’,’50’,’100′,’200′,’300′,’400′,’500′,’1000′,’2000′,’3000′],
//pagesize: 25,
virtualmode: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input style=”margin-left: 5px;” id=”updateRowButton” type=”button” value=”Actualiza el Standard Seleccionado” />’);
$(“#updateRowButton”).jqxButton({ theme: theme });
// create new row.

$(“#updateRowButton”).on(‘click’, function () {

$(‘#addOrUpdWindow’).jqxWindow(‘setTitle’, ‘Actualiza’);

//var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowindex = $(“#standardGrid”).jqxGrid(‘getselectedrowindex’);
var rowid = $(“#standardGrid”).jqxGrid(‘getrowid’, rowindex);

editrow = rowindex;
var offset = $(“#standardGrid”).offset();
alert(“offset = ” + offset);

var dataRecord = $(“#standardGrid”).jqxGrid(‘getrowdata’, editrow);

$(“#addOrUpdWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 }, theme: theme, width:”700px” });

// For getting a cell value, you can the “getcellvalue” method. It works with row index.
// The “getcellvaluebyid” expects row ID which you can get by using the “getrowid”

alert(“Con rowindex = ” + rowindex);
var valueFromGetCellValue = $(‘#standardGrid’).jqxGrid(‘getcellvalue’, rowindex, “standardTypeId”);
var valueFromGetCellText = $(‘#standardGrid’).jqxGrid(‘getcelltext’, rowindex, “standardTypeId”);
alert(“valueFromGetCellValue = ” + valueFromGetCellValue);
alert(“valueFromGetCellText = ” + valueFromGetCellText);

//var Value = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, ‘ID’);

alert(“Con rowid = ” + rowid);
var valueFromGetCellValueById = $(‘#standardGrid’).jqxGrid(‘getcellvaluebyid’, rowid, “standardTypeId”);
var valueFromGetCellTextById = $(‘#standardGrid’).jqxGrid(‘getcelltextbyid’, rowid, “standardTypeId”);
alert(“valueFromGetCellValueById = ” + valueFromGetCellValueById);
alert(“valueFromGetCellTextById = ” + valueFromGetCellTextById);

var canUpdateStandardTypeId = false;

$(“#standardId”).val(dataRecord.standardId);
//alert(“standardTypeId = ” + dataRecord.standardTypeId);

canUpdateStandardTypeId = true;

// alert(“standardTypeId ” + dataRecord.standardTypeId);
$(“#standardTypeId”).jqxDropDownList(“selectItem”, valueFromGetCellValue );

if(canUpdateStandardTypeId) {
$(“#standardTypeId”).jqxDropDownList({disabled: false});
} else {
$(“#standardTypeId”).jqxDropDownList({disabled: true});
}

//$(“#standardTypeId”).val($(“#standardGrid”).jqxGrid(‘getcellvaluebyid’, rowid, ‘standardTypeId’));
//$(“#standardTypeId”).jqxDropDownList(“selectIndex”, 3); –> jala

$(“#enterpriseId”).val(dataRecord.enterpriseId);
//alert(dataRecord.enterpriseId);

$(“#name”).val(dataRecord.name);
$(“#main”).val(dataRecord.main);
$(“#description”).val(dataRecord.description);
$(“#version”).val(dataRecord.version);

var issueDateParts = dataRecord.issueDate.split(‘-‘);
//please put attention to the month (parts[0]), Javascript counts months from 0:
// January – 0, February – 1, etc
$(“#issueDate”).jqxDateTimeInput(‘setDate’, new Date(issueDateParts[0],issueDateParts[1]-1,issueDateParts[2]));

var dueDateParts = dataRecord.dueDate.split(‘-‘);
$(“#dueDate”).jqxDateTimeInput(‘setDate’, new Date(dueDateParts[0],dueDateParts[1]-1,dueDateParts[2]));

// show the popup window.

$(“#addOrUpdWindow”).jqxWindow(‘open’);

/*
var datarow = generaterow();
var selectedrowindex = $(“#standardGrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#standardGrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#standardGrid”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#standardGrid”).jqxGrid(‘updaterow’, id, datarow);
$(“#standardGrid”).jqxGrid(‘ensurerowvisible’, selectedrowindex);
}
*/

});
},
rendergridrows: function () {
return standardAdapter.records;
},
renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
},
columns: [
{ text: ‘Id’, datafield: ‘standardId’, width: “5%” },
{ text: ‘Tipo Estandard’, datafield: ‘standardTypeId’, width: “10%” },
{ text: ‘Empresa’, datafield: ‘enterpriseId’, hidden: true },
{ text: ‘Nombre’, datafield: ‘name’, width: “45%” },
{ text: ‘Codigo’, datafield: ‘main’, width: “10%” },
{ text: ‘Descripcion’, datafield: ‘description’, width: “15%” },
{ text: ‘Version’, datafield: ‘version’, width: “5%” },
{ text: ‘Fecha de<br/>Emision’, datafield: ‘issueDate’, width: “5%”,
renderer: function (text, align) {
return ‘<div style=”margin: 5px;”>Fecha de<br/>Emision</div>’;
}
},
{ text: ‘Fecha de<br/>Vencimiento’, datafield: ‘dueDate’, width: “5%”,
renderer: function (text, align) {
return ‘<div style=”margin: 5px;”>Fecha de<br/>Vencimiento</div>’;
}
}
]
});

$(“#standardGrid”).bind(“pagechanged”, function (event) {

var args = event.args;
var pagenumber = args.pagenum;
var pagesize = args.pagesize;

});

$(“#standardGrid”).bind(“pagesizechanged”, function (event) {

var args = event.args;
var pagenumber = args.pagenum;
var pagesize = args.pagesize;

});

// initialize the popup window and buttons.
$(“#addOrUpdWindow”).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});

$(“#deleteWindow”).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancela”), modalOpacity: 0.01
});

//$(“#addOrUpdWindow”).on(‘open’, function () {
//$(“#standardTypeId”).jqxInput(‘selectAll’);
//});

});

</script>

</head>

<body class=’default’>

<!– <div id=’standardTypeWidget’>
<h3 id=”regional” align=”center”>Estandares</h3> –>
<div id=”standardGrid”></div>

<div id=”addOrUpdWindow”>
<div>Edita</div>
<div style=”overflow: hidden;”>

<input type=”hidden” id=”standardId” >
<input type=”hidden” id=”enterpriseId” >

<table>
<tr>
<td align=”right”>Tipo Estandard:</td>
<td align=”left”><div id=”standardTypeId” /></div></td>
</tr>
<tr>
<td align=”right”>Nombre:</td>
<td align=”left”><input id=”name” /></td>
</tr>
<tr>
<td align=”right”>Codigo:</td>
<td align=”left”><input id=”main” /></td>
</tr>
<tr>
<td align=”right”>Descripcion:</td>
<td align=”left”><input id=”description” /></td>
</tr>
<tr>
<td align=”right”>Version:</td>
<td align=”left”><input id=”version” /></td>
</tr>
<tr>
<td align=”right”>Fecha de Emision:</td>
<td align=”left”><div id=”issueDate”></div></td>
</tr>
<tr>
<td align=”right”>Fecha de Vencimiento:</td>
<td align=”left”><div id=”dueDate”></div></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”>
<input style=”margin-right: 5px;” type=”button” id=”Save” value=”Salva” />
<input id=”Cancel” type=”button” value=”Cancela” />
</td>
</tr>
</table>
</div>
</div>

<div id=”deleteWindow”>
<div>Elimina</div>
<div style=”overflow: hidden;”>

<div id=”deleteMessage”></div>

<input type=”hidden” id=”standardKey” >

<table>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”>
<input style=”margin-right: 5px;” type=”button” id=”Elimina” value=”Elimina” />
<input id=”Cancela” type=”button” value=”Cancela” />
</td>
</tr>
</table>

</div>
</div>

</body>
</html>

[Author]

Posts