ASP.Net GridView styling - invisible cell lining - css

I`m using a Gridview in an ASP.Net web app.
Since it has custom styling and templates, I couldn't figure how to style it the way I want. I want all the lines of the final HtmlTable to be invisible - just purely the cellcontent and margins between them, without a visible table. How can I do such a thing?
The gridView itself:
<asp:GridView
ID="Items" runat="server">
</asp:GridView>

<asp:GridView
ID="Items" runat="server" GridLines="None"
CellSpacing="Set a Value" CellPadding="Set a Value">
</asp:GridView>

Related

How to make GridView ASP.NET control look like SharePoint List?

Ive been developing a SharePoint WebPart. In this webpart there is a gridview used to display some information.
Due to business im required to give this gridview the look of a SharePoint list.
Is there anyone out there that has the styling to make the GridView ASP.Net control look like a SharePoint list?
For Sharepoint server control SPGridView all css classes are already included here you can find how to use it.
For ASP.NET GridView control you can try the example below
<asp:GridView runat="server" CssClass="ms-listviewtable">
<HeaderRow CssClass="ms-viewheadertr ms-vhltr"/>
<HeaderStyle CssClass="ms-vh2" />
<RowStyle BackColor="ms-itmhover" />
<AlternatingRowStyle CssClass="ms-alternating ms-itmhover" />
<ControlStyle CssClass="ms-vb-title"/>
</asp:GridView>

Textbox losing data within HeaderTemplate on Postback in ASP.Net

I have a ASP.Net GridView and I build the column collection myself. Within the column collection I have a HeaderTemplate and within there I have a textbox which I use to filter the records in the grid.
When I enter text within this textbox and perform an action on the grid which causes a postback (i.e. changing the page) I lose the text within my textbox.
Anybody got any ideas as to why this data is lost?
My ASP code for the header template is below:
<HeaderTemplate>
<asp:Label ID="Label1" Text="Number" runat="server" />
<asp:TextBox ID="textBoxNumberFilter" runat="server" />
<asp:ImageButton ID="buttonFilterNumber" runat="server" OnClick="buttonFilters_Click" />
</HeaderTemplate>
Thanks in advance. I'm using ASP.Net 4.0
I think this might help.
http://www.codeproject.com/Articles/38714/How-To-Perpetuate-Dynamic-Controls-Between-Page-Vi

Paging for Listview inside a Gridview not working

I have a listview nested inside a gridview.
I'm trying to get paging working on the listview. I thought that it would display the paging controls, and just page through them normally.
It does display the controls, and limits the result set shown to the appropriate number of records (pageSize) but when I click on the paging controls the grid refreshes and nothing changes with the nested listview (it's still on the first page).
I've tried nesting the listview inside an updatepanel, but the behavior remains. The gridview itself is already in an updatepanel.
So this is the layout I've got:
<Gridview ID="gvApplications" DataSourceID="odsApplications" DataKeyNames="ID" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Functions">
<ItemTemplate>
<asp:ListView ID="lvFunctions" runat="server" DataSource='<%#Eval("ApplicationFunctions") %>'
DataKeyNames="ID">
<LayoutTemplate>
<asp:DataPager ID="dpFunctions" runat="server" PageSize="1" PagedControlID="lvFunctions">
<Fields>
<asp:NextPreviousPagerField />
</Fields>
</asp:DataPager>
<ul>
<li>
<span ID="itemPlaceholder" runat="server" />
</li>
</ul>
</LayoutTemplate>
<ItemTemplate>
<asp:Label ID="lblFunction" runat="server" Text='<%# Eval("ApplicationFunction.Name") %>' />
</ItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</Gridview>
Ideas?
Honestly, I would consider using a master-details pattern here. There are a lot of code examples on this. For example:
Google: Master Details Examples with Child Objects
There are also scenarios where the details view (child objects in your case) would display on a separate page. Either way, by displaying the child objects in a separate details view, you avoid the coding and display issues that come with nesting.
Matt Berseth has some of the best code examples out there on this topic:
http://mattberseth.com/blog/gridview/
Listview / datapager combination do not work properly if the listview does not use a datasource control.
Try including a datasource control (objectdatasource could be applicable) in the template field.

Adding Link Column to ASP.NET GridView

I want to output a list of news headlines that are clickable. So far I can get it to print out a list of headlines because I dragged and dropped the NewsHeadline table in designer view in VS 2010. How do you think I should the make the list elements clickable? I looked for a URL attribute but I did not see it. Do I need to wrap in a < a href ?
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
EmptyDataText="There are no data records to display.">
<Columns>
<asp:BoundField DataField="NewsHeadline" HeaderText="NewsHeadline"
SortExpression="NewsHeadline" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:ConnectionString1.ProviderName %>"
SelectCommand="SELECT [NewsHeadline] FROM [NewsTable]"></asp:SqlDataSource>
</form>
You need to change the column type from a BoundColumn to a Hyperlink column.
<asp:hyperlinkfield headertext="NewsHeadline"
datatextfield="NewsHeadline"
datanavigateurlfield="NewsURL"
datanavigateurlformatstring="http://{0}" />
In addition to making this change, you'll need to make sure that you are selecting the URL or something you can use to create the link to the news article. In the example above, I'm assuming the URL is something you can grab from your SQL source. If it is an ID, simply type out the rest of the url like this... "~/MyNewsPage.aspx?NewsID={0}"...
Use hyperlinkfield instead :
<asp:hyperlinkfield datatextfield="NewsHeadline"
datanavigateurlfields="NewsID"
datanavigateurlformatstring="~\newsdetails.aspx?Id={0}" />
You need to use a hyperlink field instead of a BoundField, like so:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
EmptyDataText="There are no data records to display.">
<Columns>
<asp:HyperLinkField HeaderText="NewsHeadline" SortExpression="NewsHeadline" DataTextField="NewsHeadline" NavigateUrl="..." />
</Columns>
Something like this will work fantastic as a solution in Visual Studio 2010.
Create a GridView in the Designer tab of your webpage in VS.
Hover your mouse over the GridView and click the arrow that appears in the top right.
Go to "Choose Data Source" and select "new data source..."
Create the connection string to your database and choose the NewsHeadline table.
Write the query SELECT News_Id, NewsHeadline FROM NewsHeadline
Finish the setup. Now some code should be generated in the Source tab. This will also create an SqlDataSource which is now the DataSource of your GridView.
Go to where the code is for your GridView in the Source tab and replace with the following code.
Code:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="Id" DataSourceID="SqlDataSource1">
<Columns>
<asp:HyperLinkField
DataNavigateUrlFields="News_Id"
DataNavigateUrlFormatString="~\newsdetails.aspx?News_Id={0}"
DataTextField="NewsHeadline"
HeaderText="News HeadLines"
SortExpression="NewsHeadline" />
</Columns>
</asp:GridView>
And you're all set. This will create a list of all the Headlines as hyperlinks with a dynamically generated unique link to the newsdetails.aspx page compliments of the query string we built using the PRIMARY KEY News_Id corresponding to each NewsHeadline entry in the NewsHeadline table.
Then when you load the newsdetails.aspx page you use: Request.QueryString["News_Id"] to get the News_Id value from the URL and use it to query the database for the details about the specific NewsHeadline that was clicked. You can then display the result of that query on the webpage.
The HyperLinkField will work great as others have pointed out. But, in case you want the entire row clickable, you can use a custom server control that implements a GridView suggested in the SO post "Making an entire row clickable in a gridview".
Check out the question I posted on how to implement a C# custom server control on implementing it.
Just another option.

Dynamic Columns and Data Sources with .NET Grid View

I am working on a multi-purpose page and rather than adding multiple grids to the same page we wanted to use a single GridView to the page, and on Page_Init add the needed columns, and set the respective DataSourceID.
So to do this, we have something like the following in the aspx, the codebehind in the Page_Init is very simple adding a few columns then setting the DataSourceID property of the GridView.
ASPX:
<asp:GridView ID="gvDisplay" runat="server" AutoGenerateColumns="false" CellPadding="5"
width="100%" AllowPaging="true" PageSize="200" DataSourceID="wuProcessLogDataSource">
<RowStyle CssClass="RowStyle" />
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
</asp:GridView>
<asp:ObjectDataSource id="wuProcessLogDataSource" runat="server" EnablePaging="True"
SelectMethod="GetWUProcessLog" TypeName="Project.Objects.WUProcessLogDal"
SelectCountMethod="GetWUProcessLogTotalRecords">
<SelectParameters>
<asp:QueryStringParameter QueryStringField="w" DefaultValue="0" Name="workunitId" />
</SelectParameters>
</asp:ObjectDataSource>
The object data source is there and working as the first page load triggers without any issues at all. However, as soon as you click on a page button, the grid disappears from the page? Any ideas?
I would just use a DataGrid but it doesn't have the desired dynamic display abilities for the HyperLinkColumn.
It sounds like you're doing something like
If (!Page.IsPostBack)
{
//create + add columns - set datasource etc
}
If that's the case - then you need to remove the check and always generate the columns (I'd also suggest disabling viewstate for the datagrid)
try the page load event instead of page init

Resources