Fixed Columns affect the behaviour of other jquery component
Fixed Columns affect the behaviour of other jquery component
jstuardo
Posts: 99Questions: 40Answers: 0
Hello,
I have a grid whose first column shows a popup menu. That menu is controlled by a jquery component called "tippy".
I have this column definition for it:
{
data: null,
className: "text-center",
orderable: false,
width: 30,
defaultContent: '<div class="tooltip_commands"><i class="ti-arrow-circle-left"></i></div>'
}
As you see, for each row, a div is created with class "tooltip_commands".
Then, in "draw.dt" event of the table I am attaching the "tippy" component to all elements with class "tooltip_commands".
That works perfectly when that column is not fixed. If it is fixed, the "tippy" component is not attached. I have seen that "tooltip_commands" element is present before trying to attach the component, but it is not actually attached.
One thing that took my attention is that when a fixed column is present, event "draw.dt" is called twice. In both calls, "tooltip_commands" elements do exist.
Any help will be greatly appreciated. Maybe, I need to use another event to accomplish this.
Regards
Jaime
Answers
Hi @jstuardo ,
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hello Colin,
I tried to use JSFiddle to emulate a case, but "draw.dt" event is not called for a table with static data. What do you think about it? the "draw.dt" event is very important for the case.
DataTable documentation does not mention anything about this. It is supposed this event is called always when the data table is rendered.
Regards
Jaime
Colin,
I have finally used a call back. Maybe this is a bug in DataTable. "Draw" event is not called for static table.
Well.. I have used "fnDrawCallback". Please use this JSFiddle: https://jsfiddle.net/desytec/d7c2gnfs/36/
At datatable definition, I have set
You will notice an icon at the first column of the table. if you click on it, a popup menu will be shown.
This is right so far.
Now, please change the leftColumns definition to:
You will see 2 bad efects.
First, the design looks completely ugly for the first column. A scrollbar appears in the cell (this does not happen in my development machine).
The second effect is that if you click the gear icon, no popup menu appears. That is the problem I am having actually in my development machine.
Regards
Jaime
Hi Jamie,
Thanks for the JSFiddle link. FixedColumns add a lot of complexity for cases when external plug-ins are used. There are two important things to consider here:
drawevent as well - so we need to make sure that any additional draw actions are attached after the DataTable init is complete.drawafter the DataTables initialisation will only enable tippy from the next draw. So,the answer is to attach the event listener and then call
draw(). Working example.Allan
Hello, that does not work because in JSFiddle I used a static table, but in my real case, data is retrieved from an Ajax call from my development machine, so I could not emulate in JSFiddle.
So, the fact is that draw.dt is called twice, one for the fixed columns and one for the rest of the table. I need to attach the "tippy" plugin just after the whole table is repopulated using the Ajax call.
I have checked that init.dt is only called once, when the page is loaded. In that case, draw.dt is called twice. For each Ajax call, the draw.dt event is called only once.
I have used a "alert($('.tooltip_commands').length);" alert before actually attaching the plugin and it shows number 2, and in fact, there are 2 rows in the datatable.
I don't really know what else the datatable does that affects that behaviour.
Regards
Jaime
Hi @jstuardo ,
This example here uses Ajax - would you be able to modify that to demonstrate the problem, please.
Cheers,
Colin
Hello @colin,
I have used your example. Please see this.
Currently, fixedcolumns is set to 0 and the tooltip works. When you set it to 1, two bad effects are produced.
The first is that the cell in the first column appears twice, one overlapped over the other.
And the second, the tooltip is not shown.
I am wondering if the first problem may affect the second. Maybe that overlapping is causing this behavior in the tooltip.
Regards
Jaime
You were loading the DataTables styling for FixedColumns rather than the Bootstrap 4 integration file, which is why it was doubling up.
Then a small setTimeout can be used to add the event handler after FixedColumns has drawn: http://live.datatables.net/tehefiqu/17/edit
Its not aligned correctly due to the container of the FixedColumn, but perhaps yo ucan use the tippy options to address that layout issue.
Allan
Thanks for your help, Colin.
In my development machine I was using the bootstrap version of fixedcolumns. That was why that problem did not occur here. My mistake to create that test code.
Now it works except about the problem in alignment. I will play around with the tippy component from now on.
Thanks again
Jaime