Using Gridview and getting scrollable cells? - css

Question

I am using Gridview and I want to have the cells scrollable. I already have a div that scrolls the whole table, but I need to individual cells to be kept to a certain max width and a scrollbar be created for cells that have data that would exceed that.
I have tried adding <rowstyle Wrap="false"/> this made the data stop wrapping, which I wanted, but now the rows are very very wide. Which I don't want.
I found several suggestions that say to add a div around the Gridview which I did and added a css rule like overflow-x:auto;width:200px; this did not help the cells are still very very wide.
I have the Gridview setup like this:
<asp:GridView ID="PMDataGrid"
datasourceid="PMDataSource"
ondatabound="PMDataGrid_DataBound"
autogeneratecolumns="false"
emptydatatext="No Data Available"
allowpaging="true"
pagesize="25"
runat="server"
showheader="true"
showfooter="true"
DataKeyNames="PROJECT"
allowsorting="true"
style="overflow-x:auto"
headerstyle-cssclass="FixedHeader">
<HeaderStyle BackColor="Black" ForeColor="White" />
<FooterStyle BackColor="Black" ForeColor="White" />
<RowStyle BackColor="White" ForeColor="Black" height="50px" Wrap="false" Width="250px" />
<AlternatingRowStyle BackColor="#e5e5e5" ForeColor="Black" height="50px" />
<SelectedRowStyle BackColor="#999999" ForeColor="#fff" />
I would like to be able to have a max-width of 250px and have a scrollbar when the data is too long, but I am unable to find a solution. I am fairly new to web apps in asp.net.
I have added this:
<asp:TemplateField HeaderText="COE_%_RCVD_BY_LINE" SortExpression="COE_%_RCVD_BY_LINE">
<ItemTemplate>
<asp:Label ID="Lable70" runat="server" Text='<%# Bind("COE_%_RCVD_BY_LINE") %>'></asp:Label>
</ItemTemplate
</asp:TemplateField>
Which produced this error:
Parser Error Message: A call to Bind was not well formatted. Please refer to documentation for the correct parameters to Bind.
I think it's the % that is causing the error. Is there a way to keep the % and have it work?
I forgot to add the surrounding <div></div>. It now looks like this:
'>
How and I have CSS setup like this:
.Gridview {
overflow-x:auto;
width:250px;
}
I'm pretty sure I have this setup correctly, but still the columns are very very wide:
and the rules in the CSS don't seem to be applying:

Answer 1

I have it figured out.
I had the CSS file with the style, this did not work. When I added the style to the div inline then it works, like this:
<asp:TemplateField HeaderText="DESCRIPTION" SortExpression="DESCRIPTION">
<ItemTemplate>
<div class="Gridview" style="overflow-x:auto; max-width:250px;">
<asp:Label ID="Lable1" runat="server" Text='<%# Bind("DESCRIPTION") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
This now works to add the scrollbar to any field that goes over the 250px max that I have set.
This can mostly be found in the similar question: Is it possible to scroll in a cell of a gridview?
But I did learn that the style has to be inline for it to work. Having the style in the CSS file did not work.