How do I change the background color of a shieldProgressBar inside a shieldGrid

Question

The code for this question is at http://jsfiddle.net/hm0dctgm/6/

I have the following column definition in a shieldGrid:

            { field: "coverage", title: "Coverage", width:'80px',
              columnTemplate: function (cell, item) {
                 var val = item.coverage;
                 $('<div/>').appendTo(cell)
                 .shieldProgressBar({
                            min: 0,
                            max: 100,
                            value: 25 ,
                            text: {
                                enabled: true,
                                template: '<span style="font-size:22px;color:#1E98E4;">{0:n0}%</span> '
                            } ,                    
                  });
               } // end columnTemplate
             } // end field

How does one change the background color of the shieldProgressBar displayed in this column so that it's different than the color of the theme. In my code I will need to vary the color based on the contents of the grid row.

Thank you

Answer 1

Define a custom CSS class somewhere at the top of your page:

<style>
  .my-progress-style {
    /* background color of whole progressbar */
    background-color: red;
  }
  .my-progress-style .sui-progressbar-value {
    /* background color of value part */
    background-color: green;
  }
</style>

and then set this class to the DIV element you are initializing the ProgressBar from:

$('<div class="my-progress-style"/>').appendTo(cell)
    .shieldProgressBar({
        min: 0,
        max: 100,
        value: 25 ,
        text: {
            enabled: true,
            template: '<span style="font-size:22px;color:#1E98E4;">{0:n0}%</span>'
        }
    });