I am facing a challenge with a GridView within a div wrapper. The row headers along the left side need to always be visible. So far, this setup is working fine. However, I need the wrapper to have a variable width to adjust to the browser size.
Although I have managed to determine the desired width of the wrapper based on the browser width using Javascript, I am struggling to set this width as the wrapper.width. It is not necessary for the wrapper width to update after the page loads or monitor browser resizing.
Here is a rough diagram:
| |column headers |
| R |--------------|
| O | gridview data |
| W | |
| | this part |
| H | will scroll |<--->
| E | while the |
| A | Row headers |
| D | stay there |
| E | |
| R |______________ |
| S | scroll bar |
Here is the ASP code snippet:
<pseudocode>
<table>
<tr><td>row headers</td>
<td><div class="Wrapper">
<asp:GridView>dataBind()</asp:gridview>
</div></td></tr>
</table>
</pseudocode>
CSS:
div.Wrapper
{
width:800px;<--this needs to change based on the browser width
overflow: auto;
}
Javascript:
var Width = window.innerWidth - 275 || document.body.clientWidth - 275
I am looking for a solution to set the wrapper.width = Width or any alternative method to achieve the same result. Any assistance would be greatly appreciated.
I have attempted using a percentage for the width, but it did not utilize the browser window as 100%, instead, it took the percentage of the full width of the GridView, which did not meet my requirement.
Thank you in advance for your help.
Edit: included additional code
<script type="text/javascript">
var Width = window.innerWidth - 275 || document.body.clientWidth - 275;
var divElement = document.getElementById("wrappist");
<!--I tried a few different things at this point, here are a couple of them-->
divElement.offsetWidth = "80px";
divElement.style.width = Width.toString() + 'px';
</script>
<div runat="server" id="wrappist" class="Wrapper">
<asp:GridView runat="server" ID="ALPGrid" CssClass="Grid"
CellPadding="5" GridLines="Both" AutoGenerateColumns="false"
OnRowDataBound="ALP_RowDataBound" OnRowCreated="ALP_RowCreated"
DataKeyNames="ItemID">
<HeaderStyle CssClass="GridHeader" />
<RowStyle CssClass="Row" />
<columns>column stuff in here</columns>
</asp:GridView>
</div>