I need an arrow to rotate 180 degrees when a user clicks on a row in this gridpanel. When a user clicks on the row the arrow icon on the right should rotate 180 degrees representing the row being collapsed and expanded.

Right now in the groupheadertpl i am doing the following:

groupHeaderTpl: [
                                   //     '<head><link rel="stylesheet" type="text/css" href="/../../desktop6ECM.css"></head>',
                                        '<script>function toggleClass(e,c) {(e).classList.toggle(c);}</script>',
                                        '<tr><td style="text-align: left;width: 135px;">{columnName}: {name}</td>' +
                                        '<td style="text-align: center;width: 90px;">{rows.length}</td>' +
                                        '<td style="text-align: right;width: 440px;font-weight: bold;font-size: large;">' +
                                        '<a href="#"><i onclick = "toggleClass(this,grouphead-arrowup)" class="fa fa-angle-up" class="grouphead-arrowdown"></i></a>' +
                                        '</td></tr>' +
HTML may not be the best way but I could not find another way to do this.