ASP, CSS and C# - Fixing Gridview Headers for Scrolling - c#

Work on the website is going well and I am adding the more fancy features. I noticed their gridviews were incredibly long vertically so I started adding a scrollbar to sort it out. Problem is that the header disappears. There are a few solutions online but all of the ones I have found either do not solve the problem or use JavaScript.
I am willing to use JavaScript if it comes to it, but ideally would only like to use ASP, C# and CSS (I am trying to keep the code as close to their original layout and code design as possible). Is this possible or is JavaScript the only way to go? I have provided the tags for ASP below
<div style="width: 100%; height: 800px; overflow: scroll">
<asp:GridView ID="grdInventory" runat="server" HeaderStyle-CssClass="FixedHeader" AutoGenerateColumns="False" Width="100%" onrowcommand="grdInventory_RowCommand" >
<RowStyle CssClass="normrow" />
<AlternatingRowStyle CssClass="oddrow" />
<Columns>
...Data...etc...
</Columns>
</asp:GridView></div>
And the CSS current for the FixedHeader style
.FixedHeader
{
position: absolute;
}
Any help would be widely appreciated!

Related

onserverclick not firing for input of type date

I am building a web application in ASP.NET using webforms.
I have an input html element which I have set to run at server and I want to fire an event whenever the date is changed.
<input id="datePicker" class="form-control" style="display: inline; margin-left: 5px; width: 15%; text-align: center;" type="date" runat="server" onserverclick="Date_Changed"/>
I have the event in my codebehind:
protected void Date_Changed(object sender, EventArgs e) {}
However, the event is never fired.
Don't believe that server side click events can be wired up to a input that way (using the onserverclick).
I would consider dropping in a HTML button, say like this:
<button id="datePicker"
class="form-control"
style="display: inline; margin-left: 5px; width: 15%; text-align: center;"
type="date"
runat="server" onserverclick="Date_Changed" />
And even better yet, drop in a asp.net button.
If you drop in a input tag, then I don't think you can get the asp.net system to wire this up for you. You could I suppose write this:
(this is what a plane jane above button becomes:
<input onclick="__doPostBack('Button11','')"
name="Button11" type="button" id="Button11" value="button">
So you could try above - but using a "input" tag I don't believe will work, but try a HTML button as per above - that does allow "on server click".
Do keep in mind that if you drop in a asp.net text box, and set textmode = "date"?
Say like this:
<asp:TextBox ID="MyDateTest" runat="server" TextMode="date">
</asp:TextBox>
Then you see this:
So, above is a built in feature - you don't need any js, bootstrap, or anything at all.
but, you could add a "client" side click to your markup, as I posted a above the do post-back would (should) run your click event. However, it probably a whole lot better to not fight asp.net, since then you quite much hand coding a lot of HTML, and doing that means you quite much toss out most of the features of why you would use asp.net in the the first place (that means to take advantage of all the built in controls, and the pre-processing of those controls for you).

How to make X-Scroll in a gridView asp.net?

I'm trying to add scroll bars in both x and y but I only can add y-scroll.
At the moment, my gridview is showing only partial data, it is missing 3-4 columns so I really need to use x-scroll. I've tried "overflow-x: scroll;" but it doesn't work.
My source code
<div style= "overflow-x:scroll; Overflow:scroll; max-height: 150px; width: 800px">
<asp:GridView ID="GridViewUpBus" runat="server" AutoGenerateColumns="False" Font-Names="Arial" Font-Size="Small" HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="SubCatID" HeaderText="Sub category ID">
<ItemStyle Width="10%" />
</asp:BoundField>
If I run, it looks like this. 2 more columns are not showing
Could it be achieved by not using javascript? If I need to use "jquery-1.4.1.js" or "gridviewScroll.min.js" where can I download it? Sorry I'm pretty new to programming and I don't really know how to use javascript or jquery.
It'd be great if I could add boarder lines in the gridview. Thanks in advance!
CSS is case sensitive so Overflow wont work but overflow will. Try
<div style= "overflow:auto; max-height: 150px; width: 800px">
to only apply croll bars if needed or:
<div style= "overflow:scroll; max-height: 150px; width: 800px">
to always have scrollbars.
Finally, avoid using inline style, apply it as a class instead.

DataGridView design X scroll with fixed header, visible grid line, even column width

I'm making an admin panel and I have DataGridView on each page.
At the moment, it is not showing x &y gridLines and column width is arbitrary. I've used ItemStyle width 10%, but still doesn't really do the trick.
Here is my source code
<td class="auto-style9" colspan="2">
<div style= "Overflow:scroll; overflow-x: scroll; max-height: 220px; width: auto">
<asp:GridView ID="GridViewUpPer" runat="server" AutoGenerateColumns="False" Font-Names="Arial" Font-Size="Small" HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="SubCatID" HeaderText="Sub category ID">
<ItemStyle Width="10%" />
</asp:BoundField>
Here is my design
x scroll is not appearing and my gridView is not showing the entire columns. I only can change heard text color not the text color of data. I'm using table and div.
I have 15 of GV looking like this..... Can anyone help me to design a good looking gridView?? Without using java coz I'm new to programming and I don't know that script language...... Thanks~
C#, VS 2012, web application

Grid View header and row size are big when there are few records, when there are more rows it is fine

I have a grid view, the problem I am facing is when there is only 1 row in the table the header and the only row is really big, when the number of rows increases then the size of whole table and the header shrinks and it looks good, when there is few records it is looks like this
!http://www.freeimagehosting.net/43572
What is the problem here. thanks
<asp:GridView ID="Grid_Messagetable" runat="server" BorderStyle="Ridge" BorderWidth="5"
CssClass="Grid_MsgTbl" CellPadding="1" CellSpacing="1" AllowPaging="False" SelectedIndex="0"
DataKeyNames="MsgID" ShowHeaderWhenEmpty="false" OnRowDeleting="Grid_Messagetable_RowDeleting"
OnRowDataBound="MyGrid_RowDataBound" AutoGenerateColumns="False" AllowSorting="true"
OnSorting="gridView_Sorting">
.Grid_MsgTbl
{
text-align: center;
z-index: 1;
left: 7px;
top: 5px;
position: relative;
height: 308px;
width: 646px;
right: 17px;
bottom: 524px;
}
http://www.freeimagehosting.net/43572
I think you need to add more styles to your css.
Add <HeaderStyle Height="30px"/>
Also add AlternatingRowStyle-CssClass="altrowstyle" and HeaderStyle-CssClass="headerstyle"
so you can add something like this to your css
.rowstyle td, .altrowstyle td {height:something}
But setting the height for the gridviewnot a good way of doing it since .net is clever enough to adjest the height accoding to data.
Anyway I think this article about ASP.NET GridView makeover using CSS will give you better idea.
Hope this helps
Never used gridView in asp.net but my guess is: Its size is being adjusted for the amount of data stored inside. You could try to set size for each element of the site by css. Also, if you have problems debugging the look of the site i recommend you getting firebug addon to firefox. It will really help you find out whats going out with your elements and which css transformations concern them.

How to Refresh only few parts of website

I am using a pie chart in my webpage which have to be updated every 4 seconds so I have used this
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<meta http-equiv="refresh" content="4" />
My pie chart is in the bottom of the page. Everytime the page refreshes the page goes to the top. by the time I scroll down to view the pie chart it refreshes again.
//Passing values to draw pie chart
var pie1 = new RGraph.Pie('pie1', <%= Session["uStats"] %>);
// Create the pie object
pie1.Set('chart.key', ['Read', 'Received', 'Not Received']);
pie1.Set('chart.key.align', 'right');
pie1.Set('chart.key.position.x', 200);
pie1.Set('chart.key.position.y', 100);
//pie1.Set('chart.gutter.right', 100);
pie1.Set('chart.colors',['#86cf21', '#eaa600', '#e01600']);
pie1.Set('chart.title', "Message Status");
pie1.Set('chart.align', 'left');
pie1.Set('chart.shadow', true);
pie1.Set('chart.radius', 70);
pie1.Set('chart.labels.sticks', false);
pie1.Set('chart.tooltips.effect', 'fade');
pie1.Set('chart.tooltips.event', 'onmousemove');
pie1.Set('chart.highlight.style', '3d'); // Defaults to 3d anyway; can be 2d or 3d
if (!RGraph.isIE8())
{
pie1.Set('chart.zoom.hdir', 'center');
pie1.Set('chart.zoom.vdir', 'up');
pie1.Set('chart.labels.sticks', false);
pie1.Set('chart.labels.sticks.color', '#aaa');
}
pie1.Draw();
}
//I add the values to the session.
Session.Add("uStats", "[" + read + "," + received2 + "," + NotReceived + "]");
<div id="pie" "top: 165px; left: 536px; width: 74px; position: absolute; height: 529px;">
<canvas id="pie1" width="400" height="400">[No canvas support]</canvas>
</div>
<asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px;
top: 621px; position: absolute; height: 250px; width: 287px">
<asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px;
position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False"
OnRowDataBound="MyGrid_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Status">
<ItemTemplate>
<asp:Image ID="Status" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False"
ReadOnly="True" SortExpression="TimeReceived" />
<asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
</asp:GridView>
</asp:Panel>
I have to update the table and the pie chart
What is the solution to refresh only the required parts of the website and make the webpage to stay on the exact place instead of going to the top
What is the solution to refresh only the required parts
AJAX.
The tools you use are up to you, but the concept is the same. Essentially what you need to have is some JavaScript on the page which occasionally makes a request to a server resource to get updated data and to update the relevant elements on the page.
Here's a simple example of how this behaves in a browser and how the client-side code and server-side code interacts.
Typically the way to do this is to write a small page which can output either a snippet of JSON or raw HTML that represents the part that's changed. This page will then be called periodically from Javascript via XMLHttpRequest, its output captured and then either inserted directly into the page to replace the existing content or, if JSON, its values used to update the content in place.
Exactly how to do this varies based on your situation, codebase, style, etc..
I would need to know more about your design to say anything definitively, but you can probably use an UpdatePanel to update your chart at certain intervals. Only what's inside of the UpdatePanel would get updated.
Here's an example of how to update contents every second:
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html

Categories