Why fontawesome icons are not getting applied to gridview icons? - c#

I am trying to apply Font-Awesome icon on Command Fields and it appears but I don't want the default text of command fields i.e. EDIT, Select, Delete etc and only icon to display. I tried my best but couldn't sort it out.
<asp:GridView ID="dgvEmployees" runat="server" CssClass="table table-borderless table-striped">
<Columns>
<asp:CommandField ButtonType="Link" ShowSelectButton="true" SelectText="View" />
<asp:CommandField ButtonType="Link" ShowEditButton="true" ItemStyle-CssClass="fa fa-pencil" />
<asp:CommandField ShowDeleteButton="true" />
</Columns>
</asp:GridView>

In SelectText you can use this:
SelectText="<i class='glyphicon glyphicon-pencil'></i>"
or
SelectText="<i class='fa fa-pencil'></i>"

Related

Copy gridview cell value to the clipboard

I have a gridview with some values. If the user clicks on a link or button (here I took a Buttonfield with the text 'Copy') on one of the rows, it should copy a cell value of that row to the clipboard.
Is something like this possible in asp.net c# ?
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="SqlDataSource1" Visible="False" OnRowDataBound="GridView1_RowDataBound"
onselectedindexchanged="GridView1_SelectedIndexChanged1">
<Columns>
<asp:BoundField DataField="Username" HeaderText="Username"
SortExpression="Username" />
<asp:BoundField DataField="Password" HeaderText="Password"
SortExpression="Password" />
<asp:CommandField ButtonType="Image" EditImageUrl="/images/edit.png" CancelImageUrl="/images/undo.png" UpdateImageUrl="/images/save.png" ShowEditButton="True" />
<asp:CommandField ButtonType="Image" ShowDeleteButton="True" DeleteImageUrl="/images/deletered.png" />
<asp:ButtonField Text="Copy" />
</Columns>
<EmptyDataTemplate>
No data available
</EmptyDataTemplate>
</asp:GridView>
There is no Onclick event available for a ButtonField. Otherwise I would think of using some javascript (I have seen that in other solutions)
Thanks for any input.
You can do that with windows form only, but since you are working on Web application you should write client side code which is javascript to copy data on client side not server side. checkout this link

Hide cells in GridView based on another column

I have the following GridView:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="SysInvoiceID" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="InvoiceID" HeaderText="SysInvoiceID" ReadOnly="True" SortExpression="SysInvoiceID" />
<asp:BoundField DataField="BillMonth" HeaderText="BillMonth" SortExpression="BillMonth" />
<asp:BoundField DataField="InvoiceDate" HeaderText="InvoiceDate" ReadOnly="True" SortExpression="InvoiceDate" />
<asp:BoundField DataField="InvoiceNumber" HeaderText="InvoiceNumber" SortExpression="InvoiceNumber" />
<asp:BoundField DataField="Net" HeaderText="Net" SortExpression="Net" />
<asp:BoundField DataField="VAT" HeaderText="VAT" SortExpression="VAT" />
<asp:BoundField DataField="Gross" HeaderText="Gross" SortExpression="Gross" />
<asp:ButtonField CommandName="ViewInvoice" HeaderText=" " ShowHeader="True" Text="View" />
</Columns>
</asp:GridView>
The very last column (ButtonField) is one I created myself just to include the text 'View' on each row, which when clicked, will bring up a PDF invoice.
I'm not sure if this is even possible, but I was wondering if it was possible to add some sort of validation for that column or something, so that if the 'InvoiceID' column is blank, the 'View' link on the corresponding row won't show up.
I felt close to doing this by going on split view in Visual Studio and then the 'Edit Columns' button on GridView tasks, but like I said I'm not sure if it's possible to do it this way and may have to resort to simply coding it.
Thanks for any help!
Use a <TemplateField> instead of a <ButtonField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button runat="server" Text="View"
Visible='<%# Eval("IsEmpty(InvoiceID)") %>' CommandName="ViewInvoice" />
</ItemTemplate>
</asp:TemplateField>
And add a method to your page that is IsEmpty(string id) or whatever type your id is, and just check to see if it's empty first.
You can also add a CommandArgument attribute to the Button that will let you specify what the argument to it will be.
Use a placeholder...
<asp:Placeholder runat="server" ID="plView" Visible="<%# Convert.ToBoolean(InvoiceID == null) ? false : true %>">
<asp:ButtonField CommandName="ViewInvoice" HeaderText=" " ShowHeader="True" Text="View" />
</asp:Placeholder>

gridview CommandField Update & cancel image coming Up down on IE

i am using Gridview.
my code is:
<asp:GridView ID="gvReceivers" runat="server" AutoGenerateColumns="False"
BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px"
CellPadding="2" ForeColor="Black" GridLines="None"
OnRowEditing="RowEditing" Font-Size="Medium"
OnSelectedIndexChanging="gvReceivers_SelectedIndexChanging"
onrowcancelingedit="gvReceivers_RowCancelingEdit"
onrowdeleting="gvReceivers_RowDeleting"
onrowupdating="gvReceivers_RowUpdating">
<FooterStyle BackColor="Tan" />
<Columns>
<asp:CommandField ShowEditButton="True" ButtonType="Image"
CancelImageUrl="~/Images/Cancel.png" UpdateImageUrl="~/Images/save.png"
EditImageUrl="~/images/Edit.png" ItemStyle-Width="25px"
UpdateText="Update" CancelText="Cancel" />
<asp:CommandField ShowDeleteButton="true"
DeleteImageUrl="~/Images/delete.png" ButtonType="Image"
ItemStyle-Width="25px" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgSelect"
CommandName="Select" AlternateText="Select"
ImageUrl="~/Images/allowed.png" />
</ItemTemplate>
</asp:TemplateField>
now, i click on edit image. update & cancel images & Event are coming.but issue is on IE Update & Cancel image coming Up & Down. it's working fine on Mozila & chrome.check below image.
It's simple just add ItemStyle-Wrap="false" in your column.
It seems you have not given any width for ItemTemplate, you can take two separate ItemTemplate or you can also work with single.
<asp:TemplateField HeaderText="ColumnHeader">
<EditItemTemplate>
//You controls
</EditItemTemplate>
<ItemStyle Width="30%" />
*Edit *
You can follow this link and update code accordingly. If get stuck any where then you can ask me. Here we can guide you but the main task you have to do your self.
As Dorel Domocos suggested, I managed to solve the line break using the ItemStyle Wrap in the CommandField.
For example:
<asp:CommandField ButtonType="Image" ShowEditButton="True" EditImageUrl="~/images/edit.png" CancelImageUrl="~/images/cancel.png" UpdateImageUrl="~/images/update.png" ItemStyle-Wrap="false" >
<ItemStyle Wrap="False" Width="48px"></ItemStyle>
</asp:CommandField>
It can be either on the CommandField with the attribute ItemStyle-Wrap="false", or with its ItemStyle element with Wrap="False" attribute.
The generated result has the white-space:nowrap; CSS style, having the following when being in Edit mode:
<td style="width:48px;white-space:nowrap;">
<input type="image" name="GridView1$ctl02$ctl00" src="images/update.png" alt="Update">
<input type="image" src="images/cancel.png" alt="Cancel" onclick="javascript:__doPostBack('GridView1','Cancel$0');return false;">
</td>
Hope it helps.
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgSelect"
CommandName="Select" AlternateText="Select"
ImageUrl="~/Images/allowed.png" />
</ItemTemplate>
<ItemStyle Width="30%" />
</asp:TemplateField>

Add sorting to a Nested Gridview ASP.net with C#

I have searched high and low for how to implement this on my page. I have a top level gridview which allows sorting and nested gridviews which are dynamically generated when the page compiles so 'x' number of nested gridviews which are inside dynamic html divs which can be toggled from invisible to visible at the users command. The problem I have is that I cannot figure out how to allow sorting on these nested gridviews without collapsing the divs/causing a postback.
Below shows how the master gridview (gvSalesDiv) and the nested gridview (gvTheDivisionCustomers) are generated in asp.net
<asp:GridView ID="gvSalesDiv" AllowSorting="true" onsorting="GridView1_Sorting" runat="server" GridLines="Both" OnRowDataBound="gvOrderLineDetail_RowDataBound" AutoGenerateColumns="False"
Width="100%" Height="210px" BackColor="WhiteSmoke" AlternatingRowStyle-BackColor="#DADDE2"
HeaderStyle-Font-Size="Medium" Visible="true">
<Columns>
<asp:TemplateField HeaderText="Toggle Detail">
<ItemTemplate>
<a href="javascript:switchViews('div<%# Eval("SalesDivision") %>');">
<img id="imgdiv<%# Eval("SalesDivision") %>" alt="toggle" border="0"
src="/salesconsole/toggle-off.png" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="SalesDivision" HeaderText="Sales Division">
<ItemStyle Font-Bold="True" ForeColor="CornflowerBlue" HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="LastDay" SortExpression="LastDay" DataFormatString="{0:C}" HeaderText="Last 24 Hours" >
</asp:BoundField>
<asp:BoundField DataField="LastWeek" SortExpression="LastWeek" DataFormatString="{0:C}" HeaderText="Last 7 Days" >
</asp:BoundField>
<asp:BoundField DataField="Last30Days" SortExpression="Last30Days" DataFormatString="{0:C}" HeaderText="Last 30 Days" >
</asp:BoundField>
<asp:BoundField DataField="Last3Months" SortExpression="Last3Months" DataFormatString="{0:C}" HeaderText="Last 3 Months" >
</asp:BoundField>
<asp:BoundField DataField="Last6Months" SortExpression="Last3Months" DataFormatString="{0:C}" HeaderText="Last 6 Months" >
</asp:BoundField>
<asp:BoundField DataField="LastYear" SortExpression="LastYear" DataFormatString="{0:C}" HeaderText="Last Year" >
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100">
<div id="div<%# Eval("SalesDivision") %>" style="display:none;position:relative;left:25px;" >
<h3 title="<%# Eval("SalesDivision") %> Sales"><%# Eval("SalesDivision") %> Sales Breakdown</h3>
<asp:GridView ID="gvTheDivisionCustomers" AllowSorting="true" onsorting="GridView2_Sorting" BackColor="WhiteSmoke" AlternatingRowStyle-BackColor="#DADDE2"
Width="100%"
AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateField HeaderText="Show More Detail">
<ItemTemplate>
<a href="sales-customers-detail.aspx?CustomerID=<%# Eval("CustomerID") %>&CustomerName=<%# Eval("CustomerName") %>" target="_blank" style="color:Blue; text-decoration:underline"> More Details
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CustomerID" HeaderText="ID"/>
<asp:BoundField DataField="CustomerName" HeaderText="Name" />
<asp:BoundField DataField="Last24Hours" HeaderText="Last 24 Hours" SortExpression="LastDay" DataFormatString="{0:C}" />
<asp:BoundField DataField="Last7Days" HeaderText="Last 7 Days" SortExpression="Last7Days" DataFormatString="{0:C}" />
<asp:BoundField DataField="Last30Days" HeaderText="Last 30 Days" SortExpression="Last30Days" DataFormatString="{0:C}" />
<asp:BoundField DataField="Last3Months" HeaderText="Last 3 Months" SortExpression="Last3Months" DataFormatString="{0:C}" />
<asp:BoundField DataField="Last6Months" HeaderText="Last 6 Months" SortExpression="Last6Months" DataFormatString="{0:C}" />
<asp:BoundField DataField="LastYear" SortExpression="LastYear" HeaderText="Last Year" DataFormatString="{0:C}" />
</Columns>
</asp:GridView>
</div>
</td></tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I populate the master gridview on Page_Load and the nested gridviews are created using the OnRowDataBound method. I have a sorting method for the master gridview which works fine as well. Below is the OnSorting method for the nested gridview, which is where I am stuck...I cannot access this object
protected void GridView2_Sorting(Object sender, GridViewSortEventArgs e)
{
// TO DO : Sort the nested gridview....All I can get at is the sort expressions or
cast the sender into a gridview but even then I wouldn't know the correct SQL query to bind with unless I knew which 'div' I was in...
}
So basically we can say, that you are looking for an ID or something wherewith you can create the query for the sorting method?
If that is correct we can find a solution.
Put a new label inside the first gridviews(gvSalesDiv) ItemTemplate like this one:
<asp:Label ID="lblID" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
And in the codebehinde you can find it in this was:
Label lblID = (Label)((GridView)sender).NamingContainer.FindControl("lblID");
Hope it works!
If you are looking for how to get the parent div the gridview resides in, you can use this:
First, you need to cast the sender to a gridview, then create an html element and cast it to the gridview's parent. Like this:
Dim test As Button = CType(sender, Button)
Dim div As HtmlGenericControl
div = CType(test.Parent, HtmlGenericControl)
Dim t As String = test.ID
In this example, I'm casting the sender to a button but you can easily change this. IN this example, you will need to have the div run at the server, using " runat="server"". If you do not want to create it on the server side, you can change how you cast from a HTMLGenericControl to ContentPlaceHolder. Let me know if this helps or you need more information.

Is there a way to make asp.net Boundfield a link?

Im sorry if this has been asked before, but i have searched the forums for quite some time and have not been able to find a solution to my problem.
I am currently developing a web application where users are able to donate bottle deposit. When users have uploaded the bottles they will be shown in the following table:
Snippet of the table
The data is shown in a gridview with a SqlDataSource. The code:
<div class="table-responsive col-8">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:WeCANConnectionString %>"
SelectCommand="SELECT [creator], [amount], [details],
[imageurl], [pickup], [available_from] FROM [deposit] ORDER BY [id] DESC"></asp:SqlDataSource>
<asp:GridView id="GridView1" class="table table-hover table-striped table-bordered" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="creator" HeaderText="Uploaded By" SortExpression="creator" />
<asp:BoundField DataField="amount" HeaderText="Amount" SortExpression="amount" />
<asp:BoundField DataField="details" HeaderText="Details" SortExpression="details" />
<asp:BoundField DataField="imageurl" HeaderText="Image" SortExpression="imageurl" />
<asp:BoundField DataField="pickup" HeaderText="Location of the bottles" SortExpression="pickup" />
<asp:BoundField DataField="available_from" HeaderText="Available from" SortExpression="available_from" />
</Columns>
</asp:GridView>
I would like to be able to click on each individual post and create dynamic pages where more data from the database is shown. I read somewhere that i was possible to create these page with the ID of each post but i couldnt find anything that showed how it works.
Be free to ask any follow questions. This is my first post so im not sure if i have covered everything.
Thanks a lot in advance.
One way to do this is with a link in each row. First, you need to add "id" to the SELECT in your DataSource, so the data is accessible at the time the table is bound.
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:WeCANConnectionString %>"
SelectCommand="SELECT [id], [creator], [amount], [details], [imageurl],
[pickup], [available_from] FROM [deposit] ORDER BY [id] DESC">
</asp:SqlDataSource>
Then in your GridView, make a template column with a HyperLink, and have the NavigateUrl of that HyperLink open a new page with the ID on the query string. If you don't want the ID to be exposed in the URL, you may need to obfuscate it in some way, or use perhaps a GUID column in the DataBase for each record. As long as you can identify it. Your NavigateUrl can be whichever page you want, but in this example I used DetailPage.aspx.
<asp:GridView id="GridView1" class="table table-hover table-striped table-bordered" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="DetailsLink" runat="server"
NavigateUrl="DetailPage.aspx?id=<%# Eval("id")%>"
Text="Details" Target="_blank">
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="creator" HeaderText="Uploaded By" SortExpression="creator" />
<asp:BoundField DataField="amount" HeaderText="Amount" SortExpression="amount" />
<asp:BoundField DataField="details" HeaderText="Details" SortExpression="details" />
<asp:BoundField DataField="imageurl" HeaderText="Image" SortExpression="imageurl" />
<asp:BoundField DataField="pickup" HeaderText="Location of the bottles" SortExpression="pickup" />
<asp:BoundField DataField="available_from" HeaderText="Available from" SortExpression="available_from" />
</Columns>
</asp:GridView>
The <## Eval('id')#> will render the ID for each row as a query string in the URL.
If I understand you well, You can use Template Field
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton Text="text" runat="server" />
</ItemTemplate>
</asp:TemplateField>

Categories

Resources