How to Change layout of dtr-control

How to Change layout of dtr-control

bonaventurebonaventure Posts: 12Questions: 5Answers: 0
edited February 2022 in Responsive

Link to test case:
Debugger code (
Error messages shown:
Description of problem:
How can I change the design of the dtr.control td, so that following code is applied:

HTML (from render?):

         <td class="dtr-control" id="line-somelinenumber"> 
               <i id="icon-somelinenumber" class="fa fa-caret-down"></i>

my CSS (font awesome):

              font-size: 1.8rem;
              color: green;
              transform: rotate(0deg);
              transition: transform 0.2s linear;
              font-size: 1.8rem;
              color: red;
              transform: rotate(-180deg);
              transition: transform 0.2s linear;

my associated JS:

            var div = document.getElementById('line-somelinenumber'); 
              var icon = document.getElementById('icon-somelinenumber');
              var open = false;
              div.addEventListener('click', function(){
                  icon.className = 'fa fa-caret-down';  
                } else{
                  icon.className = 'fa fa-caret-down open';
                open = !open;

sorry, marking the code as such seems not to work correctly here in the editor :-/

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide


  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin

    Remove the dtr-control class styles from your CSS file (or use a different class) and use columns.defaultContent for the column to have it render the i element (if you want the id to be dynamic, then you'd need to use a renderer).


Sign In or Register to comment.