Hide Columns In Grid Edit - Tabular Report

[kpcollier]

Hello,

I've got several fields and HTML blocks in my tabular report that are just for displaying information, they cannot be edited. I am trying to hide these specific columns when the user enters Grid Edit mode, but keep them visible when the user is just viewing the report normally. 

Anyone have any ideas how to do this? I've tried a couple different approaches, including the one below, to no avail. 

div[class="HeadCtnr"] th:nth-child(5) {
display: none !important;
}

div[class="BodyCtnr"] th:nth-child(5){
display: none !important;
}

 

[kpcollier]

Seems there is an easy way to get rid of the non-editable data cells, as they all have the .cbResultSetGridNonEditableColumnNumberDate class. However, the headers prove to be more difficult, as they do not have a specific class singling them out.  

tr[class="cbResultSetGridTableHeader"] td:nth-child(5) {
  display: none !important;
} 

Not too sure how to do these css 'queries' or whatever you call them but this didn't do anything either. 

[kpcollier]

.cbGridCtnr > .HeadCtnr :nth-child(3) {
  display: none;
}

this hides the header cells. In combination with hiding the data cells from the post above, this accomplishes the task. 

[futurist]

Hi @kpcollier,

You can also use this: 

td[class="Cell cbResultSetGridHeaderCell cbResultSetLabel"]:nth-child(3), td[class="Cell cbResultSetGridDataCell cbResultSetData cbResultSetGridNonEditableColumn"]:nth-child(3) {
  display: none;
}

[kpcollier]

10 minutes ago, futurist said:

Hi @kpcollier,

You can also use this: 

td[class="Cell cbResultSetGridHeaderCell cbResultSetLabel"]:nth-child(3), td[class="Cell cbResultSetGridDataCell cbResultSetData cbResultSetGridNonEditableColumn"]:nth-child(3) {
  display: none;
}

Thank you for the help!

I can't get this to work, for some reason. I've tried adding important as well, with no luck. 

td[class="Cell cbResultSetGridHeaderCell cbResultSetLabel"]:nth-child(5), td[class="Cell cbResultSetGridDataCell cbResultSetData cbResultSetGridNonEditableColumn"]:nth-child(5) {
  display: none !important;
}
td[class="Cell cbResultSetGridHeaderCell cbResultSetLabel"]:nth-child(7), td[class="Cell cbResultSetGridDataCell cbResultSetData cbResultSetGridNonEditableColumn"]:nth-child(7) {
  display: none !important;
}

 

[futurist]

10 minutes ago, kpcollier said:

Thank you for the help!

I can't get this to work, for some reason. I've tried adding important as well, with no luck. 

td[class="Cell cbResultSetGridHeaderCell cbResultSetLabel"]:nth-child(5), td[class="Cell cbResultSetGridDataCell cbResultSetData cbResultSetGridNonEditableColumn"]:nth-child(5) {
  display: none !important;
}
td[class="Cell cbResultSetGridHeaderCell cbResultSetLabel"]:nth-child(7), td[class="Cell cbResultSetGridDataCell cbResultSetData cbResultSetGridNonEditableColumn"]:nth-child(7) {
  display: none !important;
}

 

Hi Keith,

It seems to be working as expected on my end. Here's my DataPage URL: https://c1hch576.caspio.com/dp/db26a000d0678790228b4fb593fd

 

And here are my css that hides the fields HTML BLOCK 1 and 2 (nth child 3 and 6, respectively):

td[class="Cell cbResultSetGridHeaderCell cbResultSetLabel"]:nth-child(3), td[class="Cell cbResultSetGridDataCell cbResultSetData cbResultSetGridNonEditableColumn"]:nth-child(3) {
  display: none !important;
}

td[class="Cell cbResultSetGridHeaderCell cbResultSetLabel"]:nth-child(6), td[class="Cell cbResultSetGridDataCell cbResultSetData cbResultSetGridNonEditableColumn"]:nth-child(6) {
  display: none !important;
}
 

 

[GoodBoy]

Hi @kpcollier , you may also try this code. Just change the number based on the position order of the field you want to hide.

<style>
form[action*='[@cbAppKey]'] tr.Row.cbResultSetGridDataRow td:nth-child(9),
form[action*='[@cbAppKey]'] tr.Row.cbResultSetGridTableHeader td:nth-child(9)
{
display:none !important;
}
</style>

 

[kpcollier]

I appreciate it, y'all. I was able to get it figured out. Thanks for the help!

[Kurumi]

Hi - Just to add, if you want to hide a column in a Pivot Report - you can use this code:

 

[Kurumi]

Hi - Just an update, here is the other way to hide a column in Grid Edit - Tabular Report.

div.HeadCtnr > table > tbody > tr.Row[class*='cbResultSetGridTableHeader'] > td:nth-child(1), td[class*='cbResultSetGridDataCell']:nth-child(1){

    display:none !important;

}

Replace 1 with the position order of column to be hidden.