I have a GridView in a div on my HTML-Code like this:
<div class="container" style="width: 80%; height: 800px; overflow: scroll">
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="40" AllowSorting="True"
AutoGenerateSelectButton="True" EnableModelValidation="False" OnPageIndexChanging="GridView1_SelectedIndexChanged"
AutoGenerateColumns="false" OnSorting="GridView1_Sorting" CssClass="mydatagrid"
PagerStyle-CssClass="pager" HeaderStyle-CssClass="headerGrida1" RowStyle-CssClass="rows"
ShowHeaderWhenEmpty="true" Font-Size="X-Small" ForeColor="Black">
The div makes it already scrollable but I also need a fixed Header of the Grid. What I tried with CSS doesnt work out...
I tried thi for the container:
.container
{
overflow: scroll;
}
.container table th
{
position: relative;
}
.container table tbody
{
overflow: hidden;
}
</style>
And this with the Gird:
.headerGrida1
{
background-color: #4a708b;
font-family: Calibri;
color: White;
border: none 0px transparent;
height: 25px;
text-align: center;
font-size: 16px;
position: relative;
}
But nothing seems to work...
Below is the good solution that will fixed header with vertical and horizontal scroll bars
http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html
Isn't there a way to do t just with CSS?
That's what I get when switching Position=absolute or = fixed.
The only thing is that it has to be above the first row otherwise nobody would see the rwos anymore.
Maybe there is simple solution, too?
Another Problem is that he width of the header is now different to the columns
Related
I want the asp gridview to show responsive behaviour like the html table does with the no-more-table css style as
seen here http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table.
Is there a way to achieve it.
I have tried one way before, which is to replace my gridview with the html table and apply no-more-table style from
code behind. But I don't want to do this as I want to all the features offered by the asp:GridView.
I have written custom css to achieve this feature. To use my code follow the below steps,
Step1: Enclose your GridView inside a section with Id as no-more-gridView
as below
<section id="no-more-gridView">
<asp:GridView..>
.
</asp:GridView>
</section>
Step2: Assign a data-title attribute to each of your cells from code behind (inside the RowDataBound function) like below,
e.Row.Cells[0].Attributes["data-title"] = "Col1Name";
e.Row.Cells[1].Attributes["data-title"] = "Col2Name";
e.Row.Cells[2].Attributes["data-title"] = "Col3Name";
.
.
Step3: Finally include my custom style given below. Use media query to apply the style at whatever screen size you wish it to come to effect and that should pretty much do the trick.
/* Author : Vinay
Description: Responsive GridView
*/
/* Force gridview to not be like gridview anymore */
#no-more-gridView table,
#no-more-gridView thead,
#no-more-gridView tbody,
#no-more-gridView th,
#no-more-gridView td,
#no-more-gridView tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-gridView .table_column_head > * {
display:none;
}
#no-more-gridView tr { all: revert;border: 2px solid #ccc;height:auto !important;}
#no-more-gridView td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
padding-bottom: 1em;
}
#no-more-gridView td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-gridView td:before { content: attr(data-title); }
I am trying to set some styles for objects that are within a table but the problem is that the properties are not being applied to the actual objects.
the .tblData works fine but the label and textbox properties are supposed to be or any ASP.net label or textbox that appears within the table but the CSS doesnt get applied to them.
.tblData {
border: solid;
border-width: 1px;
height: 200px;
color: rgb(45,40,128);
background-color: white;
width: 100%;
border-radius:3px;
margin-top:3px;
}
/*Class for the labels*/
.tblData label {
width: 13%;
color:black;
border-radius:3px;
font-family:verdana;
border-radius:3px;
border-color:rgba(45,40,128,0.75);
border-width:1px;
}
/*Class for the data textboxes*/
.tblData textbox {
border-color: rgba(45,40,128,0.75);
border-width: 1px;
background-color:rgba(45,40,128,0.10);
font-family:Verdana;
border-radius:3px;
}
This is the HTML (can't show all of it because the table is massive):
<table id="tblAddress" class="tblData">
<tr>
<td class="auto-style3">
<asp:Label ID="lblACNO" runat="server" Text="ACNO" CssClass="Datalabelcolumn"></asp:Label></td>
<td class="auto-style2">
<asp:TextBox ID="txtACNO" runat="server" CssClass="autosuggest" Width="20%" ToolTip="This is a test tooltip"></asp:TextBox>
</td>
In ASP.Net, server tag<asp:Label> will be rendered as html <span>.
for <asp:TextBox> it is <input type='text'>
So please change your css selector
from
.tblData label {}
.tblData textbox{}
to
.tblData span{} or .tblData .Datalabelcolumn{}
.tblData input[type="text"]{} or .tblData .autosuggest {}
You are applying different css class to your Lable and TextBox inside your table (i.e Datalabelcolumn and autosuggest). So it will only apply those properties. Remove them and it will work. Or mention whatever style you need in your "Datalabelcolumn" and "autosuggest" css class for those controls.
add class="tblData" to td instead of table
basic demo
<td class="tblData">
<label>this is a label</label>
<textbox>this is textbox</textbox>
</td>
I've an aspx page and I want to disable that page dynamically on a IF condition.
Here, By the word 'Disable' I mean an exactly same condition when a pop-up or a Radwindow opens and the Parent page gets disabled and the user is not able to do anything to the parent page until the pop-up gets closed.
For Ajax or Rad Controls, I can set the 'Modal' attribute of the control to true to make Parent page disabled. But what to do for my required condition.
Any suggestion would be appreciated.
You achieve the disabled effect by adding a div that covers the page using Javascript or JQuery.
var documentHeight = $(document).height();
$("body").append("<div style='z-index: 100; background: lightgray; opacity: 0.5; width: 100%; height: " + documentHeight + "px; position: absolute; left: 0; top: 0;'></div>");
The caveat is that this isn't "secure", if that's what you're after (the user could "hack" the disabling pane using Firebug or similar).
You can use ModalPopupExtender, take a look at my sample. I use this concept in all my sites and works great for all types of browsers.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ConfirmDialogUserControl.ascx.cs"
Inherits="GP.Solutions.UserControls.ConfirmDialogUserControl" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script type="text/javascript">
var _source;
var _popup;
function ShowConfirmDialog(source, message) {
this._source = source;
this._popup = $find('mdlPopup');
var displayDiv = document.getElementById('<%= ConfirmMessageDiv.ClientID %>');
displayDiv.innerText = message;
displayDiv.textContent = message;
this._popup.show();
}
function ConfirmDialogOk() {
this._popup.hide();
__doPostBack(this._source.name, '');
}
function ConfirmDialogCancel() {
this._popup.hide();
this._source = null;
this._popup = null;
}
</script>
<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" style="display:none;">
<div class="modalHeader">
<div id="DivImage" runat="server"> </div>
<asp:Label ID="TitleLabel" runat="server" Text="" CssClass="modalTitle"></asp:Label>
</div>
<asp:Panel ID="pnlControls" runat="server" CssClass="modalContent">
<div id="ConfirmMessageDiv" runat="server"></div>
</asp:Panel>
<div class="modalControlsContainer">
<asp:Button ID="btnConfirmDialogOk" runat="server" CssClass="modalButton" Text="" />
<asp:Button ID="btnConfirmDialogCancel" runat="server" CssClass="modalButton" Text="" />
</div>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" behaviorid="mdlPopup" runat="server" TargetControlID="pnlModal"
PopupControlID="pnlModal" OkControlID="btnConfirmDialogOk" OnOkScript="ConfirmDialogOk();" CancelControlID="btnConfirmDialogCancel"
OnCancelScript="ConfirmDialogCancel();" DynamicServicePath="" Enabled="True" BackgroundCssClass="modalBackground" DropShadow="true">
</asp:ModalPopupExtender>
Here is css code used in this case:
.modalBackground
{
background-color:Black;
filter:alpha(opacity=60);
opacity:0.6;
}
.modalPopup
{
background-color:White;
border: 1px solid green;
width:280px;
padding: 10px 10px 10px 10px;
}
.modalPopupFullWidth
{
background-color:White;
border: 1px solid green;
padding: 10px 10px 10px 10px;
}
.modalHeader
{
width:auto;
border: 1px solid silver;
height:25px;
background-color:#F2F2F2;
}
.modalTitle
{
color:Black;
font-size: 11px;
font-weight:bold;
position:relative;
left:30px;
top:-20px;
}
.modalImageInformation
{
background-image: url('information.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageWarning
{
background-image: url('warning.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageError
{
background-image: url('error.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageQuestion
{
background-image: url('question.png');
background-repeat: no-repeat;
width:26px;
height:26px;
}
.modalImageSearch
{
background-image: url('search.png');
background-repeat: no-repeat;
width:26px;
height:26px;
}
.modalContent
{
padding-top:10px;
padding-bottom:0px;
}
.modalControlsContainer
{
margin-left:auto;
margin-right:auto;
text-align:center;
padding-top:5px;
}
.modalButton
{
background-image: url('button-113x28.png');
background-color:transparent;
width:113px;
height:28px;
border: 0px none transparent;
color: White;
font-size:11px;
cursor:pointer;
margin-top:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.hidden { display: none; }
.unhidden { display: block; }
Above is an image of the rendered css when I changed the bg color of .speech_bubble_content to red. The bubble isn't displaying properly.
I am using the following code to retrieve data from a database and bind it to a repeater. I am also using css to display a speech bubble around what I want to display. I noticed that data is displayed when I place a label outisde of the div - and nothing is retrieved when the label is inside the div - in this case creation date is displayed, but story is omitted. Why is this happening? Thanks for your help. I believe this is caused by css.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="speech_bubble">
<b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
<div class="speech_bubble_content">
<p>
<asp:Label ID="story" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Story") %>'></asp:Label>
</p>
</div>
<b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
<em></em><span></span>
</div>
<asp:Label ID="user" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CompanyRole") %>'></asp:Label> <asp:Label ID="date" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CreationDate") %>'></asp:Label>
</ItemTemplate>
</asp:Repeater>
Here's the CSS:
.speech_bubble{
background: transparent;
margin:10px 0;
}
.speech_bubble_content{
display:block;
background:#fff;
border:3px solid #ddd;
border-width:0 3px;
}
.speech_bubble p{
padding:0.5em 0;
color:#000;
margin:0 15px;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
display:block;
overflow:hidden;
font-size:0;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
height:1px;
}
.sb4, .sb5, .sb6, .sb7{
background:#fff;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
.sb1 {margin:0 8px; background:#ddd;}
.sb2 {margin:0 6px; background:#ddd;}
.sb3 {margin:0 4px; background:#ddd;}
.sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.sb6 {margin:0 2px; background:#fff; border-width:0 3px;}
.sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;}
.speech_bubble em{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:12px solid #ddd;
border-left:12px dotted transparent;
border-right:12px dotted transparent;
margin-left:50px;
}
.speech_bubble span{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #fff;
border-left:10px dotted transparent;
border-right:10px dotted transparent;
margin-left:52px;
margin-top:-15px;
}
Yes do as rene suggest. View the source, HTML copy it and the CSS and save it to http://jsbin.com/ and send the Link back here so we can see the REAL html that .NET generates.
You might also just want to have
<%#DataBinder.Eval(Container.DataItem, "Story") %>
instead of using a asp:label as it will add unwanted HTML tags.
One of gridview's column is a "Content" column that can have few lines of text (it can be literal, textbox or label ).
In "default" mode i want it to show only the first line and a link button: "(more)" or "(read)".
Clicking on this link should expand the column and display full content.
What is the best way to do this?
Selecting first 10 characters of content text and using it as your link's text is better aproach. This will reduce size of data that retrieved from database like that :
SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content
FROM ContentTable;
Then you can use template column for this column that includes a label and a link. Lbel for the description text, link for the details.
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label
Text='<%# Eval("Content") %>'
runat="server"/>
<a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a>
</ItemTemplate>
</asp:TemplateColumn>
This will help you.
http://www.asp.net/community/control-gallery/Item.aspx?i=1465
try this. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx
Use the power of CSS!
Place this inside your gridview row. It will naturally push out the row to the height of your content, or the amount of rows required.
<div class="toggle">
<div class="toggle-header">
Toggle!
</div>
<div class="toggle-height">
<div class="toggle-transform">
<p>2nd line of text</p>
<p>3rd line</p>
<p>4th line</p>
<p>etc</p>
</div>
</div>
</div>
And use this CSS...
body {
font-family: sans-serif;
}
.toggle {
position: relative;
border: 2px solid #333;
border-radius: 3px;
margin: 5px;
width: 200px;
}
.toggle-header {
margin: 0;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor: pointer;
}
.toggle-height {
background-color: tomato;
overflow: hidden;
transition: max-height .6s ease;
max-height: 0;
}
.toggle:hover .toggle-height {
max-height: 1000px;
}
.toggle-transform {
padding: 5px;
color: white;
transition: transform .4s ease;
transform: translateY(-100%);
}
.toggle:hover .toggle-transform {
transform: translateY(0);
}
You may want to disguise the "toggle" with a textbox of your "(more)" line to expand the rest.
Let us know if it worked.