how to make line on group header datagrid

[shivavalkyre]

hi everyone,

I have a problem with the group header Datagrid, I want to make the border just the right border only.

any suggestion, please?



Best Regards

[shivavalkyre]

here my code,but my problem in td3 is not work as expected

Code:

     
     var dg = $('#dg6');
     dg.datagrid();
     var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="penerima_total"]');
     td.css("border-right","1px solid grey");
     
     var td1=dg.datagrid('getPanel').find('div.datagrid-header td[field="porsi_rescue"]');
     td1.css("border-right","1px solid grey");
     
     var td2 = dg.datagrid('getPanel').find('div.datagrid-header td[id="id1"]');
     td2.css("border-right","1px solid grey");
     
     var td3 = dg.datagrid('getPanel').find('div.datagrid-body td[field="penerima_total"]');
     td3.css("border-right","1px solid red");

[jarry]

Please add this CSS code to append a line on the column header.

Code:

  <style type="text/css">
    .datagrid-header-row:nth-child(1)>td:nth-child(2),
    .datagrid-header-row:nth-child(1)>td:nth-child(3){
      border-right: 1px solid #ccc;
    }
    .datagrid-header-row:nth-child(2)>td:nth-child(3),
    .datagrid-header-row:nth-child(2)>td:nth-child(5){
      border-right: 1px solid #ccc;
    }
  </style>

[shivavalkyre]

how about the body,
my code work on header only

Code:

var dg = $('#dg6');
     dg.datagrid();
     var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="penerima_total"]');
     td.css("border-right","1px solid grey");
     
     var td1=dg.datagrid('getPanel').find('div.datagrid-header td[field="porsi_rescue"]');
     td1.css("border-right","1px solid grey");
     
     var td2 = dg.datagrid('getPanel').find('div.datagrid-header td[id="id1"]');
     td2.css("border-right","1px solid grey");

[shivavalkyre]

 after doing inspect I got this line, and how to style border-right on it