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.
Related
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.
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
I thought this would be an easy one for me to figure out (or atl east find someone online who has) but I am running into issues.
I have the following code that creates my gridview:
<asp:GridView runat="server" ID="ContactsGrid" AutoGenerateColumns="False" DataSourceID="LinqContact"
CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDeleting="ContactsGridView_RowDeleting" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="IConact_ID" Visible="false" ReadOnly="true" />
<asp:BoundField DataField="cFirstName" HeaderText="First Name" ReadOnly="True" />
<asp:CommandField HeaderText="Delete" ShowDeleteButton="True" />
</Columns>
</asp:GridView>
<asp:LinqDataSource ID="LinqContact" runat="server" ContextTypeName="TIPS.App_Data.TIPSDataContext" onselecting="LinqContact_Selecting" >
</asp:LinqDataSource>
Now on the c# side, I want to be able to pull the value from the first column (which is hidden) and use it to delete that specific record (with the onroedeleting event), but all the ways I found to pull the value, all come up null, like what would happen if I didn't have a LinqDatasource.
I have tried (and a slew of other that really didn't seem to be right, so not listed):
ContactsGrid.SelectedRow.Cells[0].Text;
ContactsGrid.Columns[0];
Thanks for any help!
Edit:
Ok, so I found that you can't get the value of a column this is hidden when you hide it using the grid. I did find a work around. If you hide the column using css instead, you can still access the colum.
<style type="text/css">
.hiddencol
{
display:none;
}
</style>
<asp:BoundField DataField="IContact_ID" ReadOnly="true" itemstyle-cssclass="hiddencol" />
I don't think that this is the prefered .net way. I found a reference to something called datakeynames which seems to be the proper way. I am going to dig into those next.
Edit #2:
I see that Maras and myself both came up with a solution for the hidden field, but I think I found the best one (cause its simple and built in).
In the gridview tag you can set the datakeynames attribute to your column (like a primary key, which is what I was storing in my hidden column) you can also store multiple columns.
<asp:GridView runat="server" ID="ContactsGrid" AutoGenerateColumns="False" DataSourceID="LinqContact" DataKeyNames="IContact_ID"
CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDeleting="ContactsGridView_RowDeleting" >
you can then reference it with:
ContactsGrid.DataKeys[e.RowIndex].Value;
Try this:
void ContactsGrid_RowDeleting(Object sender, GridViewDeleteEventArgs e)
{
ContactsGrid.Rows[e.RowIndex].Cells[0];
}
See here for more details http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowdeleting.aspx#Y200
.
Edit after author's comment:
If you set it visibility to 'false' then there is nothing your browser can send you back in postback. You can use hidden field like in the second example:
<asp:GridView runat="server" ID="gv" OnRowDeleting="gv_RowDeleting" AutoGenerateColumns="false" AutoGenerateDeleteButton="true">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField ID="hf" runat="server" Value="<%# ((YourItemType)Container.DataItem).Id %>" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
protected void gv_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
HiddenField hf = (HiddenField) gv.Rows[e.RowIndex].Cells[0].FindControl("hf");
}
I want to set hyperlink field in datagrid view. When user clicks on that link, a query string should be generated and user should be directed to another page. So how can I set hyperlink to generate query string?
<asp:GridView ID="Griddata" runat="server" AutoGenerateColumns="False" CellPadding="1"
GridLines="Horizontal" Width="1000px" ShowFooter="True" CssClass="grid" AlternatingRowStyle-CssClass="alt">
<Columns>
<asp:HyperLinkField HeaderText="ID" DataTextField="rec_id" DataNavigateUrlFields="rec_id"
DataNavigateUrlFormatString="followme.aspx?record={0} " />
<asp:BoundField HeaderText="Login" DataField="LoginName"></asp:BoundField>
</Columns>
</asp:GridView>
This is a sample GridView defined in ASP.NET
You need to specify the <asp:Hyperlinkfield> in the column definition.
In that field, you need to specify the DataTextfield (is what will be displayed on screen in that column), your URL (DataNavigateUrlFormatString) and your parameter that you want to use in that URL (DataNavigateUrlFields)
Note: I'm binding to this grid from code-behind, not through a SqlDatAdaptor but the result is the same.
You will get something like this:
you can do like...
<ItemTemplate>
<asp:HyperLink ID="Edit" runat="server" Text="Edit" NavigateUrl='<%# Eval("DataKeyName", "~/View.aspx?Id={0}") %>' />
</ItemTemplate>
<a href='page.aspx?id=<#Eval("ID")>'>click</a>
I have a gridview that I populate based on a query to a db. I'm trying to add sorting on my gridview but I cannot make my column headers clickable. I have allow sorting set to true, and I have my OnSorting event set. My columns are of a few different types. I know the code I need to have in my code behind, but I cannot click on the headers for some reason. Any help on what I'm missing would be appreciated.
<asp:GridView ID="Grid1" runat="server"
AutoGenerateColumns="False"
OnSelectedIndexChanging="Selected_Row_Changing"
DataKeyNames="ApplicationId"
AllowPaging="True"
OnPageIndexChanging="Grid1_PageIndexChanging"
AllowSorting="True"
OnSorting="Grid1_Sorting"
OnRowCreated="OnRowCreated"
OnRowCommand="Grid1_RowCommand"
OnRowDataBound="Grid1_RowDataBound">
<Columns>
<asp:templatefield ...>
<itemtemplate>
<asp:linkbutton .../>
</itemtemplate>
</asp:templatefield>
<asp:BoundField ... />
<asp:HyperLinkField ... />
<asp:ButtonField ... />
</Columns>
</asp:GridView>
You don't have set the SortExpression, have you?
For example:
<asp:boundfield datafield="CompanyName"
headertext="CompanyName"
headerstyle-wrap="false"
sortexpression="CompanyName"/>
Make sure you're not setting the Header Template but rather set the HeaderText attribute for the TemplateField