Multiple checkbox columns

Multiple checkbox columns

PabloIEPabloIE Posts: 15Questions: 1Answers: 1
edited May 2017 in Free community support

I'm trying to adapt your running example ( https://editor.datatables.net/examples/api/checkbox.html ) adding more checkbox columns.
I cannot make it work properly and i think the issue comes from the callback function that it's designed for an only checkbox columns at the last column of the table. It checks the field at the database but it doesn't keeps it checked on the table. Unchecking doesn't works when checking again. Buble editing does work.
Code is taken from the running example so i don't think it's useful to post it here again.
Could you give me some tips to follow on this?

Thank you in advance.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Have you updated the code to use different classes and event handlers for the other columns?

    If you could show me your code I might be able to spot what is wrong.

    Allan

  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1
    edited May 2017

    Hi Allan , thanks for answering.

    No i didn't do that ( will try them of course ) , tried many thinks in order to simplify code but as you'r telling me i think it would be more tricky than expected.

    I put here the final .html generated ( i do it using php ) . You'll see lot of commented lines due to testing but tried even more things...forgive me if you see some nonsense things :disappointed:


    <head> <meta charset="utf-8"> <link href="http://www.datatables.net/favicon.ico" rel="shortcut icon" type="image/ico" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"> <title></title> <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/examples/resources/syntax/shCore.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/examples/resources/demo.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/gestion/css/tabla.css" rel="stylesheet" type="text/css" /> <style class="init" type="text/css"> </style> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.min.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/syntax/shCore.js"> <!-- </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/editor-demo.js"> --> </script><script type="text/javascript" language="javascript" class="init"> var editor; // use a global for the submit and return data rendering in the examples var seleccionado = ""; var col = 0; $(document).ready(function(){ editor = new $.fn.dataTable.Editor({ ajax: "/../../Editor/gestion/php/Listados.php", type: 'POST', table: "#Girasol_Datos_16", fields: [ { label: "Cliente:", name: "Cliente" },{ label: "Variedad:", name: "Variedad" },{ label: "Clearfield:", name: "Clearfield", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Regadio:", name: "Regadio", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Superficie:", name: "Superficie" },{ label: "Bolsas:", name: "Bolsas" },{ label: "Resiembra:", name: "Resiembra", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Bols_Res:", name: "Bols_Res" },{ label: "Promocion:", name: "Promocion", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "BolsPromc:", name: "BolsPromc" },{ label: "Sentimiento:", name: "Sentimiento" },{ label: "Kilos:", name: "Kilos" },{ label: "Comentarios:", name: "Comentarios" },{ label: "Contacto:", name: "Contacto"} ] }); $('#Girasol_Datos_16').DataTable( { dom: "Bfrtip", ajax: { url: "/../../Editor/gestion/php/Listados.php", type: 'POST' }, columns: [ { data : "Cliente" }, { data : "Variedad" }, { data : "Clearfield" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="editor-active" id="check4">'; } return data; }, className: "dt-body-center"}, { data : "Regadio" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="editor-active" id="check6">'; } return data; }, className: "dt-body-center"}, { data : "Superficie" }, { data : "Bolsas" }, { data : "Resiembra" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="editor-active" id="check12">'; } return data; }, className: "dt-body-center"}, { data : "Bols_Res" }, { data : "Promocion" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="editor-active" id="check16">'; } return data; }, className: "dt-body-center"}, { data : "BolsPromc" }, { data : "Sentimiento" }, { data : "Kilos" }, { data : "Comentarios" }, { data : "Contacto"}], select: { style: 'os', selector: 'td:not(:has(:checkbox))' // no row selection on last column }, buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor } ], rowCallback: function ( row, data ) { // // Set the checked state of the checkbox in the table // $.each( data, function( key, value ) // { // if (value == 1){ // $('input.editor-active:checked').prop( 'checked', data[seleccionado] == 1 ); // } // else{ // if (value == 0){ // $('input.editor-active:checked').prop( 'checked', data[seleccionado] == 1 ); // } // else{} // } // }); // var aux = "data." + seleccionado; // for ( var i=0; i < col;i++){ //var aux = $('input.editor-active',row)[i]; // $('input.editor-active',row).each(function(){ // if (data.Promocion == 1 && i == col-1){ // ($('input.editor-active',row)[i]).checked = true; // } // } // if(data.Promocion == 1 && i == col-1){ // $('input.editor-active',row).prop('checked',true); // } // else{ // $('input.editor-active',row).prop('checked',false); // } // }); // if (aux.checked) // { // $(aux).prop('checked',true); // aux. // } // else{ // $(aux).prop('checked',false); //} //} // if (col > 0){ // if (data.Promocion == 1){ // ($('input.editor-active')[col-1]).checked = true; // } // else{ // ($('input.editor-active')[col-1]).checked = false; // } // } // else{ $("input#check" + col+ ".editor-active").prop('checked', data.Promocion == 1); //$('input.editor-active', row).prop( 'checked', data.Promocion == 1 ); //} } }); $('#Girasol_Datos_16').on( 'change', 'input.editor-active', function () { col =$(this).parent().index(); var title = $(this).closest("table").find("th").eq(col).text(); title.replace(/\"/g, ""); col = $('input').index(this); seleccionado = title; // Guardamos el nombre de la columna del checkbox seleccionado para usarla en el callback editor .edit( $(this).closest('tr'), false ) .set( title , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); }); </script> <script> function myFunction(){ window.location.href = "/../../node/1"; } </script> <body> <div class="container"> <div id="Contenedor"><button id="volver" onclick="myFunction()">Mostrar Todas</button></div> <div id="tablasProduccion"> <table class="table display table-striped table-bordered" id="Girasol_Datos_16"> <thead> <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th> </tr> </thead> <tfoot> <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th> </tr> </tfoot> </table> </div> </div> </body>
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    Yes, that looks like it is the issue.

    If we take this example and looking at the code displayed just below the table, to make another column with checkboxes you would have:

    • Lines 44-52 duplicated for the other checkbox column, but have a unique class for the checkboxes in each column. I would suggest using class names which are representative of the data.
    • Line 65 - duplicate with the updated class and data point
    • Lines 69-74 - duplicate and update for the correct class and field name.

    Allan

  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1
    edited May 2017

    Thank you so much Allan ,
    Sometimes we don't see the answer although we have it in front. I will test it when i got a bit of free time and give you feedback on results.

  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1
    edited May 2017

    Hi ,

    I finally made it work , following Allan instructions i could notice that it was wrong and diging on a conceptual mistake .As the html file is dynamically generated by a php script i was focusing too deep pretending i was treating the thread as an array problem when i was not really doing it.

    I'll try and clean it of errors but i can now share my first approach on this , hope this can help others.

    Again my thanks to you Allan for your fast and efficient help ;)




    <head> <meta charset="utf-8"> <link href="http://www.datatables.net/favicon.ico" rel="shortcut icon" type="image/ico" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"> <title></title> <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/examples/resources/syntax/shCore.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/examples/resources/demo.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/gestion/css/tabla.css" rel="stylesheet" type="text/css" /> <style class="init" type="text/css"> </style> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.min.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/syntax/shCore.js"> <!-- </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/editor-demo.js"> --> </script><script type="text/javascript" language="javascript" class="init"> // use a global for the submit and return data rendering in the examples var editor; var title = ""; var col = 0; var listaCampos=[]; $(document).ready(function(){ editor = new $.fn.dataTable.Editor({ ajax: "/../../Editor/gestion/php/Listados.php", type: 'POST', table: "#Girasol_Datos_16", fields: [ { label: "Cliente:", name: "Cliente" },{ label: "Variedad:", name: "Variedad" },{ label: "Clearfield:", name: "Clearfield", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Regadio:", name: "Regadio", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Superficie:", name: "Superficie" },{ label: "Bolsas:", name: "Bolsas" },{ label: "Resiembra:", name: "Resiembra", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Bols_Res:", name: "Bols_Res" },{ label: "Promocion:", name: "Promocion", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "BolsPromc:", name: "BolsPromc" },{ label: "Sentimiento:", name: "Sentimiento" },{ label: "Kilos:", name: "Kilos" },{ label: "Comentarios:", name: "Comentarios" },{ label: "Contacto:", name: "Contacto"} ] }); $('#Girasol_Datos_16').DataTable( { dom: "Bfrtip", ajax: { url: "/../../Editor/gestion/php/Listados.php", type: 'POST' }, columns: [ { data : "Cliente" }, { data : "Variedad" }, { data : "Clearfield" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="Clearfield">'; } return data; }, className: "dt-body-center"}, { data : "Regadio" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="Regadio">'; } return data; }, className: "dt-body-center"}, { data : "Superficie" }, { data : "Bolsas" }, { data : "Resiembra" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="Resiembra">'; } return data; }, className: "dt-body-center"}, { data : "Bols_Res" }, { data : "Promocion" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="Promocion">'; } return data; }, className: "dt-body-center"}, { data : "BolsPromc" }, { data : "Sentimiento" }, { data : "Kilos" }, { data : "Comentarios" }, { data : "Contacto"}], select: { style: 'os', selector: 'td:not(:has(:checkbox))' // no row selection on last column }, buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor } ], rowCallback: function ( row, data ) { // Set the checked state of the checkbox in the table listaCampos.push("Clearfield"); listaCampos.push("Regadio"); listaCampos.push("Resiembra"); listaCampos.push("Promocion"); for (var i=0 ; i < listaCampos.length ; i++){ var aux = "input." + listaCampos[i]; $(aux, row).prop( 'checked', data[listaCampos[i]] == 1 ); } } }); $('#Girasol_Datos_16').on( 'change', 'input.Clearfield', function () { editor .edit( $(this).closest('tr'), false ) .set( 'Clearfield' , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); $('#Girasol_Datos_16').on( 'change', 'input.Regadio', function () { editor .edit( $(this).closest('tr'), false ) .set( 'Regadio' , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); $('#Girasol_Datos_16').on( 'change', 'input.Resiembra', function () { editor .edit( $(this).closest('tr'), false ) .set( 'Resiembra' , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); $('#Girasol_Datos_16').on( 'change', 'input.Promocion', function () { editor .edit( $(this).closest('tr'), false ) .set( 'Promocion' , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); }); </script> <script> function myFunction(){ window.location.href = "/../../node/1"; } </script> <body> <div class="container"> <div id="Contenedor"><button id="volver" onclick="myFunction()">Mostrar Todas</button></div> <div id="tablasProduccion"> <table class="table display table-striped table-bordered" id="Girasol_Datos_16"> <thead> <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th> </tr> </thead> <tfoot> <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th> </tr> </tfoot> </table> </div> </div> </body>
  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1
    edited May 2017

    Revised code and fixed some issues . It works properly now.
    But i spotted a strange behaviour , if i select a row and then move to next results page it remains as selected unless i select another one on the next results page. it's there something wrong in my code?



    <head> <meta charset="utf-8"> <link href="http://www.datatables.net/favicon.ico" rel="shortcut icon" type="image/ico" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"> <title></title> <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/examples/resources/syntax/shCore.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/examples/resources/demo.css" rel="stylesheet" type="text/css" /> <link href="/../../Editor/gestion/css/tabla.css" rel="stylesheet" type="text/css" /> <style class="init" type="text/css"> </style> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"> </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.min.js"> </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/syntax/shCore.js"> <!-- </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/editor-demo.js"> --> </script><script type="text/javascript" language="javascript" class="init"> // use a global for the submit and return data rendering in the examples var editor; $(document).ready(function(){ editor = new $.fn.dataTable.Editor({ ajax: "/../../Editor/gestion/php/Listados.php", type: 'POST', table: "#Girasol_Datos_16", fields: [ { label: "Cliente:", name: "Cliente" },{ label: "Variedad:", name: "Variedad" },{ label: "Clearfield:", name: "Clearfield", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Regadio:", name: "Regadio", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Superficie:", name: "Superficie" },{ label: "Bolsas:", name: "Bolsas" },{ label: "Resiembra:", name: "Resiembra", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "Bols_Res:", name: "Bols_Res" },{ label: "Promocion:", name: "Promocion", type: "checkbox", separator: "|", options: [{ label: '', value: 1 }] },{ label: "BolsPromc:", name: "BolsPromc" },{ label: "Sentimiento:", name: "Sentimiento" },{ label: "Kilos:", name: "Kilos" },{ label: "Comentarios:", name: "Comentarios" },{ label: "Contacto:", name: "Contacto"} ] }); $('#Girasol_Datos_16').DataTable( { dom: "Bfrtip", ajax: { url: "/../../Editor/gestion/php/Listados.php", type: 'POST' }, columns: [ { data : "Cliente" }, { data : "Variedad" }, { data : "Clearfield" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="Clearfield">'; } return data; }, className: "dt-body-center"}, { data : "Regadio" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="Regadio">'; } return data; }, className: "dt-body-center"}, { data : "Superficie" }, { data : "Bolsas" }, { data : "Resiembra" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="Resiembra">'; } return data; }, className: "dt-body-center"}, { data : "Bols_Res" }, { data : "Promocion" ,render: function ( data, type, row ) { if ( type === 'display' ) { return '<input type="checkbox" class="Promocion">'; } return data; }, className: "dt-body-center"}, { data : "BolsPromc" }, { data : "Sentimiento" }, { data : "Kilos" }, { data : "Comentarios" }, { data : "Contacto"}], select: { style: 'os', selector: 'td:not(:has(:checkbox))' }, buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor } ], rowCallback: function ( row, data ) { // Set the checked state of the checkbox in the table var listaCampos=[]; listaCampos.push("Clearfield"); listaCampos.push("Regadio"); listaCampos.push("Resiembra"); listaCampos.push("Promocion"); for (var i=0 ; i <= listaCampos.length ; i++){ var aux = "input." + listaCampos[i]; $(aux, row).prop( 'checked', data[listaCampos[i]] == 1 ); } } }); $('#Girasol_Datos_16').on( 'change', 'input.Clearfield', function () { editor .edit( $(this).closest('tr'), false ) .set( 'Clearfield' , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); $('#Girasol_Datos_16').on( 'change', 'input.Regadio', function () { editor .edit( $(this).closest('tr'), false ) .set( 'Regadio' , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); $('#Girasol_Datos_16').on( 'change', 'input.Resiembra', function () { editor .edit( $(this).closest('tr'), false ) .set( 'Resiembra' , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); $('#Girasol_Datos_16').on( 'change', 'input.Promocion', function () { editor .edit( $(this).closest('tr'), false ) .set( 'Promocion' , $(this).prop( 'checked' ) ? 1 : 0 ) .submit(); } ); }); </script> <script> function myFunction(){ window.location.href = "/../../node/1"; } </script> <body> <div class="container"> <div id="Contenedor"><button id="volver" onclick="myFunction()">Mostrar Todas</button></div> <div id="tablasProduccion"> <table class="table display table-striped table-bordered" id="Girasol_Datos_16"> <thead> <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th> </tr> </thead> <tfoot> <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th> </tr> </tfoot> </table> </div> </div> </body>
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Thanks for posting back - great to hear you've got it working now.

    Allan

  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1

    It fails when using Responsive Extension.
    I've debugged it and i think it has to do with DTE DTE_Inline divs dynamically created when you click any checkbox placed on an expanded hidden columns.
    I'll be digging on it .

    Any ideas?

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Its probably related to the selectors being used. Could you give me a link to a test page showing the issue so I can take a look?

    Allan

  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1

    I found a possible fix :
    Using "Renderer" function .

    Use of js renderer: $.fn.dataTable.Responsive.renderer.tableAll() shows all the columns as a nested table and works as expected.

    Using the function that only shows the hidden columns on a nested table fails .

    responsive: {
            details: {
                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        return col.hidden ?
                            '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                            '</tr>' :
                            '';
                    } ).join('');
     
                    return data ?
                        $('<table/>').append( data ) :
                        false;
                }
            }
        }
    

    I prefer using this second option . I'll keep digging into it and I'll give you feedback.

  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1

    I'm not able to make it work...
    I think it's an event listeners bubbling issue, could you guide me on this?

  • HPBHPB Posts: 73Questions: 2Answers: 18

    Just a guess, but I think $(this).closest('tr') will select the child row when using responsive, not the parent row that editor expects.

    Ugly workaround I used myself for this situation is something like this

                var row;
                if ($(this).parent().attr('role') == "row") {
                    row = $(this).parent();
                }
                else if ($(this).closest('tr').attr('role') == "row") {
                    row = $(this).closest('tr');
                }
                else if ($(this).closest('tr.child').prevAll('tr.parent').first().attr('role') == "row") {
                    row = $(this).closest('tr.child').prevAll('tr.parent').first();
                }
                editor
                .edit( row, false )
                .set( 'Promocion' , $(this).prop( 'checked' ) ? 1 : 0 )
                .submit();
    
  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1

    Thanks so much HPB I'll test it when I'm on the laptop...and of course I'l give you feedback news.

  • PabloIEPabloIE Posts: 15Questions: 1Answers: 1

    HPB your approach doesn't work either. Thanks anyway ;)

This discussion has been closed.