如何在shieldGrid中更改shieldProgressBar的背景颜色

Question

此问题的代码位于http://jsfiddle.net/hm0dctgm/6/

我在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

如何更改此列中显示的shieldProgressBar的背景颜色，使其与主题的颜色不同。在我的代码中，我需要根据网格行的内容改变颜色。

谢谢

Answer 1

在页面顶部的某处定义一个自定义CSS类：

$('<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>'
        }
    });

然后将此类设置为您正在初始化ProgressBar的DIV元素：

{{1}}