How to use table instead of gridview? - c#

I dont know if the my question is good or bad or duplicate but I really want to ask you a favor.
My designer gave me grid design using html tables which looks quite handsome but when I use the same css classes in asp gridview it totally looks different.
Additional Info: In my project I have used Telerik grids. I have tried applying all the css at that too but of no use.
I cant change the designer css because its for all our company.
Now at last I want to use the same table as designer gave me and use it as grid but i really dont know how to fill it from datatable?

1. GridView generates/renders code in which it is difficult to impossible to modify.
2. I would stay away from Telerik as well.
3. Use Bootstrap CSS, you should be very happy with bootstrap css framework as you will get that look above very easily.
With Bootstrap you would use classes like class=table table-striped and you effectively have a nice grid with alternating row colors just like I see in the image that you posted.
With ASP.NET , use Nuget and install Bootstrap. Reference in Masterpage or layout.
I assume that you have styles that overwrite what your designer gave to you. Perhaps also if you are using THEIR stylesheets, make sure to overwrite the default styles. Either OMIT the style reference in master page etc... or place their stylesheet references below the default in say a asp.net web forms or mvc application. ( I assume web forms with masterpage since you are saying Gridview).

You can use ListView to include components. here is the example code for ListView.
<asp:ListView ID="ListView1" GroupPlaceholderID="group" GroupItemCount="1" ItemPlaceholderID="item" runat="server">
<LayoutTemplate>
<table>
<asp:PlaceHolder runat="server" ID="group"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="item"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px">
<tr>
<td>
<span>
<%# Eval("Id") %>
</span>
</td>
</tr>
<tr>
<td>
Name: <span><%# Eval("Field_name_of_your_DB") %></span><br />
Number: <span><%# Eval("Field_name_of_your_DB") %></span><br />
Date: <span><%# Eval("Field_name_of_your_DB", "{0:MM dd, yyyy}") %></span><br />
Comment: <span><%# Eval("Field_name_of_your_DB") %></span><br />
</td>
</tr>
</table>
</td>
</ItemTemplate>
</asp:ListView>

Related

How can I hide an HTML table row <tr> in aspx file and enable in code behind?

I have a very small search functionality and I have a table row called "Search Results", I want this table row get displayed whenever i have something to display from the search results. So I want to hide this row by default and enable via code behind when my search is fetching some result.
<div>
<table>
<tr id="srchResultHeader" style="display: none;" class="header">
<td colspan="2" class="tdlogintitle" visible="false">Search Results</td>
</tr>
<tr>
<td>/*Data to display actual result from database*/</td>
</tr>
</table>
</div>
I'm not able to get the reference of the above table id "srchResultHeader" in my code behind? What is wrong here in my code.
An id by itself is just a client-side identifier. In order for this to be referenced as a server-side object it needs to be a server-side control. The easiest way would just be to add runat="server" on the existing element:
<tr runat="server" id="srchResultHeader" style="display: none;" class="header" >
In this case you probably don't even need the style attribute, since you're controlling the hide/show functionality in server-side code. You can just set .Visible on the control to determine whether or not it renders to the client-side markup at all.
You could use server-side <asp:Table> for this very purpose. Otherwise <tr> is a client-side thing and is not directly accessible in the server-side code. <asp:Table> will render <table> tag on the client-side, but you can access it in the code-behind through its ID. The structure looks like this:
<asp:Table ID="MyTable" runat="server">
<asp:TableRow runat="server" ID="MyRow1">
<asp:TableCell>Some value</asp:TableCell>
</asp:TableRow>
</asp:Table>
You can now write something like this in the code-behind:
MyRow1.Visible = False;
.aspx
<tr id="divDriverName1" runat="server" >
<td >
<label class=" ">label1 </label>
<asp:TextBox ID="TextBox1" runat="server" class=" form-control"></asp:TextBox>
</td>
</tr>
.aspx.cs
ContentPlaceHolder myPlaceHolder = (ContentPlaceHolder)Master.FindControl("ContentPlaceHolder1");
HtmlTableRow ct = (myPlaceHolder.FindControl("divDriverName1")) as HtmlTableRow;
divDriverName1.Attributes.Add("style", "display:none");
<div class="row" id="divhiddenInfo2" runat="server" style="display: none">
</div>

Creating a repeater dynamically inside an accordion pane

My goal is to nest a Repeater inside an ASP.Net AJAX Accordion's AccordionPane.
So there is one Accordion which I am programmatically adding AccordionPanes to. The amount of panes I add depends on my particular dataset's count value, usually no more than 5. I've managed to do this successfully.
The thing I am having difficulty with is creating and adding a Repeater per each AccordionPane.
I've glanced over http://iridescence.no/post/Using-Templated-Controls-Programmatically.aspx but this is not exactly what I had in mind. Instead, I would rather declare a single Repeater as static HTML that I could then "clone" when I need. How can I achieve this? Obviously I would want each control's ID (within this declared Repeater) to be generated automatically each time i "clone" it.
The repeater looks like this:
<asp:Repeater ID="rptForum" runat="server">
<ItemTemplate>
<div runat="server" style="border:solid #d3d3d3 1px; border-bottom-width:0px;">
<table width="100%">
<tr><td align="left">
<asp:Label runat="server" Font-Size="12px" />
</td></tr>
<tr><td align="left">
>> <asp:Label runat="server" Font-Size="12px" Text='<%# Eval("query") %>' />
</td></tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
I might add more fields to be databound as I progress.
Any ideas appreciated..
You should be able to do that by adding the repeater to the Content template:
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header>
Foo
</Header>
<Content>
<asp:Repeater ID="Repeater1" runat="server" ...>
...
</asp:Repeater>
</Content>
</cc1:AccordionPane>
You can do a hierarchical data bind with the accordion, as illustrated here: http://aspalliance.com/1674_complex_data_binding_with_the_accordion_control

Changing columns in display based on variable

I currently have a table with a repeater that is being filled with data
<table width="100%" >
<tr>
<td class="add_border_bold" nowrap>Title</a></td>
<td class="add_border_bold" nowrap>User</td>
</tr>
<asp:Repeater id="program_list" OnItemDataBound="Repeater1_ItemDataBound" runat="server">
<ItemTemplate>
<tr>
<td class="add_border">
<%# Eval("short_title") %>
</td>
<td class="add_border">
<%# Eval("userid") %>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
I'm currently converting this from coldfusion. In the previous application, I had multiple table layouts for displaying different kinds of information, for example, phone number instead of userid. (although, working with a lot more columns, I shortened it for posting). In coldfusion I would just wrap each table in a <cfif> tag controlled by a variable that said which view to use. I am unaware how to get multiple data displays into a single page controlled by a variable, like I was before. Mostly because, it appears that most of my logic is done in the code behind files, so I don't understand how to get those changes across in the .aspx, or how to manipulate them from the code behind file.
Thanks in advance.
I would utilize a MultiView control and determine which view to show from code-behind.

how do i response.write a block of code?

In php you can have the serverside script print back a block of formatted code by using something like
print <<<HERE
<code>
<somemorecode></somemorecode>
</code>
HERE;
What is the asp equivalent (C#)??
It doesn't seem to like when I don't keep all of the string on one line and i'd like to avoid having to concatenate everything as it kind of kills the purpose of preserving the formatting for readability. Here's what I have that it isn't liking. i know why its doing it, but I'd like to know how to achieve what you can in php:
<%
for(int i = 20; i<21;i++){
Response.Write("
<tr>
<td class="style1">
<asp:DropDownList ID="docNumber" runat="server" />
</td>
<td class="style1">
<asp:Label ID="Label1" runat="server" Text="This would be the title of the document." /></td>
<td class="style1">#</td>
<td class="style1">
<asp:DropDownList ID="supervisorName" runat="server" />
</td>
</tr>");
%>
This isn't for anything anyone will ever see. I'm just trying to build a throw away data entry page for myself.
update: nevermind... i just realized this isn't going to work for me as it will duplicate each control id. fail.
At any rate, for future reference. is there a way to do what i was trying to do as far as the code blocks go?
You might consider using an <asp:Repeater /> for this purpose:
<asp:Repeater runat="server" id="repeater1">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="style1">
<asp:DropDownList ID="docNumber" runat="server" /></td>
<td class="style1">
<asp:Label ID="Label1" runat="server"
Text="<%# Container.DataItem("DocTitle") %>"/></td>
<td class="style1">#</td>
<td class="style1">
<asp:DropDownList ID="supervisorName" runat="server" /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
In your code behind, you would then bind this to a list or datasource on page load (or where ever appropriate). Finally check out the ondataitembound action for custom handling of each item as it's bound.
MSDN Repeater - Everything you need to know
&lt%= Some String Expression Here %>
or
&lt% code with Response.Write("some string"); %>
the first is better if you want to print a single statement. The second is better if you have more than one expression that prints stuff (if you use loops, if/else, etc.)
Keep in mind that this is considered bad practice and is frowned upon in the ASP.NET Web Forms world. You should be using controls.
If you want to create some more complex layout that repeats something you should use databound controls. For tables use the GridView control, for list of options use DropDownList and for other things use layout use the ListView control (you can use it for tables too). These controls use default formatting or template for each item and are bound to a collection of items via code behind. All this is for ASP.NET Web Forms. If you are using ASP.NET MVC things are done differently.

Two forms in ASP.NET

You can only have one form runat="server" per page apparently.
My page has one form, where it loads in a list of names. This form allows you to add a new name to the list as well.
I've attatched an onclick event to each name in the listview. When you click on it, I need it to load the data into the edit form (next to the add form) with JavaScript code; I can do this fine.
But how do I structure it on the page to have two forms?
An illustration:
<table>
<tr>
<td style="width:50%;" valign="top">
<form runat="server" action="productCats.aspx?action=new&mid=2">
<div class="subHead">Create New Category</div>
<table class="settingTable">
<tr>
<td colspan="2"><b>Category Name</b></td>
</tr>
<tr>
<td>
<asp:TextBox ID="catName" runat="server" CssClass="tbox widebox"></asp:TextBox>
<asp:RequiredFieldValidator runat="server"
id="ValidatorName"
ControlToValidate="catName"
ErrorMessage="You need to enter a category name"
display="Dynamic" />
</td>
</tr>
<tr>
<td>This is the name of your category.</td>
</tr>
<tr>
<td colspan="2"><b>Parent Category</b></td>
</tr>
<tr>
<td>
<asp:ListBox SelectionMode="Single" Rows="8" id="parent" runat="server" CssClass="tbox widebox">
<asp:ListItem Selected="True" Text="Top Level" Value="0"></asp:ListItem>
</asp:ListBox>
<asp:RequiredFieldValidator runat="server"
id="RequiredFieldValidator1"
ControlToValidate="parent"
ErrorMessage="You need to select a parent"
display="Dynamic" />
</td>
</tr>
<tr>
<td>Choose a parent this category belongs to.</td>
</tr>
</table>
<asp:Button id="id" text="Create" runat="server" />
</form>
</td>
<td style="width:4%;">
</td>
<td valign="top">
<div class="subHead">Modify Category</div>
<form id="Form1" action="productCats.aspx?action=update&mid=2">
<table class="settingTable">
<tr>
<td colspan="2"><b>Category Name</b></td>
</tr>
<tr>
<td>
<asp:TextBox ID="newCatName" runat="server" Enabled="false" CssClass="tbox widebox"></asp:TextBox>
<asp:RequiredFieldValidator runat="server"
id="RequiredFieldValidator2"
ControlToValidate="newCatName"
ErrorMessage="Enter a new category name"
display="Dynamic" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
ASP.NET Web Forms works by having just one <form> element on a page, and getting this posted back to the same page every time something changes (postbacks). Trying to use multiple forms, and specifying custom action attributes on the form element is going against what the framework is designed to work with, and that's never really a good idea.
I would just try to get rid of the second <form> element, and remove the action attribute from the first <form>. Also, ASP.NET will be much happier if everything is inside the form, i.e. your <table> tags at the top of the page.
I'm not sure what your page is doing, but if you've got a TextBox and you're using the contents of this to add items to a ListBox, a more Web Forms-like approach would be to use some control to do a postback when the TextBox has been filled in, and then re-bind the ListBox to some kind of data source. Maybe use an UpdatePanel if you want an Ajax postback.
If you're more comfortable with JavaScript and query string parameters, maybe ASP.NET MVC would be a better fit.
By what I understood from your explanation, you want a functionality on this page of yours where when you click on one of the listitem in the list, the elements in the form2 needs to displayed and to modify the details... What I think is ... use two Panels and onclick of the item in ListBox you can show the Edit Panel and on the change of details and some other event like button click .. you can show the ListBox Panel with the changed detail.
Yes as Graham has mentioned you can use Ajax update panel to accomplish this.

Categories

Resources