Current filter:
                                You should refresh the page.
                                  • Hi guys,

                                    I have a grid with a dxProgressBar in a cellTemplate which is working but I don't seem to be able to control the height of it without adversely affecting the alignment. My code is:
                                    [JavaScript]
                                    columns: [ { dataField: 'ID', visible: false, allowFiltering: false }, ... { dataField: 'PercentFill', caption: '%', allowFiltering: false, cellTemplate: function(cellElement, cellInfo) { var div = document.createElement('div'); cellElement.addClass('dx-cell'); cellElement.get(0).appendChild(div); $(div).dxProgressBar({ value: cellInfo.value, min: 0, max: 100, width: '40px', showStatus: false, statusFormat: function(ratio, value) { return Math.round(ratio * 100).toString() + '%' } }); } }, ... ],
                                    The problem with this is that it extends the height of each row to double or triple what it was. If I explicitly set the height (i.e. add height: '5px') then the row height returns to normal but the progress bar goes to the very bottom of the row instead of being centrally aligned.

                                    Two pictures to illustrate attached.

                                    Any ideas?

                                1 Solution

                                Creation Date Importance Sort by
                                Hello,

                                The issue occurs because of the following style:
                                [CSS]
                                .dx-progressbar:before { display: inline-block; }
                                Modify your code as follows to override this style:
                                [CSS]
                                .position-fix.dx-progressbar:before { display: block !important; }


                                [JavaScript]
                                cellTemplate: function (cellElement, cellInfo) { cellElement.addClass('dx-cell'); $("<div>").dxProgressBar({ value: cellInfo.value, min: 0, max: 100, width: '40px', height: '8px', showStatus: false, statusFormat: function (ratio, value) { return Math.round(ratio * 100).toString() + '%' } }) .addClass("position-fix") .appendTo(cellElement); }
                                • TT Developers 03.13.2015

                                  Brilliant, thank you very much