A scrollable DataGrid? 1

[dpdoug]

I need a component that is similar to the functionality of the datagrid, but that you can set to a certain height and make it scrollable so that if the number of rows are greater than the height of the grid the user can scroll down.

Is there such a control that I could use with a web form?

David

 

[jen89]

We use an Infragistics grid to accomplish this. I don't know if the Microsoft grid has that capability.

 

[Isadore]

dp: This topic has been discussed on several occassions here at Tek-Tips. The best solution to date that I know of is to set the grid inside an html table, set your headings there, and put a div tag inside the table and place your datagrid.

The trick is to make sure your datagrid columns do not "dynamically" change with each population event, as the html headings are static. I have used this technique successfully by setting the column widths inside the datagrid and using 'cooperative' data from the database. Its a bit tricky but can be done.

To see an example of a static header go to:

http://frontpage.auburn.edu/icaae/index.aspx

..and click on the "Trends Module" button, choose a selection in the drop box and hit the go button. There is a datagrid inside an html table (just an example).

 

[dpdoug]

Isadore,
Thanks for the tip. I had already discovered this method. But I noticed that when your DataGrid is updated it appears that only the grid changes and not the whole page getting refreshed -- or at least it's not appearent.

Is this the case, or is that just my impression?

 

[jfrost10]

You can also put it within <div> tags, and set the div to allow scrolling.

D'Arcy

 

[Isadore]

db: yes, the datagrid was embedded within an IFrame. Yes, D'Arcy is correct, you have the option of setting the scrollable property of the <div> tag, or in my case, the IFrame object (Scrolling="yes").

 

[dpdoug]

I have it in a div tag at the moment, but I am considering putting it in an iframe so it will load up separate from the main form.

But then I want to be able to fire a client-side script function referencing controls on the main form.

My grid will the lookup on the form inside the iframe. It has a column that contains the row id and a link that will have a call to a client-side function and passes the row id to it. But I don't want to reference the main form in the href to avoid reloading the page -- I only want to populate the controls on the main form. (hence the href='#')

The function will look for a row in an array that has previously been built and it will populate text boxes and check boxes and dropdowns on the main form.

How can I call a function in another page from my lookup page?

The call in the lookup column of the grid will look something like this:

"<td><a href='#' onclick='PopulateControls(" & reader("Rowid") & ")'>edit</a></td>"

The problem is how does it know that the function PopulateControls() is in a client-side script on the other form?

 

[Isadore]

dp: haven't digested your critique there, but just to throw up a tidbit - and I'll post back later if I can contribute --

...it was interesting to note while working with the IFrame that I discovered, if you do a little research there is java for anything w.r.t. transfering variables, etc, ran across tons of it -- but also, interesting, when I used:

'<%=strURL%>'

inside the IFrame, on a separate aspx page, the variable transferred from the original aspx page with no problem - I thought this was a neat technique, one of which I have already employed with charts inside IFrame, where they postback to make a new chart with newly entered data in the main form. Just a thought.

 

[BoulderBum]

The div method:

<div style="vertical-align: top; height:200px; width:100%; overflow:auto;">
  <asp:DataGrid runat="server" ...>
    ...
  </asp:DataGrid>
</div>

 

[Isadore]

...and one further note, regarding BB's div statement -- the 'overflow:auto' property allows the appearence and/or disappearence of scrollbars, as needed, and is a great way to control this behavior (v. checking for screen size, or turning on/off scrollbars).

 

[checkai]

Isadore,

How do you get your columns to line up so nicely? I am having issues with lining up the header table with the datagrid columns...

dlc

 

[Isadore]

dlc - in my case it was easy enough, since the columns each have an image with the same width -- otherwise its simply a <div> tag within an html table holding the datagrid. You'll have to control the widths through the datagrid using a style statment in the grid --

Also tweak your cell spacing and other params w.r.t. cell width, etc... Its takes a bit - what seems to be the bigggest problem? Keeping the Grid widths constant?

Note: I've been out last several weeks (without a computer) but back at the office now....

 

[checkai]

the grid widths is the problem...in design view, i cannot tell if they are changing when i change the width property...I'm frustrated!!!

dlc

 

[Isadore]

dlc - I'm slightly hamstrung at the moment, getting a new laptop up to speed (still not running aspx pages yet). Send the code and a table snippet to me and later tonite when I'm back on the dot NET business I'll tweak it a bit.

The problem I think with this dl is when a Grid column becomes larger than the designated width statement within the datagrid style command, etc. But I think it is doable. Don't get bogged down in this (unless its super urgent) -- I'll give ya hand on this but it will be a bit later on in the day before I can help (I have yet to have to re-recover my laptop due to the infestation by kelock trojans yesterday (5 at once) and there is no patch for them -- (came through IE). Thinking about moving over to NetScape for awhile (seems IE is somewhat problematic with worms, etc).

my email is: biochem3d@yahoo.com

 

[checkai]

here's the code for the dg and div, i had gotten rid of the surrounding table

<DIV style="Z-INDEX: 101; LEFT: 8px; VERTICAL-ALIGN: top; OVERFLOW: auto; WIDTH: 808px; POSITION: absolute; TOP: 56px; HEIGHT: 280px">
<asp:datagrid id="dgClients" runat="server" Font-Names="Arial" Font-Size="11px" CellSpacing="1"
AllowSorting="True" AutoGenerateColumns="False" CellPadding="2" BorderWidth="0px" ShowHeader="False">

<AlternatingItemStyle BackColor="#C0C0FF"> </AlternatingItemStyle>
				
<HeaderStyle Font-Size="14px" Font-Names="Arial" Font-Italic="True" ForeColor="White" BackColor="#000099"> </HeaderStyle>
					<Columns>
						<asp:BoundColumn DataField="W" SortExpression="X" HeaderText="20">
							<HeaderStyle Font-Bold="True" HorizontalAlign="Center" Width="15px"></HeaderStyle>
							<ItemStyle HorizontalAlign="Center"></ItemStyle>
						</asp:BoundColumn>
						<asp:BoundColumn DataField="P" SortExpression="PRT" HeaderText="PC">
							<HeaderStyle Font-Bold="True" HorizontalAlign="Center" Width="15px"></HeaderStyle>
							<ItemStyle HorizontalAlign="Center"></ItemStyle>
						</asp:BoundColumn>
						<asp:BoundColumn DataField="Client Name" SortExpression="NAME" HeaderText="Client Name">
							<HeaderStyle Font-Bold="True" Width="150px"></HeaderStyle>
							<ItemStyle Font-Bold="True"></ItemStyle>
						</asp:BoundColumn>
						<asp:BoundColumn DataField="OS WIP" SortExpression="OSWIP" HeaderText="O/S WIP">
							<HeaderStyle Font-Bold="True" HorizontalAlign="Right" Width="100px"></HeaderStyle>
							<ItemStyle HorizontalAlign="Right"></ItemStyle>
						</asp:BoundColumn>
						<asp:BoundColumn DataField="OS AR" SortExpression="OSAR" HeaderText="O/S AR">
							<HeaderStyle Font-Bold="True" HorizontalAlign="Right" Width="100px"></HeaderStyle>
							<ItemStyle HorizontalAlign="Right"></ItemStyle>
						</asp:BoundColumn>
						<asp:BoundColumn DataField="Last Billed" SortExpression="LBILL" HeaderText="Last Billed">
							<HeaderStyle Font-Bold="True" HorizontalAlign="Right" Width="100px"></HeaderStyle>
							<ItemStyle HorizontalAlign="Right"></ItemStyle>
						</asp:BoundColumn>
						<asp:BoundColumn DataField="CurrentBilled" SortExpression="CURB" HeaderText="Cur Billed">
							<HeaderStyle Font-Bold="True" HorizontalAlign="Right" Width="100px"></HeaderStyle>
							<ItemStyle HorizontalAlign="Right"></ItemStyle>
						</asp:BoundColumn>
						<asp:BoundColumn DataField="YTDBilled" SortExpression="YTD" HeaderText="YTD Billed">
							<HeaderStyle Font-Bold="True" HorizontalAlign="Right" Width="100px"></HeaderStyle>
							<ItemStyle HorizontalAlign="Right"></ItemStyle>
						</asp:BoundColumn>
						<asp:BoundColumn DataField="Last Receipt" SortExpression="LRECT" HeaderText="Last Receipt">
							<HeaderStyle Font-Bold="True" HorizontalAlign="Right" Width="100px"></HeaderStyle>
							<ItemStyle HorizontalAlign="Right"></ItemStyle>
						</asp:BoundColumn>
					</Columns>
				</asp:datagrid></DIV>

 

[Isadore]

dlc - will be another day before I get FrontPage, .NET Framework, etc back up and running so can't specifically test.

I just noticed in your code you are trying to set the headers at the top of the DG - can't do that since DG row cannot be held static. You need to have the header inside an html table (DIV holding html table holding DG). Put your widths inside the DG Column tag (style="..").

This feat you are trying to accomplish I think is doable, but it is an exercise in maintaining a completely 'tight' ship as to accentuate problems (such as possibly using some type of word wrap within the Grid cell, etc).

For example, in your code I see that the DG has a width of 780px while the DIV tag is set to a width of 808px. Perhaps you can set the DIV tag to equal the DG's width.

Again, the assignment of widths within the style statement of the DG's Column tag should generally behave. If the information within the cell is longer than the width set for that column, one or two things I suppose can happen. Either the text can wrap, or cause the DG to open up its width (keeping in mind that the DIV tag perhaps should be placed around an html table, and the DG inside the html table -with the html table providing the header in its first row.)

As I mentioned earlier, it was easy for me as I had an image across the DG Columns with a particular width -- had I faced a text problem I would have set all the widths in the DG and looked at example where the text might be expected to open up the column width, and see if I could not find a way to get the text to wrap.

This is one of those intense tweaking situations where if you're even off 1 px it will make a diff. When I get dot NET back I'll run the above code.

 

[checkai]

I have gotten it quite close...i think i'm happy with it now...thanks for the help!!

dlc