I have a gridview with certain boxes that are highlighted in green. These boxes should fill the entire box, but I can't seem to trash this 1px border around the edges. I'm using IE7, but FF does it too.
Rendered html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" /><link href="App_Themes/Contoso/Style.css" type="text/css" rel="stylesheet" /></head>
<body>
<form name="form1" method="post" action="GridViewColoring.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJODIyMTgxMzQxZBgBBQh0ZXN0R3JpZA88KwAMAQgCAWR6Qz5BuXEoalr4HjsTfYqqKPrdwd2ICIXpeNacwdi46w==" />
</div>
<div>
<div>
<table class="cssTable" cellspacing="0" rules="all" border="1" id="testGrid" style="border-collapse:collapse;">
<tr>
<th scope="col">Description</th><th scope="col">Serial#</th>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl02_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl02_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;height:100%;width:100%;">0</span>
</td>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl03_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl03_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;background-color:#CCFFCC;height:100%;width:100%;">1000</span>
</td>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl04_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl04_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;background-color:#CCFFCC;height:100%;width:100%;">2000</span>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
test case
CSS
body {
}
.NoMargin
{
margin:0 0 0 0;
}
.NoPadding
{
padding:0 0 0 0;
}
.BgColor
{
background-color:Aqua;
}
.MaxHeightAndWidth
{
height:100%;
width:100%;
}
.NoBorder
{
border:0px;
}
ASP.NET
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewColoring.aspx.cs" Inherits="WebApplication1.GridViewColoring" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView id="testGrid" runat="server" CssClass="cssTable"
AutoGenerateColumns="False"
OnRowDataBound="SetStatusColors" >
<Columns>
<asp:TemplateField HeaderText="Description" SortExpression="description" ItemStyle-CssClass="NoMargin NoPadding">
<ItemTemplate>
<asp:Label ID="descriptionLbl" runat="server" Text='<%# Bind("description") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="Smaller" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Serial#" SortExpression="serial">
<ItemTemplate>
<asp:Label ID="serialNumberLbl" runat="server" Text='<%# Bind("serial") %>' CssClass="NoMargin NoPadding MaxHeightAndWidth NoBorder" Height="100%" Width="100%"></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="Smaller" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C# backend
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication1
{
public partial class GridViewColoring : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
testGrid.DataSource = MakeTable();
testGrid.DataBind();
}
protected void SetStatusColors(object sender, GridViewRowEventArgs e)
{
for (int i = 0; i < testGrid.Rows.Count; i++)
{
string serialNumber = ((Label)testGrid.Rows[i].FindControl("serialNumberLbl")).Text;
if (serialNumber != "0")
{
//GREEN HIGHLIGHTS
((Label)testGrid.Rows[i].FindControl("serialNumberLbl")).BackColor = System.Drawing.Color.FromArgb(204, 255, 204);
}
testGrid.Rows[i].BackColor = System.Drawing.Color.Yellow;
}
}
//mock db
private DataSet MakeTable()
{
var table = new DataTable("ParentTable");
DataColumn column;
DataRow row;
// Create new DataColumn, set DataType,
// ColumnName and add to DataTable.
column = new DataColumn();
column.DataType = System.Type.GetType("System.Int32");
column.ColumnName = "serial";
column.ReadOnly = true;
// Add the Column to the DataColumnCollection.
table.Columns.Add(column);
//// Create second column.
column = new DataColumn();
column.DataType = System.Type.GetType("System.String");
column.ColumnName = "description";
column.AutoIncrement = false;
column.Caption = "Description";
column.ReadOnly = false;
column.Unique = false;
// Add the column to the table.
table.Columns.Add(column);
// Instantiate the DataSet variable.
var dataSet = new DataSet();
// Add the new DataTable to the DataSet.
dataSet.Tables.Add(table);
// Create three new DataRow objects and add
// them to the DataTable
for (int i = 0; i <= 2; i++)
{
row = table.NewRow();
row["serial"] = i * 1000;
row["description"] = "Some desc " + DateTime.Now;
table.Rows.Add(row);
}
return dataSet;
}
}
}
Update
Changed the Serial# template's itemstyle and it fixed the problem. I have no idea why, but thanks to your tips, I was able to reduce the problem down enough to try it:
<ItemStyle Font-Size="Smaller" CssClass="NoMargin NoPadding" />
Try setting border-collapse: collapse; on the cssTable css class.
Okay I was able to get it working. I took the css classes off of the first template item and created the following css.
table.cssTable
{
border-collapse: collapse;
}
table.cssTable tr td
{
background: Yellow;
font-size:Smaller;
margin: 0;
padding: 0;
}
By the way, you should be able to get rid of the ItemStyle with font-size as well with this CSS.
I've created a fiddle but can't really see the problem I'm afraid - http://jsfiddle.net/5rBYb/1/
You might want to try adding this to your CSS though, which will set the borders to a single pixel (which I suspect is what's causing your problem).
table, th, td { border: 1px solid #000; }
Just change it to border: 0 if you want to hide borders.
Related
In my page I have a large image and set of small unit images. the large image will be loaded on page load. but when i click on small images it will get enlarge and get displayed in place of large image. the small images are displaying on page . but it has no effect on clicking them
here is my code
<div class="invDetailImage">
<img id="imgenlarge" src="" runat="server" alt="" align="middle" style="max-height:380px; max-width:579px; vertical-align:middle;"/>
<asp:Label runat="server" ID="lblerr" Visible="false" style="max-height:380px; max-width:579px; vertical-align:middle;font-size:large;"></asp:Label>
</div>
<!-- SMALL IMAGES -->
<div class="invDetailPhotoBox" runat="server" id="photobox">
<asp:Label runat="server" ID="lblphotos" Text="Select a photo below to view in the window above:"></asp:Label><br />
<asp:Repeater runat="server" ID="rptrinventoryphotos" onitemdatabound="rptrinventoryphotos_ItemDataBound">
<ItemTemplate>
<img id="imgInventory" src="" runat="server" alt='<%#Eval("ImagePath")%>' style="display:none;" />
<div onclick="large('<%#Eval("ImagePath")%>')" style="float:left;clear:none; margin-left:-12px;">
<asp:Image ID="Image1" Visible="true" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<script type="text/javascript"> function large(src) {
var str=src; document.getElementById("ctl00_ContentPlaceHolder1_imgenlarge").src = (str);
}
function loading(img) { img.src = "images/loading.gif"; }
</script>
protected void rptrinventoryphotos_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
HtmlImage img1 =(HtmlImage) e.Item.FindControl("imgInventory");
Image img = (Image)e.Item.FindControl("Image1");
img.ImageUrl = "http://localhost:22525/DWLive/ImageResizeHandler.ashx?imgPath=" + img1.Alt + "&width=75&height=56";
img.Style.Add("margin-left", "-12px");
img.Style.Add("background-image", "url('images/loading9.gif')");
img.Style.Add("background-repeat", "no-repeat");
img.Style.Add("background-position", "center left");
//img.Attributes.Add("onclick", "large('" + img1.Alt + "')");
string[] a = img1.Alt.Split((#"/").ToCharArray());
}
can anyone help please? thanks.
The problem was in JavaScript. I changed it to:
<script type="text/javascript">
function large(link) {
var str = link;
}
document.getElementById("ctl00_ContentPlaceHolder1_imgenlarge").src = (str);
I have a question about IIS and ASP.Net.
I migrated to a new server, in wich I have to run an Upload/Download Application. This application was running good in an old server, now I´m getting some parsing error, that I don´t get it where it comes.
It works when I try to donwload some files, also I have a connection and the login system works.But if I try to upload some files, then come this parsing error. At the beginning I was thinking it have to be some permissions issues, but after I added some user privileges it doesn´t make some sense.
XML Parsing Error:
no element found Location: http://www.mywebsite.com/DownloadManager/DMUpload.aspx?folderId=22767&guid=271334658&cancel=1 Line Number 1, Column 1:
And this is my upload.aspx file:
<%# Page language="c#" Codebehind="DMUpload.aspx.cs" AutoEventWireup="false" Inherits="DownloadManager.DMUpload" EnableSessionState="ReadOnly"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DMUpload</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="StyleSheet.css" type="text/css" rel="stylesheet">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" onsubmit="uploadpop(this);" method="post" encType="multipart/form-data"
runat="server">
<TABLE class="navigation" id="tbNavigation" cellSpacing="0" cellPadding="0" width="100%"
border="0">
<TR>
<TD align="right"><asp:panel id="Panel4" runat="server" CssClass="panelButtons" Width="800px">
<asp:button id=btSave tabIndex=3 runat="server" CssClass="butt" Text="Speichern"></asp:button>
<asp:button id=btBack tabIndex=3 runat="server" CssClass="butt" Text="Zurück"></asp:button>
<asp:button id=btLogout tabIndex=3 runat="server" CssClass="butt" Text="Logout"></asp:button>
</asp:panel></TD>
</TR>
<tr>
<TD align="left"><asp:panel id="Panel1" runat="server" CssClass="panelBreadcrumb"></asp:panel><asp:label id="lbBreadCrumb" runat="server" Font-Bold="True"></asp:label></TD>
</tr>
</TABLE>
<asp:label id="lbWarten" style="Z-INDEX: 103; LEFT: 24px; POSITION: absolute; TOP: 248px" runat="server"
Height="40px" ForeColor="Red" Font-Size="Medium" Width="536px">bitte warten...</asp:label><asp:panel id="panelUpload" style="Z-INDEX: 104; LEFT: 24px; POSITION: absolute; TOP: 96px"
runat="server" Height="104px" Width="528px">
<asp:label id=Label1 runat="server" Width="304px">Dateiauswahl:</asp:label><INPUT
id=uploadFile1 style="WIDTH: 536px; HEIGHT: 22px" type=file size=70
runat="server"> <INPUT id=uploadFile2 style="WIDTH: 536px; HEIGHT: 22px"
type=file size=70 runat="server"> <INPUT id=uploadFile3
style="WIDTH: 536px; HEIGHT: 22px" type=file size=70 runat="server"> <INPUT
id=uploadFile4 style="WIDTH: 536px; HEIGHT: 22px" type=file size=70
runat="server"> <INPUT id=uploadFile5 style="WIDTH: 536px; HEIGHT: 22px"
type=file size=70 runat="server">
</asp:panel></form>
<script language="javascript">
document.getElementById("lbWarten").style.visibility = "hidden";
function uploadpop(inForm)
{
document.getElementById("lbWarten").style.visibility = "visible";
if(inForm.uploadFile1 != null)
{
if( inForm.uploadFile1.value !=""
|| inForm.uploadFile2.value !=""
|| inForm.uploadFile3.value !=""
|| inForm.uploadFile4.value !=""
|| inForm.uploadFile5.value !="")
{
strUniqueID = Math.floor(Math.random() * 1000000) * ((new Date()).getTime() % 1000);
thePos = inForm.action.indexOf("?");
/*
if (thePos >= 0)
inForm.action = inForm.action.substring(0, thePos);
inForm.action += "?guid=" + strUniqueID + "&cancel=1";
*/
if (thePos >= 0)
inForm.action += "&guid=" + strUniqueID + "&cancel=1";
else
inForm.action += "?guid=" + strUniqueID + "&cancel=1";
window.open("DMProgressBar.aspx?guid=" + strUniqueID,"","toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0,height=275,width=600,top=70,left=100");
}
}
inForm.submit();
return true;
}
function ClearInput()
{
node = document.getElementById("panelUpload");
if(node != null)
{
// node.removeNode(true);
node.parentNode.removeChild(node);
}
return true;
}
</script>
</body>
</HTML>
I really don´t get, why it doesn´t work.
The aspx upload have to send the file in to a temporary folder called uploads and after the file is uploaded, it have to be sended in to an oder folder wich is reserved depending of the user permissions. I noticed that the file is uploaded and save it just in the temporary folder, but then it nothing happends and I recive, like I say, a parsing error.
I don't know what could be the problem, I really need some help here.
Just an extra thing, if I try to run the aplication under localhost, i get nothing just the Homepage of the website.
it seems below reasons.
The folder where the applicaiton was located did not haev the group "Everyone" on read only mode. After adding "Everyone" it worked fine!!
please check article for more details.
http://forums.asp.net/t/1004395.aspx?What+causes+this+XML+Parsing+Error+no+element+found
http://www.c-sharpcorner.com/Forums/Thread/216997/how-to-resolve-xml-parsing-error-no-element-found.aspx
I wish to group some data by month (stored in an SQL Database), with collapsible DIVs, no doubt with jQuery. I don't particularly want to use to GridView, as I'd like to stay away from tables for simplicity when writing the jQuery.
What is the best method to do this in ASP.NET, which control would I use?
Please see the following example, for an idea of what I am trying to describe:
I've created a project which displays data by month using nested repeaters, it's uploaded on Google Docs (just click File->Save to download the .zip).
Here's a brief overview of how it works:
Assuming you have a simple Orders table in the db with the following columns
OrderId
Product
Quantity
DateOfSale
Process
Execute a stored procedure to get the months for a given year (I used EntityFramework functions, you could change this to ADO.NET,LINQ etc)
Bind the returned months to a label in the master repeater(These will be your headings)
Handle the OnItemDataBound event of the master repeater, this event runs every time an item is bound to the repeater.
Inside OnItemDataBound execute a stored procedure to get all the records for the specific month and year and simply bind the returned data to the child repeater
Add little jQuery to show and hide divs and you're set.
Code
Stored procedures:
CREATE PROCEDURE dbo.GetMonthsByYear
#Year INT
AS
BEGIN
SELECT DISTINCT DATENAME(Month,DateOfSale) AS [Month] FROM Orders
WHERE Year(DateOfSale) = #Year
END
CREATE PROCEDURE dbo.GetOrdersByMonth
#Month NVARCHAR(15),
#Year INT
AS
BEGIN
SELECT * FROM Orders
WHERE (Year(DateOfSale) = #Year) AND DATENAME(MONTH,DateOfSale) = #Month
END
ASPX:
<head runat="server">
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var showHide;
$(document).ready(function () {
showHide = function (control) {
var parent = $(control).next();
var display = parent.css('display');
if (display == "none") { parent.fadeIn('slow'); }
else { parent.fadeOut('slow'); }
};
});
</script>
<style type="text/css">
.detail
{
height:300px;
display:none;
width: 100%;
border: 1px solid black;
}
.header
{
vertical-align: top;
padding: 3px;
height: 30px;
background: black;
color: White;
font-weight: bold;
}
</style>
<title>Nested Repeater</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Select year: <asp:TextBox ID="txtYear" runat="server" /><br />
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="Search" /><br />
<asp:Repeater ID="masterRepeater" runat="server" OnItemDataBound="ItemDataBound">
<ItemTemplate>
<div id='<%# Container.DataItem %>' class="header" onclick="showHide(this);">
<asp:Label ID="lblMonth" runat="server" Text='<%# Container.DataItem %>' />
</div>
<div class="detail">
<asp:Repeater ID="detailRepeater" runat="server">
<HeaderTemplate>
<span style="text-decoration: underline">Product</span><br />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Bind("Product") %>' />
<asp:Label ID="lblQuantity" runat="server" Text='<%# Bind("Quantity") %>' />
<asp:Label ID="lblDateOfSale" runat="server" Text='<%# Bind("DateOfSale") %>' /><br />
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
Code behind:
protected void Search(object sender, EventArgs e)
{
int year = 0;
if (Int32.TryParse(txtYear.Text, out year))
{
orderEntities orders = new orderEntities();
List<string> months = orders.GetMonthByYear(year).ToList();
masterRepeater.DataSource = months;
masterRepeater.DataBind();
}
}
protected void ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int year = 0;
if (Int32.TryParse(txtYear.Text, out year))
{
Label lblMonth = e.Item.FindControl("lblMonth") as Label;
if (lblMonth != null)
{
string month = lblMonth.Text;
Repeater detailRepeater = e.Item.FindControl("detailRepeater") as Repeater;
if (detailRepeater != null)
{
orderEntities orders = new orderEntities();
var ordersByMonth = orders.GetOrdersByMonth(month, year).ToList();
detailRepeater.DataSource = ordersByMonth;
detailRepeater.DataBind();
}
}
}
}
}
Result:
For first item I want to use the following <div>:
<div class="six columns">
<a href="">
<img src="" />
<h3>Israeli Embassy Promotes Peace</h3>
<h4>At a time when Israel is facing threats of...</h4>
</a>
</div>
And This for rest i want to use following <div>:
<div class="six columns">
<ul>
<li><a href="">
<h3>This is the first alskdjlak s</h3>
</a></li>
<li><a href="">
<h3>asd sad asd asd asdasdasdas d</h3>
</a></li>
<li><a href="">
<h3>dsad asd asd asd asd asd asd</h3>
</a></li>
</ul>
</div>
How do i do it?
You first use one integer on the code behind, that is start with 1.
Then on repeater you check this value and you go like:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<% if (iCounter == 1) { %>
<br />First line id: <%# GetID(Container.DataItem) %>
<% } else { %>
<br />Next lines id: <%# GetID(Container.DataItem) %>
<% }
iCounter++;
%>
</ItemTemplate>
</asp:Repeater>
and on code behind:
public int iCounter = 1;
List<int> oMainIds = new List<int>();
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < 10; i++)
{
oMainIds.Add(i);
}
Repeater1.DataSource = oMainIds;
Repeater1.DataBind();
}
public int GetID(object oItem)
{
return (int)oItem;
}
Please note, for the test, here I place and 10 data lines. This example renders:
First line id: 0
Next lines id: 1
Next lines id: 2
Next lines id: 3
Next lines id: 4
Next lines id: 5
Next lines id: 6
Next lines id: 7
Next lines id: 8
Next lines id: 9
Just an update to Aristos answer, without the code-behind method to get the ID.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<asp:Panel ID="pnlFirst" runat="server" Visible="<%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) ==0 %>">
<br />First Item
</asp:Panel>
<asp:Panel ID="pnlRest" runat="server" Visible="<%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) !=0 %>">
<br />
Item: <%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) %>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
and in code behind
List<int> oMainIds = new List<int>();
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < 10; i++)
{
oMainIds.Add(i);
}
Repeater1.DataSource = oMainIds;
Repeater1.DataBind();
}
Wrap your divs in PlaceHolder controls, and set the visibility of the PlaceHolders in the OnItemCreated event of the repeater using e.Item.ItemIndex to determine if the current item is the first one or not.
Or make them server-side divs (with runat=server) and set the visibility of the divs directly in the sme way
Use CSS.
.six_columns ul li
{
/* Item style */
}
.six_columns ul li:first-child
{
/* First item style */
}
There are also methods for editing content via CSS.
I am trying to add all items from a listbox to list(.cs page).I added items to listbox using javascript.Now LstScan.Items.Count return zero always.I can't add items to listbox.Listbox shows values.but problem happens in my .cs file.
here is my code;
Html and javascript Code is:
<script type="text/javascript">
function displayKeyCode_demo(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if (code == 13) {
var textbox = document.getElementById("<%=TextBox1.ClientID%>")
var listbox = document.getElementById("<%=LstScan.ClientID%>")
var newOption = document.createElement("Option");
newOption.value = textbox.value;
newOption.innerHTML = textbox.value;
listbox.add(newOption);
}
}
</script>
<div>
<table cellspacing="3px" style="margin: 10px auto 3px 85px;">
<tr>
<td width="150px">
<asp:TextBox ID="TextBox1" runat="server" onkeypress="displayKeyCode_demo(event)"></asp:TextBox>
</td>
<td width="200px">
<asp:ListBox ID="LstScan" runat="server" Height="200px" Width="150px" AppendDataBoundItems="True" AutoPostBack="True" >
</asp:ListBox>
</td>
</tr>
</table>
</div>
here is my code behind code:
List<int> LstSOnum = new List<int>();
foreach (ListItem item in LstScan.Items) {
LstSOnum.Add(int.Parse(item.Value));
}
You can try with Text
LstSOnum.Add(int.Parse(item.Text));