SOLUTION:
@rosenjon @Naveen Boga @Chris Hackett
A good friend of mine, Hamed Oveisi, helped me to fix this issue and all credits goes to him. Here I’m sharing the solution and a little video of final product. This customization is developed on Cost Projection Screen:
1-Grid Client Events Property Setting:
<ClientEvents AfterRefresh="freezeColumnForce" />
<ClientEvents AfterColResize="freezeColumnForce" />
<ClientEvents AfterColMove="freezeColumnForce" />
<ClientEvents HorizontalScroll="freezeColumnIfNot" />
<ClientEvents RowSelectorClick="freezeColumnIfNot" />
<ClientEvents Initialize="freezeColumnIfNot" />
2-Java Script:
function freezeColumn(force)
{
let totalWidth=0;
let columnToFreeze=7;
for (let i = 0; i < columnToFreeze; i++)
{
let x = document.getElementById("ctl00_phG_tab_t0_grid_headerT").rows[0].cells[i];
if (x.style.position==='sticky' && !force) break;
if (x.style.display==='none')
{
columnToFreeze++;
continue;
}
let style = position: sticky;left: ${totalWidth}px ;z-index: 2;;
totalWidth += x.offsetWidth;
x.setAttribute('style',style);
let j=0;
while (true)
{
console.log("ctl00_phG_tab_t0_grid_row_"+j);
let r=document.getElementById("ctl00_phG_tab_t0_grid_row_"+j);
if (r==undefined) break;
j++;
r.cells[i].setAttribute('style',style);
}
}
}
function freezeColumnForce()
{
freezeColumn(true);
}
function freezeColumnIfNot()
{
setTimeout(freezeColumn(false),1000);
}
3-Final Result video in the zip file attached: