CODEWITHSUNDEEP
javascriptcssangularjsangular-ui-grid
user3178734
user3178734

Reputation: 73

Change style and/or conditional style of the selection button

I would like to ask you, it's any way to add custom style to the selection button (cell?) I need set for example red color for one cell, yellow color for another one cell.

It's possible to remove check picture from this selection button and replace it to standard checkbox input?

I mean this (original selection buttons):

enter image description here

and I would like to change like this (expected selection buttons):

enter image description here

Upvotes: 1

Views: 528

Answers (1)

isherwood
isherwood

Reputation: 61063

<style>
    .ui-grid-row > [ui-grid-row] .ui-grid-disable-selection {
        background-color: yellow;
    }
    .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-disable-selection {
        background-color: red;
    }
</style>

To change the icon you'll need to add an icon font. The default UI Grid font doesn't have the checkbox. Then you can do something like so:

.ui-grid-icon-ok:before {
    content: '\f096';
    font-family: FontAwesome;
}

Note: I used my browser's document inspector to identify these selectors (F12 in Windows). You should become familiar with that tool as well.

Upvotes: 1

Related Questions