Statusbar buttons not losing focus when disabled

[ohioguy67Member]

I have a statusbar on my grid, similiar to what is in the statusbar.htm demo. I’m programmatically enabling and disabling a button based on whether a row has been selected (using the ‘rowselect’ and ‘rowunselect’ events). I also disable the button after it’s been pushed. The problem is that once I have pushed the button, when the button is later enabled after a row is selected, it’s style is like it is still being hovered over. If I move the mouse over the button and then off, it displays correctly. The button is enabled but it always looks like it’s being hovered. What am I doing wrong?

[Peter StoevKeymaster]

Hi,

Thanks for writing.

Please, take a look at this topic: http://www.jqwidgets.com/community/topic/welcome-to-jqwidgets-forum and follow the instructions about reporting an issue. We will be glad to help you after you post a sample and instructions about reproducing the described behavior.

Best Regards,
Peter Stoev

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

[ohioguy67Member]

I don’t know what was not clear about how to reproduce the problem, but here is the relevant portions of the code:

var deleteButton = $(
‘

‘ +
” +
‘‘ +
‘Delete’ +
‘‘ +
‘

‘);

$(‘#Table’).jqxGrid(
{
…
selectionmode: ‘multiplerows’,

renderstatusbar: function (statusbar) {
// Add buttons to the status bar
var container = $(‘

‘);
container.append(deleteButton);
statusbar.append(container);
deleteButton.jqxButton({
theme: ‘table-theme’,
disabled: true
});

…

// Event handler for status bar Delete button
deleteButton.click(function (event) {
…

// Refresh the table
$(‘#Table’).jqxGrid(‘refresh’);

// Clear the selected rows
$(‘#Table’).jqxGrid(‘clearselection’);

});
});

// Process a row being selected
$(‘#Table’).on(‘rowselect’, function (event) {
deleteButton.jqxButton({ disabled: false });
});

// Process a row being unselected
$(‘#Table’).on(‘rowunselect’, function (event) {
deleteButton.jqxButton({ disabled: true });
});

The custom theme I created has button background as white, hover background as light gray and select background as dark gray.

Here is the sequence of events that causes the error:

1. Initially button is disabled, background is disabled color (light gray)
2. Select a row – button is enabled, background is white
3. Hover over button – background is light gray
4. Select button – background is dark gray until button release, row is unselected, button is disabled, background is disabled color
5. Select a row – button is enabled (text is not disabled color), background is disabled color – INCORRECT
6. Hover over button – no change in background
7. Move away from button – background changes to white (which is now the correct color)

So the problem is that after the button is selected which unselects all of the rows (and subsequently disables the button), the button background color is wrong when the button is re-enabled. It behaves like the button is still being hovered on because as soon as the hover is moved off the button, it has the correct background.

I am using the most recent version of the widgets and IE8. I hope this is more clear now and you can tell me what’s wrong.

[ohioguy67Member]

var deleteButton = $(
        '<div class="TableStatusBarButton">' +
            '<img class="TableStatusBarButtonImage" src="styles/images/delete.png"/>' +
            '<span class="TableStatusBarButtonText">' +
                'Delete' +
            '</span>' +
        '</div>');
$(‘#Table’).jqxGrid(
    {
    …
    selectionmode: ‘multiplerows’,
    renderstatusbar: function (statusbar) {
    // Add buttons to the status bar
    var container = $('<div class="TableStatusBar"></div>');
    container.append(deleteButton);
    statusbar.append(container);
    deleteButton.jqxButton({
        theme: ‘table-theme’,
        disabled: true
    });
    …
    // Event handler for status bar Delete button
    deleteButton.click(function (event) {
    …
        // Refresh the table
        $(‘#Table’).jqxGrid(‘refresh’);
        // Clear the selected rows
        $(‘#Table’).jqxGrid(‘clearselection’); 
    });
});
// Process a row being selected
$(‘#Table’).on(‘rowselect’, function (event) {
    deleteButton.jqxButton({ disabled: false });
});
// Process a row being unselected
$(‘#Table’).on(‘rowunselect’, function (event) {
    deleteButton.jqxButton({ disabled: true });
});

Here’s the code portion again since I didn’t use the code toolbar option when posting this initially.

[Author]

Posts