can i apply Dom jquery event on child row?

jatin gajera

can i apply Dom jquery event on child row?

colin

Hi @jatin gajera ,

Yep, you can add an event on the child rows as you can with any other element in the DOM. You'll need to remove the events when the child row is closed, but that should be trivial,

Cheers,

Colin

jatin gajera

Colin can you give me example on jsfiddle..

Because i try many time to apply jquery event but not able to apply propar event to child row..so..i request to you for give example..

colin

Hi @jatin gajera

Could you show me what you have in a fiddle, and we can take it from there, please.

Cheers,

Colin

jatin gajera

i have only table ,table head then i add data table.row.add() method through for loop, then i want to add some other data to table child row i am useing child row's example code to append child row to main row then i am applying select also but select only work main row only it is not move on child row. i am try to move select extension parent row to child row directly. is it possibal?

tangerine

Colin needs to see your actual code, preferably in a working fiddle.

jatin gajera

can u tell me how to add datatable.min.js and css file in fiddle..??
i am simple copy all js and css code from datatable CDN file and paste to js and css part in js fiddle but it not works...

colin

Hi @jatin gajera ,

I was knocking out one as a starting point, but then it seemed easier to add the DOM event too. Look at this example here and how the childRow is being manipulated,

Cheers,

Colin

jatin gajera

http://live.datatables.net/mogisovo/2/edit

Colin see above edited link you can navigate row up and down through key board arrow key then click one row then move through arrow it's only move parent row not child row.
my question is when i open child row that time select curser move to child row also is this possibal??

colin

If I understand correctly, you want to use KeyTable to also go over child rows? If so, then no, KeyTable just knows about the table rows, not whatever a child row is. As you can see in that example, child rows are created with that format() function - than can generate anything.

Cheers,

Colin

jatin gajera

yes u understand my friend..

so it is not possible ?

kthorngren

If you want to use a Datatables extension with the child table then you need to turn it into a Datatable. This example uses the select extension with a child table that is a Datatable.
http://live.datatables.net/lupamuko/1/edit

Kevin

jatin gajera

no @kthorngren it's little difference between your example and mine.

see this link http://live.datatables.net/mogisovo/2/edit what i need.

In your example child row append data table and in my example child row append table with formate() function..and i need to apply select in parent and child both row.
in your example you only apply select in child row..

kthorngren

I see. It sounds like you want to key down from the parent to child rows. I don't think there is an option for this.

Kevin

jatin gajera

Yes kevin i need this. is it possible ?

colin

Nope, as I said in my reply above...

jatin gajera

ohk @colin and kevin for your support..

kebekhsenuef

I appreciate very much your solution, @kthorngren but what if i would need to create another child table inside the first one? In other words, i would have the main table, the child table and a third child table wich rows are shown when rows at the first child table are clicked.

Thanks in advance.

kthorngren

@kebekhsenuef You would repeat the same steps as for the first child table. You need to watch your table IDs to make sure they are unique and use the ID to create the click event, ie, $('#example tbody').on('click', 'td.details-control', function () {. example will be the ID of the first child table.

This thread may have information to help you. If you need help please start by updating one of the examples with a second child and let us know if there are any questions.

Kevin

kebekhsenuef

Thanks for give me an answer so fast, @kthorngren
I'm trying to do what you told me, however I have some problems. In one hand, I see that table's id "example" exists in the dom when the page is loaded while table's id "table3" not (see link below) but only when first child table is created. In the other hand, function format only applies to first table child named "child_details" and I don't know how to declare another format function (whitin the same scope) for the second child table.

I'm doing my tries with this thread.
I would appreciate any help,

Thanks.

kthorngren

@kebekhsenuef I built a new example:
http://live.datatables.net/sipoxize/1/edit

It relies on the data from the original (parent) row to be passed down to both child rows. It also uses a column containing unique data to generate unique table IDs.

Kevin

kebekhsenuef

I think I would never find the solution. Thanks a lot, @kthorngren

imarketing21

Thank you @kthorngren this worked for me!

The only issue I have now is that if the child datatable has 2 or more rows, the positioning of the new table for grandchild is fixed and only allowed to show once.

Let me know if this is something you can look at! Thanks!

kthorngren

I'm not sure I understand exactly what you are after. If its a width issue maybe you need to add style="width:100%" to the child tables. Or some other styling attribute to meet your needs. Maybe you can provide a test case showing what you have and specifics of what you want.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin