Freeze Header and 2 Columns in GridView -Asp.Net

Currently i am facing some issues with GridView (.NET 3.5 Framework) control. Based on requirement, i MUST need to freeze header and first 2 columns of grid with scrollbar (both horizontal and vertical). On an average, i am always getting sufficient records to show both scrollbars.

 

I have applied CSS properties to freeze header and columns and it is working fine also but it is impacting performance with huge difference. I cannot afford to have "expression" property in CSS class.

 

Following are the CSS class modification which i am using in my code:

 

<style type="text/css">
/* Div container to wrap the datagrid */





}
div#div-datagrid {width: 420px;height: 200px;overflow: auto;scrollbar-base-color:#ffeaff;position:relative;/* Locks the left column */








td.locked, th.locked {font-size: 14px;font-weight: bold;text-align: center;background-color: navy;color: white;border-right: 1px solid silver;position:relative;cursor: default; left: expression(document.getElementById("div-datagrid").scrollLeft-2); /*IE5+ only*/}
/* Locks table header */








th {font-size: 14px;font-weight: bold;text-align: center;background-color: navy;color: white;border-right: 1px solid silver;position:relative;cursor: default; top: expression(document.getElementById("div-datagrid").scrollTop-2); /*IE5+ only*/
}
z-index: 10;/* Keeps the header as the top most item. Important for top left item*/

th.locked {z-index: 99;}

Please go through the above code which is working fine but i do not want to use "expression" property in CSS. Are there any other solution available for this change?

Tweet