Button enable and disable depends on condition in dataTable

[Analyticx Solutions]

whenever select radio button in dataTable buttons is enabled or disabled

[mert.sincan]

This is not a layout or theme issue. But, I overrode radio events in datatable for your issue. Please try the following js code;

Code: Select all

<script type="text/javascript">
//<![CDATA[
PrimeFaces.widget.DataTable.prototype.bindRadioEvents = function() {
    var $this = this,
    radioInputSelector = '> tr.ui-widget-content:not(.ui-datatable-empty-message) > td.ui-selection-column:not(.ui-state-disabled) :radio',
    disabledRadioInputSelector = '> tr.ui-widget-content:not(.ui-datatable-empty-message) > td.ui-selection-column.ui-state-disabled :radio';

    this.tbody.find(disabledRadioInputSelector).prop('disabled', true);
    this.thead.find('th.ui-selection-column.ui-state-disabled').removeClass('ui-state-disabled');
    
    if(this.cfg.nativeElements) {            
        this.tbody.off('click.dataTable', radioInputSelector).on('click.dataTable', radioInputSelector, null, function(e) {
            var radioButton = $(this);

            if(!radioButton.prop('checked'))
                $this.selectRowWithRadio(radioButton);
        });
    }
    else {
        var radioSelector = '> tr.ui-widget-content:not(.ui-datatable-empty-message) > td.ui-selection-column:not(.ui-state-disabled) .ui-radiobutton .ui-radiobutton-box';
        this.tbody.off('click.dataTable mouseover.dataTable mouseout.dataTable', radioSelector)
            .on('mouseover.dataTable', radioSelector, null, function() {
                var radio = $(this);
                if(!radio.hasClass('ui-state-disabled')&&!radio.hasClass('ui-state-active')) {
                    radio.addClass('ui-state-hover');
                }
            })
            .on('mouseout.dataTable', radioSelector, null, function() {
                var radio = $(this);
                radio.removeClass('ui-state-hover');
            })
            .on('click.dataTable', radioSelector, null, function() {
                var radio = $(this),
                checked = radio.hasClass('ui-state-active'),
                disabled = radio.hasClass('ui-state-disabled');

                if(!disabled && !checked) {
                    $this.selectRowWithRadio(radio);
                }
            });
    }

    //keyboard support
    this.tbody.off('focus.dataTable blur.dataTable change.dataTable', radioInputSelector)
        .on('focus.dataTable', radioInputSelector, null, function() {
            var input = $(this),
            box = input.parent().next();

            if(input.prop('checked')) {
                box.removeClass('ui-state-active');
            }

            box.addClass('ui-state-focus');
        })
        .on('blur.dataTable', radioInputSelector, null, function() {
            var input = $(this),
            box = input.parent().next();

            if(input.prop('checked')) {
                box.addClass('ui-state-active');
            }

            box.removeClass('ui-state-focus');
        })
        .on('change.dataTable', radioInputSelector, null, function() {
            var currentInput = $this.tbody.find(radioInputSelector).filter(':checked'),
            currentRadio = currentInput.parent().next();

            $this.selectRowWithRadio(currentRadio);
        });

};
//]]>
</script>

Exp;

Code: Select all

<p:dataTable rowIndexVar="index" ... >

    // please add "ui-state-disabled" class according to your condition. 
    <p:column styleClass="#{index%2==0? 'ui-state-disabled': ''}" selectionMode="single" style="width:16px;text-align:center"/>
    ...
</p:dataTable>

In next time, please use core forum for your core issue; http://forum.primefaces.org/viewforum.php?f=3