How to make column adjust work with modified render data and text-nowrap?

Maha80

Hi,

I use dt with responsive extention. Column adjust and text-nowrap works perfectly without modifying render data. However I have to use preDrawCallback or rowCallback to update and modify the display data. The modification is not respected when the columns are adjusted. I guess this is done before the manipulation by the a/m callbacks.

Is there any way to get the column adjust working in this case?

My preDrawCallback function is as follows:

        preDrawCallback: function ( settings ) {

            var api = this.api(),
                colorCol0 = d3.scale.category20().domain($.makeArray(api.rows( { order: "index" } ).ids())),
                maxValueCol7 = d3.max(api.column( 7 ).data()),
                customColorCol8 = d3.scale.linear().range(["green", "yellow", "red"]).domain([0, 0.5, 1]),
                sumCol7 = d3.sum(api.column( 7 ).data());

            api.rows().indexes().each(function(d){
                var dataCol0 = api.cell(d,0).data(),
                    dataCol7 = api.cell(d,7).data(),
                    nodeCol0 = api.cell(d,0).node(),
                    nodeCol8 = api.cell(d,8).node();
                $(nodeCol0).html('').append($('<div/>').css( { 'width': '1.5em', 'height': '1.5em', 'float': 'left', 'display': 'inline-block', 'margin-right': '0.75em', 'background-color': colorCol0(api.row(d).id()) } ));
                $(nodeCol0).append(dataCol0);
                $(nodeCol8).html('').append(d3.format(",%")(dataCol7/sumCol7));
                $(nodeCol8).append($('<div/>').css( { 'width': '2.5em', 'height': '1.5em', 'float': 'right', 'display': 'inline-block', 'margin-left': '0.25em', 'background-color': customColorCol8(dataCol7/maxValueCol7) } ));

            });

            api
                .columns.adjust()
                .responsive.recalc();

        },

You can view the live code running on www.derselbstversorger.com/wip (user: ..... / pass: .....).

Thank you very much for your help.

Martin

Maha80

Okay. It seems that the floating element, which I add to the cells is responsible for this.

allan

Are you able to use columns.render rather than the draw callbacks to do this? That would allow DataTables to respect the set data. As you say, at the moment the adjustments you make are made after DataTables would need that data, and also without DataTables' knowledge.

Allan

Maha80

Hi Allan,

I need the data of all columns for the modification, therefore I can not use the columns render callback as it only gives access to the current row and prior rows. However I have solved the Problem. It was more or less a CSS issue. Using Display: inline-block and vertical-align: top instead of float: left for the coloured divs (rectangles) solved the problem.

Thank you for your help.

Martin