I am using gridview to show the data and in the gridview itself I have some action buttons like Edit Delete and Preview for picture view. but I don't want the text "Preview" on my preview button, i want (fontawesome icon) instead the text(preview). My code is here....
<asp:GridView ID="GVProduct" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CssClass="table table-bordered table-sm table-hover table-striped" EmptyDataText="No rows for the selection criteria." EnableTheming="False" PageSize="5" OnRowCommand="grdForRows_RowCommand" OnPageIndexChanging="grdForRows_PageIndexChanging">
<Columns>
<asp:BoundField DataField="ProId" HeaderText="Prod.Id">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
<asp:BoundField DataField="ProName" HeaderText="Product Name">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="ProCategory" HeaderText="Category">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:ButtonField Text="Preview" ButtonType="Button" HeaderText="Photo" CommandName="btnPreview">
<ControlStyle CssClass="btn btn-success btn-sm" />
</asp:ButtonField>
<asp:ButtonField Text="Edit" ButtonType="Button" CommandName="btnEdit">
<ControlStyle CssClass="btn btn-primary btn-sm" />
</asp:ButtonField>
<asp:ButtonField ButtonType="Button" CommandName="btnDelete" Text="Delete">
<ControlStyle CssClass="btn btn-danger btn-sm" />
</asp:ButtonField>
</Columns>
the code for the icon which i want to add on button is
<i class="fas fa-eye"></i>
You can download the SVG file from Fontawesome, then you added the file with the "ImageUrl" tag in a ImageButton, like this:
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="Label2" runat="server" Text="Edit" ToolTip="Edit"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton runat="server" ImageUrl="~/context/Imagenes/Edit.svg" ID="Id"
CommandName="Command" />
</ItemTemplate>
</asp:TemplateField>
I found the way to add Font Awesome icons to GridView buttons. Use a ButtonType="Link":
<asp:GridView ID= ... >
<Columns>
...
<asp:ButtonField CommandName="myComand" Text="<i class='fa fa-info'></i>"
ButtonType="Link" ControlStyle-CssClass="btn btn-primary" />
...
</Columns>
</asp:GridView>
You Can Use Image
DeleteImageUrl="~/images/remove.png"
Its a Working one I dont Know why some one givenn negative
<asp:CommandField ButtonType="Image" ShowDeleteButton="True" HeaderStyle-BackColor="LightBlue" DeleteImageUrl="~/images/remove.png" ItemStyle-Width="2%"></asp:CommandField>
Related
After checking a condition I want to hide or view an image button inside a gridView.
I tried to like this. but it is not working.
<asp:GridView ID="GridView1" runat="server" Width="100%" CssClass="grid" AutoGenerateColumns="False"
EnableModelValidation="True" DataKeyNames="T_ID" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging"
OnRowCommand="GridView1_RowCommand" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="TEMPL_TITLE" HeaderText="Title">
<HeaderStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="TEMPL_DESC" HeaderText="Description">
<HeaderStyle Width="200px" />
</asp:BoundField>
<asp:BoundField HeaderText="Category" DataField="CAT_NAME" />
<asp:BoundField HeaderText="Workflow Type" DataField="WFTYPE_DESCRIPTION" />
<asp:BoundField HeaderText="Owner" DataField="EMP_CALLING_NAME" />
<%# if(Eval("EXP_PENDING_APPR").ToString() == "0") { %>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ViewImageButton1" runat="server" CommandArgument='<%# Eval("TEMPL_ID") %>'
ImageUrl="Images/jdAttView.gif" OnCommand="btnViewTemplate_Click" ToolTip="View and download template" />
</ItemTemplate>
</asp:TemplateField>
<% } %>
</Columns>
<EmptyDataTemplate>
No templates have been assigned to you security capabilites, Please contact your
local administrator for more information.
</EmptyDataTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:GridView>
The error with this code
The error with this code
You can apply condition on server control itself.
<asp:ImageButton Visible='<%# Eval("EXP_PENDING_APPR").ToString().Equals("0") %>' ID="ViewImageButton1" runat="server" CommandArgument='<%# Eval("TEMPL_ID") %>' ImageUrl="Images/jdAttView.gif" OnCommand="btnViewTemplate_Click" ToolTip="View and download template" />
Note: when I added an action column with edit delete image into a Telerik grid, the whole grid is disturbed as shown in screenshot.
This only occurs when I want to add action column.
Any help will be highly apprecieted.
Thank you
<telerik:radgrid id="RadGrid1" runat="server" pagesize="20" width="100%"
autogeneratecolumns="False">
<MasterTableView Name="MasterView1" DataKeyNames="Regid" AllowMultiColumnSorting="false">
<ItemStyle CssClass="GridRow1" />
<AlternatingItemStyle CssClass="GridRow2" />
<Columns>
<telerik:GridTemplateColumn HeaderText="Action" DataField="Regid" UniqueName="CkboxDelKey" HeaderStyle-CssClass="LeftGridHeader">
<ItemTemplate>
<nobr>
<asp:ImageButton ID="btnNoteEdit" ToolTip="Edit Goal" ImageUrl="images/EmailAlertEdit.png"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Regid") %>' CommandName="UpdateKeyResult"
runat="server" />
<ItemStyle Width="90px" />
<asp:ImageButton ID="btnDel" ToolTip="Delete Goal" ImageUrl="images/EmailAlertDelete.png"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Regid") %>' CommandName="DelNote" OnClientClick="javascript:return confirm('Are you sure you want to Delete?');"
runat="server" />
<ItemStyle Width="90px" />
</nobr>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" HeaderStyle-CssClass="GridHeader"
SortAscImageUrl="images/EmailAlertsGridAsc.png" SortDescImageUrl="images/EmailAlertGridDesc.png"
SortExpression="LastName" UniqueName="LastName">
<ItemStyle Width="90px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Firstname" HeaderText="Firstname" HeaderStyle-CssClass="GridHeader"
SortAscImageUrl="images/EmailAlertsGridAsc.png" SortDescImageUrl="images/EmailAlertGridDesc.png"
SortExpression="Firstname" UniqueName="Firstname">
<ItemStyle Width="90px" />
</telerik:GridBoundColumn>
<%-- <telerik:GridBoundColumn DataField="KeyResult" HeaderText="Key Result Score" HeaderStyle-CssClass="GridHeader"
SortAscImageUrl="images/EmailAlertsGridAsc.png" SortDescImageUrl="images/EmailAlertGridDesc.png"
SortExpression="KeyResult" UniqueName="KeyResult">
<ItemStyle Width="80px" />
</telerik:GridBoundColumn>--%>
</Columns>
</MasterTableView>
</telerik:radgrid>
What do you expect it to do? At it's heart, the RadGrid is just a table element with rows and columns. If you add one more cell to one of the rows, it will not look right. I suggest making a GridTemplateColumn for every row and deciding whether to show the buttons or not within this cell.
my gridview has a approve button in every row and can approve rows when clicked, but i want to add a function where when the user clicks "Approved" there will be a messagebox or confirmation screen if the user is sure to approve the request. here is my code for the gridview, thanks in advance!
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="TransactionID" OnRowDataBound="GridView1_OnRowDataBound" OnRowCommand="GridView1_RowCommand" CellPadding="4" AllowPaging="true" PageIndex="2" OnPageIndexChanging="GridView1_PageIndexChanging" HeaderStyle-BackColor ="CornflowerBlue" BorderWidth="1" BorderColor="CornflowerBlue" Width="100%" CssClass=" table table-hover" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkHeader" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<img style="cursor:pointer" src ="../Images/Icons/plus2.png" title="Click to expand and view item/s" />
<asp:Panel ID ="pnlDetails" runat="server" Style="display: none">
<asp:GridView ID="gvDet" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid">
<Columns>
<asp:BoundField ItemStyle-Width="200px" DataField="ItemType" HeaderText="Type" />
<asp:BoundField ItemStyle-Width="250px" DataField="ItemModel" HeaderText="Model" />
<asp:BoundField ItemStyle-Width="140px" DataField="ItemQuantity" HeaderText="Requested Quantity" />
<asp:BoundField ItemStyle-Width="80px" DataField="ItemUnit" HeaderText="Unit" />
<asp:BoundField ItemStyle-Width="100px" DataField="ItemDate" HeaderText="Date Needed" DataFormatString="{0:yyyy-dd-MM}" HtmlEncode="false" />
<asp:BoundField ItemStyle-Width="200px" DataField="ItemDesc" HeaderText="Description" />
<asp:ButtonField ButtonType="Button" CommandName="ApproveRow" HeaderText="Approve" ItemStyle-CssClass="deleteLink" Text="Approve" ControlStyle-CssClass="btn btn-primary" HeaderStyle-ForeColor="White" HeaderStyle-Font-Names="Calibri" ItemStyle-Font-Names="Calibri" />
</Columns>
<HeaderStyle BackColor="CornflowerBlue" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
</Triggers>
</asp:UpdatePanel>
try this instead of ButtonField column
<asp:TemplateField HeaderText="Approve">
<ItemTemplate>
<asp:Button ID="Button1" runat="server" Text="Approve" CommandName="ApproveRow" OnClientClick="return confirm('Are you sure ?')" />
</ItemTemplate>
</asp:TemplateField>
you can simply put OnClientClick="return confirm('Are you sure you want to delete this event?');" in your Button HTML like below:
<asp:ButtonField ButtonType="Button" CommandName="ApproveRow" HeaderText="Approve" ItemStyle-CssClass="deleteLink" Text="Approve" ControlStyle-CssClass="btn btn-primary" HeaderStyle-ForeColor="White" HeaderStyle-Font-Names="Calibri" ItemStyle-Font-Names="Calibri" OnClientClick="return confirm('Are you sure you want to do this event?');" />
I have the following Gridview. I need sorting arrows in every column header for sorting. I have set AllowSorting property to true.But it is not showing the arrows.Additionally, I added SortExpression to template fields .Still it is not showing the sorting arrows. I couldn't understand the issue. How can I fix this issue?
The code is given below
<asp:GridView ID="dgvCatReport" runat="server"
AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None"
AllowPaging="True"
AllowSorting="true"
OnPageIndexChanging="dgvCatReport_PageIndexChanging"
PagerSettings-Mode="NumericFirstLast"
PagerSettings-Position="TopAndBottom"
PageSize="10"
CssClass=" table table-striped table-hover"
AlternatingRowStyle-CssClass="alt"
PagerStyle-CssClass="bs-pagination">
<columns>
<asp:templatefield headertext="Category Name" sortexpression="CatName">
<itemtemplate>
<h5><%# Eval("CatName") %></h5>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="200px" />
</asp:templatefield>
<asp:templatefield headertext="Total Views" sortexpression="ReportCount">
<itemtemplate>
<span><%# Eval("ReportCount") %></span>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="75px" />
</asp:templatefield>
<asp:templatefield headertext="Daily Views" sortexpression="DailyCount">
<itemtemplate>
<span><%# Eval("DailyCount") %></span>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="75px" />
</asp:templatefield>
<asp:templatefield headertext="Weekly Views" sortexpression="WeeklyCount">
<itemtemplate>
<span><%# Eval("WeeklyCount") %></span>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="75px" />
</asp:templatefield>
<asp:templatefield headertext="Monthly Views" sortexpression="MonthlyCount">
<itemtemplate>
<span><%# Eval("MonthlyCount") %></span>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="75px" />
</asp:templatefield>
</columns>
<%-- <pagersettings mode="NumericFirstLast" position="TopAndBottom"></pagersettings>
<pagerstyle backcolor="White" cssclass="pgr"></pagerstyle>--%>
</asp:GridView>
I'm not sure if Asp.net grid provides default images for sorting. But you can still use a custom approach to show images.
set the Gridview properties
SortedAscendingHeaderStyle-CssClass="sortasc"
SortedDescendingHeaderStyle-CssClass="sortdesc"
Add css classes:
th.sortasc a
{
display:block; padding:0 4px 0 15px;
background:url("images/icons/ascArrow.png") no-repeat;
}
th.sortdesc a
{
display:block; padding:0 4px 0 15px;
background:url("images/icons/descArrow.png") no-repeat;
}
I have grid named 'GridView1' and displaying columns like this
<asp:GridView ID="GridView1" OnRowCommand="ScheduleGridView_RowCommand"
runat="server" AutoGenerateColumns="False" Height="60px"
Style="text-align: center" Width="869px" EnableViewState="False">
<Columns>
<asp:BoundField HeaderText="Topic" DataField="Topic" />
<asp:BoundField DataField="Moderator" HeaderText="Moderator" />
<asp:BoundField DataField="Expert" HeaderText="Expert" />
<asp:BoundField DataField="StartTime" HeaderText="Start" >
<HeaderStyle Width="175px" />
</asp:BoundField>
<asp:BoundField DataField="EndTime" HeaderText="End" >
<HeaderStyle Width="175px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Join" ShowHeader="False">
<ItemTemplate>
<asp:Button ID="JoinBT" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="Join" Text="Join" Width="52px" />
</ItemTemplate>
<HeaderStyle Height="15px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Here what is my requirement is whenever we right click on each row in gridview ,it should display three option join meeting(if we click it will go to
meeting.aspx),,view details(will go to detail.aspx),,Subscribe(subscribe.aspx) just like when we click right any where we can see view,sortby,refresh
like that..Do we need to implement javascript here