I created a GridView that is somewhat responsive. After i scale the browser to a certain point it doesnt stack like it would on a mobile device. what do i need to add to my gridViews to get them to display nicely on a mobile device?
<section id="no-more-gridView">
<asp:GridView ID="GridView1" CssClass="table table-bordered table-hover table-responsive-xl w-100 align-self-auto" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Height="296px" Width="886px" AllowSorting="True" BorderStyle="Groove" HorizontalAlign="Center" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<AlternatingRowStyle BackColor="#CCFFFF" />
<Columns>
<asp:BoundField DataField="Row#" HeaderText="Row#" SortExpression="Row#" />
<asp:BoundField DataField="Number" HeaderText="Number" SortExpression="Number" />
<asp:BoundField DataField="Person" HeaderText="Person" SortExpression="Person" />
<asp:BoundField DataField="Reason" HeaderText="Reason" SortExpression="Reason" />
<asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
<HeaderStyle HorizontalAlign="Center" CssClass="table table-primary"/>
</asp:GridView>
</section>
As noted, by defualt, bootstrap should be working.
To allow that gridview to REALLY crunch down, and re-size REALLY nice?
I suggest this:
class="table table-hover table-fixed">
The fixed really does a great job - it seeks to try and fix the column sizes.
Thus on a 1920 BIG monitor, I get this:
But, resized as VERY small - easy to fit on a phone? You get this:
Now we gone from 1920 down to 517 pixels.
I don't think you can get much better crunching down then say the above. And if you need smaller yet, then I don't think bootstrap or any responsive framework going to help you all that much.
So, I did above with this:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" class="table table-hover table-fixed">
I do find that table-fixed seems to do about the best here, but you could try a few other settings:
Say this:
class="table table-responsive"
So give both a try. The last one is quite much what most use - and it also does a really great job at re-sizing.
Related
I have a gridview on my web page.
I am able to populate the Grid using C# in the behind code.
Here is a sample screen of 2 columns and 2 rows:
What I don't understand is why there Gridlines are not showing on the rows of data when I have it set on the gridview properties to show "both".
<asp:GridView id="gvappts"
runat="server"
AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="False"
BorderColor="#EFE6F7"
ForeColor="#003399"
Width="100%"
Font-Size="Small"
GridLines="Both"
BorderStyle="Solid"
BorderWidth="1px"
CellPadding="3">
<Columns>
<asp:BoundField DataField="apptid" HeaderText="Appt #" />
<asp:BoundField DataField="name" HeaderText="Name" />
</Columns>
</asp:GridView>
What am I missing?
Please try the below code to your row border..
<RowStyle HorizontalAlign="Center" BackColor="White" BorderColor="#0000CC"
BorderStyle="Solid" BorderWidth="2px"/>
And also try the same to columns.
All of the comments on this post are correct to some extent which is, you mention that the issue must rely in the styles, after going line by line in my style sheets I found the culprit style and was able to get the grid-lines to show.
We have several terminals throughout the plant that employees will be using to submit part requests through our supply/warehouse department.
This Supply Warehouse will have a terminal displaying an "orders" website, showing a list of part numbers and the employees who are waiting for them.
Everything works now, but I only know how to get the data to refresh by coding in a <META REFRESH> tag, which doesn't really work well and causes a lot of other information on the form to get lost in the process.
How would I go about telling the webpage to "listen" for changes or simply update the GridView once a minute or so?
I've seen websites do it. This site pops up a note as soon as someone responds, finance sites pop up the latest stock quotes every few seconds, etc. I don't know what the technology is called or how I would use it.
Do I write some code in the codebehind?
protected void Page_Load(object sender, EventArgs e) {
// ???
}
Here is the basics of what I have.
<asp:SqlDataSource ID="productionDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:CPWEB_PRODUCTION %>" SelectCommand="SELECT [RequestID], [Employee], [DateStamp], [Line], [PartNo], [Workorder], [Qty], [MTF], [Status] FROM [vwRequestsEx] WHERE ([Status] = #Status)"><SelectParameters>
<asp:ControlParameter ControlID="ddlSelector" Name="Status" PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" AutoGenerateSelectButton="True" CellPadding="1" DataSourceID="productionDataSource2" EmptyDataText="No Records to Display" Font-Size="Small" ForeColor="#333333" OnSelectedIndexChanged="GridViewRow_Selected" ShowHeaderWhenEmpty="True" HorizontalAlign="Left" RowHeaderColumn="RequestID" Width="95%">
<Columns>
<asp:BoundField DataField="RequestID" HeaderText="RequestID" SortExpression="RequestID" />
<asp:BoundField DataField="Employee" HeaderText="Employee" SortExpression="Employee" />
<asp:BoundField DataField="DateStamp" HeaderText="DateStamp" SortExpression="DateStamp" />
<asp:BoundField DataField="Line" HeaderText="Line" SortExpression="Line" />
<asp:BoundField DataField="PartNo" HeaderText="PartNo" SortExpression="PartNo" />
<asp:BoundField DataField="Workorder" HeaderText="Workorder" SortExpression="Workorder" />
<asp:BoundField DataField="Qty" HeaderText="Qty" SortExpression="Qty" />
<asp:BoundField DataField="MTF" HeaderText="MTF" SortExpression="MTF" />
<asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
</Columns>
</asp:GridView>
I'm getting a lot of downvotes lately. Downvoters: That's OK, but kindly let me know why so I'll understand what is wrong.
There is an easy solution using UpdatePanels and a Timer in the answer to this question: gridview that is updated frequently
You should look at using SignalR to achieve this.
I have an issue working with the telerik radgrid control. I am trying to use javascript to access a textbox when the grid is in edit mode.
My code looks like the following:
<telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
AllowSorting="False" AllowAutomaticInserts="True" PageSize="10" AllowAutomaticUpdates="True"
OnItemDataBound="RadGrid1_ItemDataBound" AllowMultiRowEdit="False" AllowPaging="False"
DataSourceID="DataSource1" OnItemUpdated="RadGrid1_ItemUpdated" AllowFilteringByColumn="False"
OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted" AutoGenerateColumns="false"
OnDataBound="RadGrid1_DataBound">
<PagerStyle Mode="NextPrevAndNumeric" />
<MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="Id"
DataSourceID="DataSource1" HorizontalAlign="NotSet" EditMode="EditForms">
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
<ItemStyle CssClass="MyImageButton" />
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
UniqueName="DeleteColumn">
<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="Id" HeaderText="Id" Display="false" ReadOnly="true" />
<telerik:GridBoundColumn DataField="Manufacturer" HeaderText="Manufacturer" />
<telerik:GridBoundColumn DataField="Description" HeaderText="Description" />
<telerik:GridBoundColumn DataField="Configuration" HeaderText="Configuration" />
<telerik:GridDropDownColumn DataField="TypeId" HeaderText="Type" UniqueName="PartsType"
DataSourceID="PartsTypeDataSource" ListTextField="Name" ListValueField="Id" />
What I am after is that, during edit mode, when the user selects a certain value from the dropdown list 'PartsType', one of the other fields - eg 'Manufacturer' will be shown/hide.
I could get the dropdown value (in javascript) by attaching a javascript function to the dropdownlist:
function PartsTypeIndexChanged(sender, args) {
var selectedValue = args.get_item()._text;
}
I just dont know which method to use to get the 'Manufacturer' field, so I can show/hide it.
Could anyone please help?
Many thanks.
A possible approach could be to use RadControls client-side static API
$telerik.findElement(gridDOMElement, "Manufacturer");
This will help you access the column editor - I suppose it is ASP.NET TextBox rendered as input. For numeric or date columns the editor will probably be Telerik client component so you have to use findControl instead of findElement.
More info here:
http://www.telerik.com/help/aspnet-ajax/telerik-static-client-library.html
Good luck
Please check below link.
http://www.telerik.com/community/forums/aspnet-ajax/grid/set-controls-attribute-like-enable-disable-on-insert-edit-mode-using-jquery.aspx
i have to fix the header in a gridview and i use this in style Class
<style type="text/css">
.gridFixedHeader
{
background-color:white;
position:relative;
top:expression(GridView1.offsetParent.scrollTop-2);
}
</style>
but i get an error that expression(GridView1.offsetParent.scrollTop-2);is not valid...
what all do i need to do to make this work.....
any suggestions
Main aim... to fix the headers so they dont move when the gridview is scrolled up or down...
any help will be appreciated...
here is my gridview code
<asp:Panel ID="Panel1" runat="server" Height="100px" ScrollBars="Vertical">
<asp:GridView ID="GridView1" runat="server" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC"
BorderStyle="None" BorderWidth="1px" CellPadding="3"
DataKeyNames="MachineGroupID" DataSourceID="SqlDataSource1">
<RowStyle ForeColor="#000066" />
<HeaderStyle CssClass="gridFixedHeader" />
<Columns>
<asp:BoundField DataField="MachineGroupID" HeaderText="MachineGroupID"
InsertVisible="False" ReadOnly="True" SortExpression="MachineGroupID" />
<asp:BoundField DataField="MachineGroupName" HeaderText="MachineGroupName"
SortExpression="MachineGroupName" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</asp:Panel>
so here i have a gridview where when i scroll the header row moves too.. i dont want that to happen..
It is not valid in W3C. It is an IE only thing. To do what you are looking for in a valid way would require you to run some JavaScript and fix your headers.
If you explain your desired outcome I am sure someone can help. I have made GridView headers look exactly like I want many times.
UPDATE: Here is a good article: http://www.dotnetcurry.com/ShowArticle.aspx?ID=255
When the gridview is rendered to html, the GridView1 ID is probably being rewritten.
you probably want something like:
top:expression(<%= GridView1.ClientID %>.offsetParent.scrollTop-2);
although this may get you what you want it's probably not the best form.
You are heavily advised against using CSS expressions, as they get executed on every event of the browser - including mouseMove. They also don't work on anything but IE.
I can't answer your question further due to lack of details of what you're trying to achieve.
If you're trying to fix it to the top of the viewport try:
.gridFixedHeader
{
background-color:white;
position:fixed;
top:20px; //optional
}
in the elements CSS
edit: just realised you look like you're styling a GridViews header so this will probably not work, try posting some of the Gridview generated HTML and what yo want done with it please
I have a list of objects called Activity and I want to display the date, type and notes for each and every one of these activities. This is the code I'm using.
<asp:GridView ID="gvTable" runat="server" AllowSorting="true" ShowHeader="true">
<Columns>
<asp:BoundField DataField="ActivityDate" HeaderText="Date"
HeaderStyle-CssClass="date" />
<asp:BoundField DataField="ActivityType" HeaderText="Type" />
<asp:BoundField DataField="ActivityNotes" HeaderText="Notes" />
</Columns>
<PagerSettings Position="Bottom" Mode="NextPrevious" PageButtonCount="5"
PreviousPageText="Older activities" NextPageText="Newer activities" />
</asp:GridView>
However, all of the attributes of each object is displayed in the header. How can I force it to display only the columns that I want to use?
gvTable.AutoGenerateColumns = false
or
<asp:GridView ID="gvTable" runat="server" AutoGenerateColumns="False" AllowSorting="true" ShowHeader="true">
should do the trick.
Set the attribute on your gridview:
AutoGenerateColumns="false"
You need to set the AutoGenerateColumns property on the grid to false.
Have you tried AutoGenerateColumns="false" in the gridview?