jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Button in JqxGrid

Tagged: 

This topic contains 4 replies, has 1 voice, and was last updated by  Rai 9 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Button in JqxGrid Posts
  • March 18, 2016 at 1:39 pm Button in JqxGrid #82632

    Rai
    Participant

    Hi, I have a button how image inside my jqxgrid, beause I can’t put a image css to my button, whatever.

    I was tried now in my return cellsrenderer put this code
    return ‘<button style=”width: 100%;background-color:transparent;”></button>’;

    all fine until my function only return the dataRecord in the position [8]
    I tried all please help me 🙁

    `function myFunction(row, column, value) {
    // get the clicked row’s data and initialize the input fields.
    var offset = $(“#grillaResultados”).offset();
    var dataRecord = $(“#grillaResultados”).jqxGrid(‘getrowdata’, row);
    var numContrato = dataRecord.NumeroContrato;
    alert(“Numero de contrato: [” + dataRecord.NumeroContrato + “]”);
    // show the popup window.
    $(“#popupWindowLog”).jqxWindow(‘open’);
    //$(“#popupWindowLog “).jqxWindow(‘open’, { height: ‘100%’, width: ‘auto’, theme: ‘ui-start’, isModal: true });

    //Dibujo la grillaResultado2
    var origen2 = new $.jqx.dataAdapter
    ({
    type: ‘post’,
    datatype: ‘json’,
    //Campos que enviaremos a la función para realizar la consulta
    data: { ‘numContr’: numContrato },
    datafields: [
    { name: ‘fechaRegistro’, type: ‘string’ },
    { name: ‘pasoProceso’, type: ‘string’ },
    { name: ‘usuario’, type: ‘string’ },
    { name: ‘descrDetalleLog’, type: ‘string’ }
    ],
    url: ‘@Url.RouteUrl(“ConsultarLogAuditoria_default”, new { area = “ConsultarLogAuditoria”, controller = “LogAuditoria”, action = “ListarDetalle” })’,
    sortcolumn: ‘fechaRegistro’,
    sortdirection: ‘asc’,
    beforeprocessing: function (data) {

    },
    pager: function (pagenum, pagesize, oldpagenum) {
    // callback called when a page or page size is changed.
    }
    }); //Fin origen2 del jqx.dataAdapter

    $(“#grillaResultados2”).jqxGrid(
    {
    //autoheight: true,
    //autorowheight: true,
    width: ‘100%’,
    source: origen2,
    theme: ‘default’,
    scrollmode: ‘deferred’,
    localization: { loadtext: “Cargando” },
    columns: [
    { text: ‘Fecha de Registro’, columngroup: ‘InfOpCre’, datafield: ‘fechaRegistro’, width: ‘16%’, editable: false },
    { text: ‘Paso del Proceso’, columngroup: ‘InfOpCre’, datafield: ‘pasoProceso’, width: ‘14%’, editable: false },
    { text: ‘Usuario’, columngroup: ‘InfOpCre’, datafield: ‘usuario’, width: ‘28%’, editable: false },
    { text: ‘Descripción Detalle del Log’, columngroup: ‘InfOpCre’, datafield: ‘descrDetalleLog’, width: ‘100%’, editable: false }
    ],
    columngroups: [
    { text: ‘Log de Eventos Proceso de Inyección de Operaciones’, align: ‘left’, name: ‘InfOpCre’, theme: ‘ui-start’ }
    ]
    }); //Fin Grilla Resultado2
    }

    $(function () {

    $(‘#btnBuscar’).click(function (evento)
    {
    evento.preventDefault();

    var columnsrenderer = function (value) {
    return ‘<div style=”text-align: center; margin-top: 5px;”>’ + value + ‘</div>’;
    }
    var origen = new $.jqx.dataAdapter
    ({
    type: ‘post’,
    datatype: ‘json’,
    //Campos que enviaremos a la función para realizar la consulta
    data: { ‘fecDesde’: fecDesde, ‘fecHasta’: fecHasta, ‘cmbUsu’: cmbUsu, ‘numContr’: numContr },

    datafields: [
    { name: ‘FechaRegistro’, type: ‘string’},
    { name: ‘NumeroContrato’, type: ‘string’ },
    { name: ‘EstadoFinalOpe’, type: ‘string’ },
    { name: ‘TipoUsuario’, type: ‘string’ }
    ],
    url: ‘@Url.RouteUrl(“ConsultarLogAuditoria_default”, new { area = “ConsultarLogAuditoria”, controller = “LogAuditoria”, action = “Listar” })’,
    sortcolumn: ‘FechaRegistro’,
    sortdirection: ‘asc’,
    root: ‘Rows’,
    beforeprocessing: function (data) {

    }
    }); //Fin origen del jqx.dataAdapter

    $(“#grillaResultados”).jqxGrid(
    {
    //autoheight: true,
    //autorowheight: true,
    width: ‘100%’,
    height: 300,
    source: origen,
    theme: ‘default’,
    scrollmode: ‘deferred’,
    localization: { loadtext: “Cargando” },
    columns: [
    { text: ‘Fecha de Registro’, columngroup: ‘InfOpCre’, datafield: ‘FechaRegistro’, width: ‘20%’, editable: false, sortable: true },
    { text: ‘N° Contrato’, columngroup: ‘InfOpCre’, datafield: ‘NumeroContrato’, width: ‘10%’, editable: false },
    { text: ‘Estado Final Operación’, columngroup: ‘InfOpCre’, datafield: ‘EstadoFinalOpe’, width: ‘20%’, editable: false },
    { text: ‘Usuario’, columngroup: ‘InfOpCre’, datafield: ‘TipoUsuario’, width: ‘35%’, editable: false },
    {
    text: ‘Ver Detalle Log’, renderer: columnsrenderer, datafield: ‘Log’, columngroup: ‘InfOpCre’, width: ‘13%’/*, columntype: ‘button’*/, editable: false,
    cellsrenderer: function (row, column, value) {
    //return “Log”;
    return ‘<button style=”width: 100%;background-color:transparent;”></button>’;
    }, buttonclick: function (row) {
    // get the clicked row’s data and initialize the input fields.
    /*
    var offset = $(“#grillaResultados”).offset();
    var dataRecord = $(“#grillaResultados”).jqxGrid(‘getrowdata’, row);
    var numContrato = dataRecord.NumeroContrato;

    // show the popup window.
    $(“#popupWindowLog”).jqxWindow(‘open’);
    //$(“#popupWindowLog “).jqxWindow(‘open’, { height: ‘100%’, width: ‘auto’, theme: ‘ui-start’, isModal: true });

    //Dibujo la grillaResultado2
    var origen2 = new $.jqx.dataAdapter
    ({
    type: ‘post’,
    datatype: ‘json’,
    //Campos que enviaremos a la función para realizar la consulta
    data: { ‘numContr’: numContrato },

    datafields: [
    { name: ‘fechaRegistro’, type: ‘string’ },
    { name: ‘pasoProceso’, type: ‘string’ },
    { name: ‘usuario’, type: ‘string’ },
    { name: ‘descrDetalleLog’, type: ‘string’ }
    ],
    url: ‘@Url.RouteUrl(“ConsultarLogAuditoria_default”, new { area = “ConsultarLogAuditoria”, controller = “LogAuditoria”, action = “ListarDetalle” })’,
    sortcolumn: ‘fechaRegistro’,
    sortdirection: ‘asc’,
    beforeprocessing: function (data) {

    },
    pager: function (pagenum, pagesize, oldpagenum) {
    // callback called when a page or page size is changed.
    }
    }); //Fin origen2 del jqx.dataAdapter

    $(“#grillaResultados2”).jqxGrid(
    {
    //autoheight: true,
    //autorowheight: true,
    width: ‘100%’,
    source: origen2,
    theme: ‘default’,
    scrollmode: ‘deferred’,
    localization: { loadtext: “Cargando” },
    columns: [
    { text: ‘Fecha de Registro’, columngroup: ‘InfOpCre’, datafield: ‘fechaRegistro’, width: ‘16%’, editable: false },
    { text: ‘Paso del Proceso’, columngroup: ‘InfOpCre’, datafield: ‘pasoProceso’, width: ‘14%’, editable: false },
    { text: ‘Usuario’, columngroup: ‘InfOpCre’, datafield: ‘usuario’, width: ‘28%’, editable: false },
    { text: ‘Descripción Detalle del Log’, columngroup: ‘InfOpCre’, datafield: ‘descrDetalleLog’, width: ‘100%’, editable: false }
    ],
    columngroups: [
    { text: ‘Log de Eventos Proceso de Inyección de Operaciones’, align: ‘left’, name: ‘InfOpCre’, theme: ‘ui-start’ }
    ]
    }); //Fin Grilla Resultado2*/

    }
    }
    ],
    columngroups: [
    { text: ‘Log de Auditoría’, align: ‘left’, name: ‘InfOpCre’, theme: ‘ui-start’ }
    ]
    });

    });

    March 18, 2016 at 1:40 pm Button in JqxGrid #82633

    Rai
    Participant
    function myFunction(row, column, value) {
// get the clicked row’s data and initialize the input fields.
var offset = $(“#grillaResultados”).offset();
var dataRecord = $(“#grillaResultados”).jqxGrid(‘getrowdata’, row);
var numContrato = dataRecord.NumeroContrato;
alert(“Numero de contrato: [" + dataRecord.NumeroContrato + "]“);
// show the popup window.
$(“#popupWindowLog”).jqxWindow(‘open’);
//$(“#popupWindowLog “).jqxWindow(‘open’, { height: ’100%’, width: ‘auto’, theme: ‘ui-start’, isModal: true });
//Dibujo la grillaResultado2
var origen2 = new $.jqx.dataAdapter
({
type: ‘post’,
datatype: ‘json’,
//Campos que enviaremos a la función para realizar la consulta
data: { ‘numContr’: numContrato },
datafields: [
{ name: 'fechaRegistro', type: 'string' },
{ name: 'pasoProceso', type: 'string' },
{ name: 'usuario', type: 'string' },
{ name: 'descrDetalleLog', type: 'string' }
],
url: ‘@Url.RouteUrl(“ConsultarLogAuditoria_default”, new { area = “ConsultarLogAuditoria”, controller = “LogAuditoria”, action = “ListarDetalle” })’,
sortcolumn: ‘fechaRegistro’,
sortdirection: ‘asc’,
beforeprocessing: function (data) {
},
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}
}); //Fin origen2 del jqx.dataAdapter
$(“#grillaResultados2″).jqxGrid(
{
//autoheight: true,
//autorowheight: true,
width: ’100%’,
source: origen2,
theme: ‘default’,
scrollmode: ‘deferred’,
localization: { loadtext: “Cargando” },
columns: [
{ text: 'Fecha de Registro', columngroup: 'InfOpCre', datafield: 'fechaRegistro', width: '16%', editable: false },
{ text: 'Paso del Proceso', columngroup: 'InfOpCre', datafield: 'pasoProceso', width: '14%', editable: false },
{ text: 'Usuario', columngroup: 'InfOpCre', datafield: 'usuario', width: '28%', editable: false },
{ text: 'Descripción Detalle del Log', columngroup: 'InfOpCre', datafield: 'descrDetalleLog', width: '100%', editable: false }
],
columngroups: [
{ text: 'Log de Eventos Proceso de Inyección de Operaciones', align: 'left', name: 'InfOpCre', theme: 'ui-start' }
]
}); //Fin Grilla Resultado2
}
$(function () {
$(‘#btnBuscar’).click(function (evento)
{
evento.preventDefault();
var columnsrenderer = function (value) {
return ‘<div style=”text-align: center; margin-top: 5px;”>’ + value + ‘</div>’;
}
var origen = new $.jqx.dataAdapter
({
type: ‘post’,
datatype: ‘json’,
//Campos que enviaremos a la función para realizar la consulta
data: { ‘fecDesde’: fecDesde, ‘fecHasta’: fecHasta, ‘cmbUsu’: cmbUsu, ‘numContr’: numContr },
datafields: [
{ name: 'FechaRegistro', type: 'string'},
{ name: 'NumeroContrato', type: 'string' },
{ name: 'EstadoFinalOpe', type: 'string' },
{ name: 'TipoUsuario', type: 'string' }
],
url: ‘@Url.RouteUrl(“ConsultarLogAuditoria_default”, new { area = “ConsultarLogAuditoria”, controller = “LogAuditoria”, action = “Listar” })’,
sortcolumn: ‘FechaRegistro’,
sortdirection: ‘asc’,
root: ‘Rows’,
beforeprocessing: function (data) {
}
}); //Fin origen del jqx.dataAdapter
$(“#grillaResultados”).jqxGrid(
{
//autoheight: true,
//autorowheight: true,
width: ’100%’,
height: 300,
source: origen,
theme: ‘default’,
scrollmode: ‘deferred’,
localization: { loadtext: “Cargando” },
columns: [
{ text: 'Fecha de Registro', columngroup: 'InfOpCre', datafield: 'FechaRegistro', width: '20%', editable: false, sortable: true },
{ text: 'N° Contrato', columngroup: 'InfOpCre', datafield: 'NumeroContrato', width: '10%', editable: false },
{ text: 'Estado Final Operación', columngroup: 'InfOpCre', datafield: 'EstadoFinalOpe', width: '20%', editable: false },
{ text: 'Usuario', columngroup: 'InfOpCre', datafield: 'TipoUsuario', width: '35%', editable: false },
{
text: 'Ver Detalle Log', renderer: columnsrenderer, datafield: 'Log', columngroup: 'InfOpCre', width: '13%'/*, columntype: 'button'*/, editable: false,
cellsrenderer: function (row, column, value) {
//return "Log";
return '<button style="width: 100%;background-color:transparent;"></button>';
}, buttonclick: function (row) {
// get the clicked row's data and initialize the input fields.
/*
var offset = $("#grillaResultados").offset();
var dataRecord = $("#grillaResultados").jqxGrid('getrowdata', row);
var numContrato = dataRecord.NumeroContrato;
// show the popup window.
$("#popupWindowLog").jqxWindow('open');
//$("#popupWindowLog ").jqxWindow('open', { height: '100%', width: 'auto', theme: 'ui-start', isModal: true });
//Dibujo la grillaResultado2
var origen2 = new $.jqx.dataAdapter
({
type: 'post',
datatype: 'json',
//Campos que enviaremos a la función para realizar la consulta
data: { 'numContr': numContrato },
datafields: [
{ name: 'fechaRegistro', type: 'string' },
{ name: 'pasoProceso', type: 'string' },
{ name: 'usuario', type: 'string' },
{ name: 'descrDetalleLog', type: 'string' }
],
url: ‘@Url.RouteUrl(“ConsultarLogAuditoria_default”, new { area = “ConsultarLogAuditoria”, controller = “LogAuditoria”, action = “ListarDetalle” })’,
sortcolumn: ‘fechaRegistro’,
sortdirection: ‘asc’,
beforeprocessing: function (data) {
},
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}
}); //Fin origen2 del jqx.dataAdapter
$(“#grillaResultados2″).jqxGrid(
{
//autoheight: true,
//autorowheight: true,
width: ’100%’,
source: origen2,
theme: ‘default’,
scrollmode: ‘deferred’,
localization: { loadtext: “Cargando” },
columns: [
{ text: 'Fecha de Registro', columngroup: 'InfOpCre', datafield: 'fechaRegistro', width: '16%', editable: false },
{ text: 'Paso del Proceso', columngroup: 'InfOpCre', datafield: 'pasoProceso', width: '14%', editable: false },
{ text: 'Usuario', columngroup: 'InfOpCre', datafield: 'usuario', width: '28%', editable: false },
{ text: 'Descripción Detalle del Log', columngroup: 'InfOpCre', datafield: 'descrDetalleLog', width: '100%', editable: false }
],
columngroups: [
{ text: 'Log de Eventos Proceso de Inyección de Operaciones', align: 'left', name: 'InfOpCre', theme: 'ui-start' }
]
}); //Fin Grilla Resultado2*/
}
}
],
columngroups: [
{ text: 'Log de Auditoría', align: 'left', name: 'InfOpCre', theme: 'ui-start' }
]
});
});
    March 18, 2016 at 3:43 pm Button in JqxGrid #82637

    Rai
    Participant

    I can !!

    The event i need is:
    $(“#grillaResultados”).on(“cellclick”, function (event) {

    }

    March 18, 2016 at 4:04 pm Button in JqxGrid #82638

    Rai
    Participant

    but if I press any cell show the info, it is wrong, I just want in a cell. 🙁

    March 18, 2016 at 4:07 pm Button in JqxGrid #82639

    Rai
    Participant

    condition in columnindex, sorry.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.