DataTable RowDetails Sample , need to expand deatils On clicking on the row

SapnaSNA

hello ,

This sample shows clicking on the green (+) sign on the row the child detail expand.

I have a requirement as the same expansion should happen clicking on anywhere on the row( execpt the checkbox we have for selection)
I am a beginner and used a simple datatable example. Can someone give me an example for this?
can I write the code here?

$('#example tbody').on('click', 'tr', function () {

Or please suggest the right method?

Thanks,
SNA

David@Quantum

Hello @SapnaSNA ,
I have tested it and what you've included in your question works for me.
can you include your whole .js file (or Table and .on('click') function), so I can check you're not missing something from somewhere else.
For inline code highlighting use \code here...`` and for larger scripts do this:

```js
    function f_name(){
        //code here ...
    }
\```

(without the backslash)
Which will look like:

    function f_name(){
        //code here ...
    }

Regards,
David

SapnaSNA

this code worked for me , more detail on this below.....
$('#example tbody').on('click', 'tr,.details-control,.expcol-mob, .ist-mob-col', function () {
//alert('clicked');
//function here
if (row.child.isShown() && row.cli) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// code here
}

Now the new requirement is , expand should happen when i click anywhere on the row,
But collapse will happen only by clicking on the plus sign(+).
Clicking rowheader should not collapse.

David@Quantum

You'll have to use the JQuery .off() method to remove the event handler that you associate with that row and leave only the handler on tr.detail-control. Just don't forget to put it back on when you collapse the row again.

Regards,
David

SapnaSNA

Thanks for replying. It helped.

I have another requirement here , there is a checkbox and a button on the row(1st and last columns ). When clicking on either of this, the row would not expand.

On the Row Click method-----
I have used this code to identify the checkbox and button..
event.target.control.id.indexOf('chkSelect')--
event.target.id.indexOf('btnDownlload')--
---return if the above code comes true.

Is this the right way ?Or any other method you could suggest?

Thanks,
SNA

colin

Hi @SapnaSNA ,

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