Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Changing the header of a Column using javascript

I have a strange requirement that involves changing the headers of columns within an interactive grid from a popup LOV page item without the need to submit/reload the page every time the parameter changes.

My first thought was to have some javascript code that messes with the headers that gets executed from a Dynamic Action. Here is the code I have so far:

var parts_arr = $v("P200_PARTS_SELECTION").split(':'),
  col_staticID_arr = ['#part-1_HDR', '#part-2_HDR', '#part-3_HDR', '#part-4_HDR', '#part-5_HDR',
    '#part-6_HDR', '#part-7_HDR', '#part-8_HDR', '#part-9_HDR', '#part-10_HDR'
  ];

for (let i = 0, len = parts_arr.count; i < len; i++) {
  $(col_staticID_arr[i]).text(apex.item("P200_PARTS_SELECTION").displayValueFor(parts_arr[i]));
};

This unfortunately does not work for a few reasons, firstly it seems that I can’t use a variable or even a concatenated string in the $(...).text field. Secondly, the displauValueFor(...) field only seems to pull the display value of P200_PARTS_SELECTION when it only holds one value.

However I believe I am on the right path because the following line of code DOES successfully change the header of the column:

$('#part-1_HDR').text('TEST');

Any help would be greatly appreciated!

Tags:

2

Answers


  1. 0 
    let arr = $(".text").text().split(':');
let col_arr = ['#part-1', '#part-2', '#part-3'];

$('th').each(function( index ) {
  $(col_arr[index]).html(arr[index]);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="text">text1:text2:text3</div>
<table>
  <thead>
    <tr>
      <th id="part-1">Column 1</th>
      <th id="part-2">Column 2</th>
      <th id="part-3">Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
  </tbody>
</table>

    I made this exemple. This may be work in your case.

    Login or Signup to reply.
  2. 0

    The column headings are in the column metadata. So an approach could also be to adjust this metadata and refresh the grid (this won’t do a reload, only redrawing as per current state).
    Example code:

    let gridView = apex.region('ig_dept').widget().interactiveGrid("getViews", "grid");
let columns = gridView.getColumns();
let dnameColumn = columns.filter(column => column.elementId == 'c_dname')[0];   // filter by staticId
//let dnameColumn = columns.filter(column => column.property == 'DNAME')[0];   // filter by column name 
dnameColumn.heading = 'Dept name';
gridView.refreshColumns();
gridView.refresh();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search