jQWidgets Forums

jQuery UI Widgets Forums Grid Change properties of columntype: 'button' dynamically

This topic contains 2 replies, has 2 voices, and was last updated by  andy8 10 years, 2 months ago.

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

  • andy8
    Participant

    Hello everyone,

    I need to enable/disable grid buttons (columntype: ‘button’) depending on the value of another cell of the same row dynamically. In other words, when I change some cell value, the column button should become enabled or disabled depending on the edited cell value.

    How can I achieve this?

    Thanks


    Dimitar
    Participant

    Hello andy8,

    Column buttons cannot be visually disabled but you can disable their functionality by checking for your condition in the buttonclick callback function, e.g.:

    $("#jqxgrid").jqxGrid(
    {
        width: 850,
        source: dataAdapter,
        pageable: true,
        autoheight: true,
        columns: [
            { text: 'First Name', datafield: 'firstname', width: 200 },
            { text: 'Last Name', datafield: 'lastname', width: 200 },
            { text: 'Product', datafield: 'productname', width: 190 },
            { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
            { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
            { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                return "Edit";
            }, buttonclick: function (row) {
                var currentQuantity = $('#jqxgrid').jqxGrid('getcellvalue', row, "quantity");
                if (currentQuantity < 10) {
                    // open the popup window when the user clicks a button.
                    editrow = row;
                    var offset = $("#jqxgrid").offset();
                    $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
    
                    // get the clicked row's data and initialize the input fields.
                    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                    $("#firstName").val(dataRecord.firstname);
                    $("#lastName").val(dataRecord.lastname);
                    $("#product").val(dataRecord.productname);
                    $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                    $("#price").jqxNumberInput({ decimal: dataRecord.price });
    
                    // show the popup window.
                    $("#popupWindow").jqxWindow('open');
                }
            }
            }
        ]
    });

    Best Regards,
    Dimitar

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


    andy8
    Participant

    Thank you, Dimitar!

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

You must be logged in to reply to this topic.