I have html that is dynamically created when I bind my gridview to a data source. What i'm curious about is how can i use css to access an individual column and even individual cells? If i was manually creating the html i would put an id attribute in there but i'm able to because it's dynamically created when the program begins. Here is the html out put generated
<div>
<table cellspacing="0" rules="all" border="1" id="ContentPlaceHolderHome_GridView1" style="border-collapse:collapse;">
<tr>
<th scope="col">Date</th><th scope="col">Project</th><th scope="col">Amount</th>
</tr><tr>
<td>1/1/2011 12:00:00 AM</td><td>CTS</td><td>1000.99</td>
</tr><tr>
<td>2/1/2011 12:00:00 AM</td><td>ABC Company</td><td>1001.99</td>
</tr><tr>
<td>1/3/2011 12:00:00 AM</td><td>CTS</td><td>1002.99</td>
</tr><tr>
<td>4/1/2011 12:00:00 AM</td><td>CTS</td><td>1003.99</td>
</tr>
</table>
</div>
The table has an id, so you can use that to access the elements inside that table.
For example, to select the second cell on the third row, you can use:
#ContentPlaceHolderHome_GridView1 tr:nth-child(3) td:nth-child(2)
The nth-child() selector is supported on all major browsers except IE8 and earlier.
My guess here would be that you would need to modify whatever is making the tables so that it adds some kind of class or id to those cells.
You can use the CssClass property to define a css class name for the controls.
Related
Problem: When creating a PDF from a HTML template using PuppeteerSharp if you have a table with lots of data, it will create a new page if the next row doesn't fit in the current one even when there is plenty of space to start the second row, see attached image. I need the second row to start right after instead of breaking into a new page.
What I have tried so far: I tried removing the <thead> tag and when I do that then it actually utilizes the whole space as I want but then it removes the feature where every page starts with a header which I need to keep due requirements I can't change.
Libraries used:
PuppeteerSharp
DOTLiquid
Question:
How can I keep the <thead> tag and keep puppeteer from starting the table row in a new page if there is still pace available? Maybe I can create my own table headers for each page without using <thead>?
My HTML is a .liquid template:
<html>
<body>
<table>
<thead>
<tr>
<th>Header 1</td>
<th>Header 2</td>
<th>Header 3</td>
<th>Header 4</td>
</tr>
</thead>
<tbody>
{%for item in MyData.Items%}
<tr>
<td style ="width: 120px">{{item.TesData}}</td>
<td style ="width: 120px">{{item.TesData2}}</td>
<td style ="width: 120px">{{item.TesData3}}</td>
<td style ="width: 220px">{{item.TesData4}}</td>//This column have lots of data
</tr>
{%endfor%}
</tbody>
</table>
</body>
</html>
I wanna make a list using
This is my code on listOfPeople.aspx:
<table id="listOfPeople" runat="server">
<tr id="rowOfPerson" runat="server">
<td id="person" runat="server">name of a person</td>
</tr>
</table>
I want to repeat the to make a list of people via c#:
<table>
<tr>
<td>Charles Bell</td>
</tr>
<tr>
<td>Jason Mc Allister</td>
</tr>
<tr>
<td>Mathew Anderson</td>
</tr>
</table>
I can see "rowOfPerson" on listOfPerson.aspx.cs but I dont know how to create new rows. Thanks.
Remove the table html in the aspx.
In your aspx.cs, write the entire table (including all the rows you want) so that it get rendered dynamically based on whatever your data source is.
This is just one of many ways, but i believe it is the simplest and quickest way for you to achieve this.
There are various ways...
Put this html in repeater control and assign the datasaource to it
<tr id="rowOfPerson" runat="server">
<td id="person" runat="server">name of a person</td>
</tr>
Use anyother ways like add table with runat server attribute... loop through data in code and add tr for that table for your data...
I have two gridviews in a aspx page, each bounded with similar data. Here is the screen shot.
The width of each column in the grid is defined in % and are the same for both the grids. Even then the output is not as expected, but slight variations in the column width. I need to make sure both the grids columns should appear same. Does any one know how to fix this (.net/javascript). Thanks for the help in advance.
while building the table set the class for each column individually, and then set the width in CSS
<table style="width: 100%;">
<tr>
<td class='firstCol'></td>
<td class='secCol'></td>
<td class='thrdCol'></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
and style
<style type="text/css">
.firstCol
{
width: 10%;
}
.secCol
{
width: 20%;
}
.thrdCol
{
width: 30%;
}
</style>
You could use CSS and classes. For example on table rows you would like to keep the same you can write
<tr class="specialrow">
or for certain cells
<td class="specialcell">
You would write the css like this
.specialcell
{
width:100px;
}
Perhaps a jsfiddle would help further?
A way to ensure both tables are equals is to use just one table. It's not the best solution, but it will get the job done. In order to put the separation between them, you will need to put a <tr colspan="14"><td> </td></tr> between them.
Again, it's not the best solution. If from your business perspective it makes sense to have it this way (the tables shows information about the same thing and makes sense to think of it as a whole), then you can use it without guilt.
Anyway... looking for some information about having several s and s in the same table lead me to this answer that has a lot of useful information about how to do it: Multiple thead/tbody design
you may try using the css table-layout:fixed in both tables and then specify the widths for each column in the css.
Hi I just want to start by saying I'm very new to LINQ and .NET. I am trying to grab a set of data using a linq query and populate the data as HTML table headers inside my listview. I can't hard code the headers since the headers are different for each organization I run the query on.
The following is an example of a query where im getting all the profile names for an organization and I would like to have each profile as a table header in my listview:
var organizationProfiles =
(from profile in orgWorkProfiles.WorkProfiles
join org in orgWorkProfiles.Organizations on new { profile.OrganizationId } equals new { OrganizationId = org.Id }
where org.Name == ddlOrg1.SelectedItem.ToString()
select profile.Name);
and this is what my List view looks like in the presentation page:
<asp:ListView ID="ltv_main" runat="server">
<LayoutTemplate>
<table id="reportTable" width="100%">
<thead class="headRowDetails" >
<th class="headRowDetails">Profile1</th>
<th class="headRowDetails">Profile2</th>
<th class="headRowDetails">Profile3</th>
<th class="headRowDetails">Profile4</th>
<th class="headRowDetails">Profile5</th>
</thead>
<tbody>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr class="normRowDetails">
<td>Eval some data here</td>
<td>Eval some data here</td>
<td>Eval some data here</td>
<td>Eval some data here</td>
<td>Eval some data here</td>
</tr>
</ItemTemplate></Listview>
As you guys can see I'm currently hard coding the table headers in the but this is not what is required and I would like to be able to make the headers dynamic. Can someone please help me figure this issue out? If it is not possible to dynamically create headers in list view is there an alternative solution to this? Your help is greatly appreciated. Thanks in advance!
You can data bind the layout template of list view, which I have done but thats probably slightly more complex if you are relatively new.
How about separating the header from the list view that you are using. Use the list view for binding the items only and have a literal control write the header separately. You can use css to position them accordingly.
According to the new 4.0 framework overview, one should be able to add the attribute RenderOuterTable="false" to a control that supports the attribute and see CSS friendly code be spit out - in other words no HTML tables.
To test this, I threw a login control into a basic fresh webpage with the following code:
<asp:Login ID="Login1" runat="server" RenderOuterTable="false"></asp:Login>
The result? Crappy HTML table output, which supposedly doesn't happen with this attribute set to false. Here is the output:
<table cellpadding="0">
<tr>
<td align="center" colspan="2">Log In</td>
</tr>
<tr>
<td align="right"><label for="MainContent_Login1_UserName">User Name:</label></td>
<td>
<input name="ctl00$MainContent$Login1$UserName" type="text" id="MainContent_Login1_UserName" />
<span id="MainContent_Login1_UserNameRequired" title="User Name is required." style="visibility:hidden;">*</span>
</td>...
Hopefully you get the point. How can these controls be stopped from outputting tables? This is super annoying.
Convert the Login control to a template. It will give you full control of the layout without a table in sight (including the outer table which previously got generated even if you used the template option).
It doesn't say that it will get rid of all tables, just that it will get rid of the extra outer table that was used to apply styles. Try getting rid of the property and note the extra table that wraps the one you quoted above.