Applying ItemStyle or HeaderStyle in GridView Skin - asp.net

I would like to apply default column-based styles to my GridView controls using a skin or other function of ASP.NET themes (or really any other automated way).
Currently my GridView skin looks like this:
<asp:GridView runat="server" GridLines="None">
<HeaderStyle CssClass="GridViewRowHeader" />
<FooterStyle CssClass="GridViewRowHeader" />
<RowStyle CssClass="GridViewRowA" />
<AlternatingRowStyle CssClass="GridViewRowB" />
</asp:GridView>
And a typical GridView column definition looks like this:
<Columns>
<asp:BoundField DataField="ExitTimestamp" HeaderText="Exit" SortExpression="ExitTimestamp">
<ItemStyle CssClass="GridViewCell" />
<HeaderStyle CssClass="GridViewHeader" />
</asp:BoundField>
<asp:TemplateField HeaderText="Visitor Name/Agency">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("VisitorName") %>'></asp:Label><br />
<asp:Label ID="Label2" runat="server" Text='<%# Bind("VisitorAgency") %>'></asp:Label>
</ItemTemplate>
<ItemStyle CssClass="GridViewCell" />
<HeaderStyle CssClass="GridViewHeader" />
</asp:TemplateField>
</Columns>
What I would like to get around is having to add the <ItemStyle> and <HeaderStyle> elements to every column definition in my GridView controls. I have tried various ways in the skin file including adding a <Columns> container and <ItemStyle> element therein, but nothing seems to work. Is there a way to do this?

For posterity, here is how I ended up specifically solving the problem using CSS.
I assigned a CSS class to the GridView in my skin file like so:
<asp:GridView runat="server" CssClass="GridView">
The style selects td (item) and th (header) cells within the GridView and works just as well as applying a plain CSS class directly with ItemStyle and HeaderStyle in your Column definitions:
table.GridView tr td, table.GridView tr th
{
/* style attributes here */
}

The advice here may work for you http://forums.asp.net/t/1063057.aspx in short define and add a CssClass to your gridview then use plain old CSS stylesheet to target and decorate the control.

Related

Using Gridview and getting scrollable cells?

I am using Gridview and I want to have the cells scrollable. I already have a div that scrolls the whole table, but I need to individual cells to be kept to a certain max width and a scrollbar be created for cells that have data that would exceed that.
I have tried adding <rowstyle Wrap="false"/> this made the data stop wrapping, which I wanted, but now the rows are very very wide. Which I don't want.
I found several suggestions that say to add a div around the Gridview which I did and added a css rule like overflow-x:auto;width:200px; this did not help the cells are still very very wide.
I have the Gridview setup like this:
<asp:GridView ID="PMDataGrid"
datasourceid="PMDataSource"
ondatabound="PMDataGrid_DataBound"
autogeneratecolumns="false"
emptydatatext="No Data Available"
allowpaging="true"
pagesize="25"
runat="server"
showheader="true"
showfooter="true"
DataKeyNames="PROJECT"
allowsorting="true"
style="overflow-x:auto"
headerstyle-cssclass="FixedHeader">
<HeaderStyle BackColor="Black" ForeColor="White" />
<FooterStyle BackColor="Black" ForeColor="White" />
<RowStyle BackColor="White" ForeColor="Black" height="50px" Wrap="false" Width="250px" />
<AlternatingRowStyle BackColor="#e5e5e5" ForeColor="Black" height="50px" />
<SelectedRowStyle BackColor="#999999" ForeColor="#fff" />
I would like to be able to have a max-width of 250px and have a scrollbar when the data is too long, but I am unable to find a solution. I am fairly new to web apps in asp.net.
I have added this:
<asp:TemplateField HeaderText="COE_%_RCVD_BY_LINE" SortExpression="COE_%_RCVD_BY_LINE">
<ItemTemplate>
<asp:Label ID="Lable70" runat="server" Text='<%# Bind("COE_%_RCVD_BY_LINE") %>'></asp:Label>
</ItemTemplate
</asp:TemplateField>
Which produced this error:
Parser Error Message: A call to Bind was not well formatted. Please refer to documentation for the correct parameters to Bind.
I think it's the % that is causing the error. Is there a way to keep the % and have it work?
I forgot to add the surrounding <div></div>. It now looks like this:
'>
How and I have CSS setup like this:
.Gridview {
overflow-x:auto;
width:250px;
}
I'm pretty sure I have this setup correctly, but still the columns are very very wide:
and the rules in the CSS don't seem to be applying:
I have it figured out.
I had the CSS file with the style, this did not work. When I added the style to the div inline then it works, like this:
<asp:TemplateField HeaderText="DESCRIPTION" SortExpression="DESCRIPTION">
<ItemTemplate>
<div class="Gridview" style="overflow-x:auto; max-width:250px;">
<asp:Label ID="Lable1" runat="server" Text='<%# Bind("DESCRIPTION") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
This now works to add the scrollbar to any field that goes over the 250px max that I have set.
This can mostly be found in the similar question: Is it possible to scroll in a cell of a gridview?
But I did learn that the style has to be inline for it to work. Having the style in the CSS file did not work.

GridView TemplateItem Width

I have a GridView which contains a TemplateItem column which contains a textbox. The grid itself works fine, the rows are create, I can edit the text box, etc. But the width is static. I can manually set the width but ideally I'd like it to just automatically stretch to whatever size the column is.
I've tried Googling an answer to this, and everything I've seen has been around using CSS or having a Width property assign a specific width.
This is my GridView code:
<asp:GridView runat="server" ID="grdSelectedProducts" BorderWidth="1px" CellPadding="3" CellSpacing="2" AutoGenerateColumns="False" OnRowDataBound="grdSelectedProducts_OnRowDataBound" ShowHeaderWhenEmpty="True">
<Columns>
<asp:BoundField DataField="Product" HeaderText="Product" ReadOnly="False" />
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtDescription" Text=""></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Try setting width:auto, Though you may not see a style property for a <asp:TextBox> still it will render it
<asp:TextBox runat="server" ID="txtDescription" style="width:auto !important"
Text="">

I want to put table in asp.net grid view

this is my grid view code given below>
<asp:GridView ID="gvReport" runat="server" AutoGenerateColumns="False" GridLines="None"
ShowHeader="true" HorizontalAlign="Left" OnRowCommand="gvReport_RowCommand">
<Columns>
<asp:TemplateField HeaderText="User" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:Image id="img" text=<%#Eval("Coupon_Image")%>/>
</ItemTemplate>
<HeaderStyle Font-Bold="false" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button ID="getCoupon" runat="server" CssClass="btn" Width="145" Height="34"
CommandName="getCoupon" CommandArgument='<%#Eval("Coupon_Id")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In this it showing like this
Image 1 Button
Image 2 Button
actually i want like this type in grid view
Image1 Image2 Image3
Button Button Button
Please help me ....
advance thanks
A gridview won't work for this. Use the Table control for that, and programmably build the rows and columns. The challenge is the gridview isn't meant to render horizontally. You may be able to make it work with a repeater or ListView too, as you can have the ListView or repeater render the columns, and the layout template be the table and header row.

Displaying an image icon in a gridview column with a href value in asp.net

I have a gridview column in which I have one column that point to a pdf file on the file server. I need to have another column right beside this, displaying the pdf icon. The user should be able to click the icon and launch the file from the file server.
My code is:
<asp:GridView ID="gvInvoices" AutoGenerateColumns="false" runat="server" Font-Names="Arial" Font-Size="Small" Width="50%">
<Columns>
<asp:TemplateField HeaderText="File Type">
<ItemTemplate><img runat="server" src="Images/img_Pdf.gif" id="imgFileType" /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate><%#Eval("InvoiceNumber")%></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
How can I add a "NavugateURL" or href="" to the img ?
Rather than using an HTML img control, try using an ASP.Net Server control.
A good choice would be the Hyperlink Control:
Instead of:
<img runat="server" src="Images/img_Pdf.gif" id="imgFileType" />
Use:
<asp:HyperLink ID="imgFileType" ImageUrl="Images/img_Pdf.gif" NavigateUrl="" runat="server">HyperLink</asp:HyperLink>
Just set your NavigateUrl property.
you need to wrap your icon around an anchor tag, and set the href of the anchor tag using DataBinding expression Eval. This assumes your Datasource field "PDFPath" is an absolute path.
<asp:GridView ID="gvInvoices" AutoGenerateColumns="false" runat="server" Font-Names="Arial" Font-Size="Small" Width="50%">
<Columns>
<asp:TemplateField HeaderText="File Type">
<ItemTemplate><a href='<%#Eval("PDFPath")%>'> <img runat="server" src="Images/img_Pdf.gif" id="imgFileType" /></a></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate><%#Eval("InvoiceNumber")%></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
inside the RowDataBind event look for your image control and set its NavigateUrl property
protected void gvInvoices_RowDataBound(object Sender , GridViewRowEventArgs e)
{
if(e.Row.RowType==DataRow)
{
HtmlControl icon = e.Row.FindControl("imgFileType") as HtmlControl;
icon.NavigateUrl = ((MyDataType)e.Row.DataRow).PDFPath;
}
}
Note it is free hand writing so you may find some syntax errors that you should fix

Insert hidden column in asp:GridView but still available client side

This is simple. All I want to do is insert a hidden column into an asp:Griview that I'll be able to access through javascript. Any pointers?
You can hide a column by setting its CssClass property, e.g:
<style>
.hidden {display:none;}
</style>
...
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" ItemStyle-CssClass="hidden"
HeaderStyle-CssClass="hidden" />
<asp:BoundField DataField="Title" />
</Columns>
</asp:GridView>
Item attribute
ItemStyle-CssClass="hidden"
css class
.hidden{ display: none; }
This is what I did. I created a hidden field inside a TemplateField in the .aspx page
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField ID="ITEM_VAL" runat="server" Value='<%# Bind("ITEM_VAL") %>' />
</ItemTemplate>
</asp:TemplateField>
Then in the code behind file -
protected Sub gvHist_RowDataBound()
Dim val as Integer
Dim hiddenCol As HiddenField = e.Row.FindControl("ITEM_VAL")
val = Convert.ToInt32(hiddenCol.Value)
End Sub
Add to it the CSS property display:none. It will be unvisible but still present in the markup.
However this is not secure as the customer might unlock this column by using tools like FireBug which allows to override properties.

Resources