How to disable a button with checkbox column in jqxgrid

[NovatoParticipant]

Hello I hope you can help me with this problem since I do not find something related to my problem in advance thank you very much.

I have a jqxgrid with a checkbox type column and another button type column. Clicking on the button opens a bootstrap modal with my grid information.

What I need to do is that when selecting the checkbox the button is disabled to not open the modal with the information.

I have also seen that filtering the button is no longer disabled, it changes color but still shows me the popup.

This is my code:

function preparegriddata(rowscount) {
     // prepare the data
     var data = new Array();
     var firstNames = [
       "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
     ];

     var lastNames = [
       "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
     ];

     var productNames = [
       "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
     ];

     for (var i = 0; i < rowscount; i++) {
       var row = {};
       var productindex = Math.floor(Math.random() * productNames.length);
       var quantity = 1 + Math.round(Math.random() * 10);

       row["available"] = false;
       row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
       row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
       row["productname"] = productNames[productindex];
       row["quantity"] = quantity;
       data[i] = row;
     }

     return data;
   }

   // prepare the data
   var data = preparegriddata(20);

   var source = {
     localdata: data,
     datatype: "array",
     datafields: [{
         name: 'firstname',
         type: 'string'
       },
       {
         name: 'lastname',
         type: 'string'
       },
       {
         name: 'productname',
         type: 'string'
       },
       {
         name: 'available',
         type: 'bool'
       },
       {
         name: 'quantity',
         type: 'number'
       },
     ],
     updaterow: function(rowid, rowdata, commit) {
       // synchronize with the server - send update command   
       commit(true);
     }
   };

   if (JSON.parse(localStorage.getItem('disabledRows'))) {
     var disabledRows = JSON.parse(localStorage.getItem('disabledRows')).slice();
   } else {
     var disabledRows = [];
   }

   var cellbeginedit = function(row, datafield, columntype, value) {
     if (disabledRows.indexOf(row) !== -1) {
       return false;
     }
   }

   var cellsrenderer = function(row, column, value, defaultHtml) {
     if (disabledRows.indexOf(row) !== -1) {
       var element = $(defaultHtml);
       element.css('color', '#999');
       return element[0].outerHTML;
     }

     return defaultHtml;
   }
   
   var valor_checkbox_seleccionado;
   var cellclass = function(row, columnfield, value, defaultHtml) {

                    valor_checkbox_seleccionado = $('#jqxgrid').jqxGrid('getcellvalue', row, "Available");       
                    if (valor_checkbox_seleccionado === undefined || valor_checkbox_seleccionado === false) {
                        return 'color_enabled';

                    }
                    else {
                        return 'color_disabled';                   
                   			 }
                }
   
   

   var checkboxAdapter = new $.jqx.dataAdapter(source, {
     beforeLoadComplete: function(records) {
       for (var i = 0, length = records.length; i < length; i++) {
         if (disabledRows.indexOf(i) !== -1) {
           records[i].available = true;
         }
       }
     }
   });

   // initialize jqxGrid
   $("#jqxgrid").jqxGrid({
     width: 850,
     source: checkboxAdapter,
     editable: true,
     selectionmode: 'singlerow',
     columns: [{
         text: 'Available',
         datafield: 'available',
         columntype: 'checkbox',
         width: 67,
         cellbeginedit: cellbeginedit
       },
       {
         text: 'First Name',
         columntype: 'textbox',
         datafield: 'firstname',
         width: 80,
         cellbeginedit: cellbeginedit,
         cellsrenderer: cellsrenderer
       },
       {
         text: 'Last Name',
         datafield: 'lastname',
         columntype: 'textbox',
         width: 80,
         cellbeginedit: cellbeginedit,
         cellsrenderer: cellsrenderer
       },
       {
         text: 'Product',
         columntype: 'dropdownlist',
         datafield: 'productname',
         width: 190,
         cellbeginedit: cellbeginedit,
         cellsrenderer: cellsrenderer
       },
       {
         text: 'Quantity',
         datafield: 'quantity',
         width: 70,
         cellsalign: 'right',
         columntype: 'numberinput',
         cellbeginedit: cellbeginedit,
         cellsrenderer: cellsrenderer
       },
       {
         text: 'Edit',
         datafield: 'edit',
         width: 70,
         columntype: 'button',
         cellclassname: cellclass,
         cellbeginedit: cellbeginedit,         
         cellsrenderer: function() { },
         buttonclick: function(row) 
         {
// Open the modal with the information
         alert("Hello");
         }
         
       }
     ]
   });

   $('#jqxgrid').on('cellvaluechanged', function(event) {
     var args = event.args;
     var datafield = event.args.datafield;
     var rowBoundIndex = args.rowindex;

     if (datafield === 'available') {
       if (disabledRows.indexOf(rowBoundIndex) === -1) {
         disabledRows.push(rowBoundIndex);
         localStorage.setItem('disabledRows', JSON.stringify(disabledRows));
         $('#jqxgrid').jqxGrid('refresh');
       }
     }
   });

[TodorParticipant]

Hello Novato,

Please review the following example whether it fits your needs.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[NovatoParticipant]

Hi Todor.

Thanks for the example it worked for me but with the pointer-events property it doesn’t work with internet explorer 10 you know of another property with the same functionality as pointer-events.

I hope you can answer me soon and thank you very much.

[TodorParticipant]

Hello Novato,

Please review the updated example.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[NovatoParticipant]

Hi Todor.

Thanks for the example it worked perfectly.

[Author]

Posts