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

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

Maha80Maha80 Posts: 30Questions: 10Answers: 1
edited September 2015 in DataTables

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

This question has accepted answers - jump to:

Answers

  • Maha80Maha80 Posts: 30Questions: 10Answers: 1

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

  • allanallan Posts: 54,921Questions: 1Answers: 8,611 Site admin
    Answer ✓

    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

  • Maha80Maha80 Posts: 30Questions: 10Answers: 1
    Answer ✓

    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

This discussion has been closed.