jQuery UI Widgets Forums ASP .NET MVC How to disable a button with checkbox column in jqxgrid

This topic contains 4 replies, has 2 voices, and was last updated by  Novato 3 months, 3 weeks ago.

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

  • Novato
    Participant

    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');
           }
         }
       });
    
    

    Todor
    Participant

    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


    Novato
    Participant

    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.


    Todor
    Participant

    Hello Novato,

    Please review the updated example.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com


    Novato
    Participant

    Hi Todor.

    Thanks for the example it worked perfectly.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.