can i apply Dom jquery event on child row?
can i apply Dom jquery event on child row?
jatin gajera
Posts: 60Questions: 23Answers: 0
can i apply Dom jquery event on child row?
This question has accepted answers - jump to:
This discussion has been closed.
Answers
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
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..
Hi @jatin gajera
Could you show me what you have in a fiddle, and we can take it from there, please.
Cheers,
Colin
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?
Colin needs to see your actual code, preferably in a working fiddle.
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...
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
childRowis being manipulated,Cheers,
Colin
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??
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
yes u understand my friend..
so it is not possible ?
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
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..
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
Yes kevin i need this. is it possible ?
Nope, as I said in my reply above...
ohk @colin and kevin for your support..
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.
@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 () {.examplewill 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
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.
@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
I think I would never find the solution. Thanks a lot, @kthorngren
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!
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