How to place row in button.click so that it works the same way as buttonclick: f

[NovatoParticipant]

Hi, I have a problem with a column of buttons and I can’t find anything related to it, that’s why I decided to ask in the forum.

My question is this:
How to place row in button.click so that it works the same way as buttonclick: function (row)?

I am working with dynamic columns so when I fill up my jqxgrid I fill it dimmatically. I have a column of buttons called Edit which I want to enable and disable with a checkbox.
I have followed this example it has helped me a lot but the way to declare the buttons are different, so when using button.click I get an error when obtaining the datafield and with buttonclick: function (row) it does not mark me error how I can solve this.

Thank you.

This is my code:

function obtener_datos() {

    var persona = $("[id*=ddlPersona]").val();
    var Sucursal = "";
 
    if (persona != 0) {
       
        var valores;
        var datafields = new Array();
        var columns = new Array();
        var columnsArray = [];
      
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmPersona.aspx/Intervalo",
            contentType: "application/json; charset=utf-8",
            data: '{id_persona:"' + persona + '",Sucursal:"' + Sucursal + '"}',
            async: false,

            success: function(data) {

                if (data != '') {
          
                    valores = JSON.parse(valores[0]);
				
	/**************************************  This is my dinamyc columns    ***********************************************************/
                    for (var i in valores[0]) {
                        datafields.push({ name: i, type: 'string' });
                        columns.push({ text: i, datafield: i, filtercondition: 'CONTAINS', align: 'center', minwidth: 100 });
						
                    }

                    for (var j = 1; j < columns.length; j++) {
                        columnsArray.push(columns[j]);
                      
                    }
	
	/**********************************************************************************************************************************/

                }

                var gridSource =
                {
                    datatype: "json",
                    datafields: datafields,
                    localdata: valores, 
                    async: false
                   
                };

                var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

                var editrow = -1;

                columnsArray.push({ text: 'Edit', datafield: 'Edit', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, columntype: 'button', cellclassname: "color_especial",  
                    cellsrenderer: function() { },
                    buttonclick: function(row) {

                        editrow = row;
                       
    /*******************  Here I get an error when using button.click (event) from the previous example ***************/
	
						 var datarecord = $("#gvDatosBI").jqxGrid('getrowdata', editrow);
                         var id_bonos_aclaracion = columns_bonos[0].datafield;
                         id_bonos_aclaracion_popup = datarecord[id_bonos_aclaracion];
						 
	/******************************************************************************************************************/					 
						 

                         console.log("datarecord ----> ", datarecord);
                         console.log("Id_bonos_aclaracion ----> ", id_bonos_aclaracion);
                         console.log("id_bonos_aclaracion_popup ----> ", id_bonos_aclaracion_popup);

                        var aclaracion = columns_bonos[26].datafield;
                        aclaracion_status = datarecord[aclaracion];

                        var nombre_col_Total_bono_porcentaje = $("#gvDatos").jqxGrid('getcolumnat', 12).datafield;
                        var nombre_col_Total_bono_pesos = $("#gvDatos").jqxGrid('getcolumnat', 13).datafield;                                       

                      
                        $("#txtTotal_Porcentaje").val(dataRecord[nombre_col_Total_bono_porcentaje]);
                        $("#txtTotal_Pesos").val(dataRecord[nombre_col_Total_bono_pesos]);
                    
                        

                     //Popup bootstrap display data in the input text. 
                       $("#Popup_Actualizar").modal('show');
                    }
                });
			

                $("#gvDatos").jqxGrid({
                    source: gridDataAdapter,
	            editable:true,
                    width: '100%',
                    columnsresize: true,
                    autoheight: false,
                    autorowheight: false,
                    pageable: true,
                    showfilterrow: true,
                    filterable: true,
                    rowdetails: true,
                    initrowdetails: initrowdetails_BI2,
                    rowdetailstemplate: { rowdetails: "<div id='grid' style=' margin: 10px; '></div>", rowdetailsheight: 250, rowdetailshidden: true },
                 
                    handlekeyboardnavigation: function(event) {
                        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                        if (key == 13) {
                           
                            return true;
                        }
                        else if (key == 27) {
                         
                            return true;
                        }
                    },

                    columns: columnsArray

                });

            },

            error: function(error) {
                alert(error.responseText);
                console.log(error.responseText);
                jsonValue = jQuery.parseJSON(Error.responseText);
                alert(error.respose.Text);
                alert("Error");
            }
        });

    }
    else {
      
        $('#PopupDatos').modal('show');
    }
}

[HristoParticipant]

Hello Novato,

You mean that there is an error when using “click” event over a button.
Could you clarify what you want to achieve?
Please, type the error that you receive.

Also, I would like to mention one thing that is very important.
I saw that you use function (“obtener_datos”) to create the jqxGrid.
This could cause many issues.
You should create the grid just once and if you want to update it then use its properties and methods.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[NovatoParticipant]

Hi Hristo.

I am doing the following:

I have a main grid with its nested grid, the main grid has a column of buttons where by clicking I show information in a bootstrap modal.

My grid has a checkbox type column where when you check the checkbox the button disables to not show the information in the modal.

I am guided by this example:

My problem is the following:
When executing my code you have an error in this code:

Code:

 if (data.Aprobar) {
                    $('button{rowId}').jqxButton({ disabled: true });                                             
                   }

Error:

Uncaught Error: Syntax error, unrecognized expression: button{rowId}
    at Function.oe.error (jquery-3.3.1.min.js:2)
    at oe.tokenize (jquery-3.3.1.min.js:2)
    at oe.select (jquery-3.3.1.min.js:2)
    at Function.oe [as find] (jquery-3.3.1.min.js:2)
    at w.fn.init.find (jquery-3.3.1.min.js:2)
    at new w.fn.init (jquery-3.3.1.min.js:2)
    at w (jquery-3.3.1.min.js:2)
    at createwidget (ConsultaBI.js:1628)
    at c.<computed>._renderwidgetcell (jqxgrid.js:8)
    at _rendercell (jqxgrid.js:8)

Also use the code as in the example:

if (data.Aprobar) {
                    $('.btn-${rowId}').jqxButton({ disabled: true });                  
                   }

Error:

Uncaught Error: Syntax error, unrecognized expression: .btn-${rowId}
    at Function.oe.error (jquery-3.3.1.min.js:2)
    at oe.tokenize (jquery-3.3.1.min.js:2)
    at oe.select (jquery-3.3.1.min.js:2)
    at Function.oe [as find] (jquery-3.3.1.min.js:2)
    at w.fn.init.find (jquery-3.3.1.min.js:2)
    at new w.fn.init (jquery-3.3.1.min.js:2)
    at w (jquery-3.3.1.min.js:2)
    at createwidget (ConsultaBI.js:1631)
    at c.<computed>._renderwidgetcell (jqxgrid.js:8)
    at _rendercell (jqxgrid.js:8)

I could solve it with the following code and add the cellbeginedit property to my column.

if (data.Aprobar) {
  $('button').jqxButton({ disabled: true });
}

My question is:
How to deactivate or activate the entire column of buttons when clicking a button that is outside the main grid?

[HristoParticipant]

Hello Novato,

There was a piece of missing information about the “I am guided by this example:”?
But I think it is possible to be skipped.
If you want to disable the whole column with the button you could use the “cellbeginedit” callback as you mentioned.
Also, you could add a class with which you could disable the clicking event over the buttons.
Or another way will be to use the approach from the “Widget Column” demo and whatever you want to refresh the jqxGrid and change the settings of the buttons.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts