I'm trying to insert the icon trash from Bootstrap but I can't, so I don't know if that is possible.
The only thing that I can insert was the class of the Button
<asp:buttonfield buttontype="button" ControlStyle-CssClass="btn btn-danger" Text="Details" commandname="Delete" />
So, does someone knows how can I put the Glyphicon of trash? I'm using the Button into a GridView
How my button looks like
How I want
<asp:GridView runat="server" ID="gridTest">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash"></span>Trash
</button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Related
I'm trying to put the following LinkButton into a GridView. Note the data-extend element of the LinkButton.
<asp:GridView ID="gvButtons" runat="server" AutoGenerateColumns="False" DataKeyNames="TrainingSwipeID"
CssClass="table table-bordered table-hover" ShowFooter="False">
<Columns>
<asp:TemplateField HeaderText="QuestionID" SortExpression="TrainingSwipeID">
<ItemTemplate>
<asp:LinkButton id="btnExtend" runat="server"
class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
data-extend='{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}'
data-toggle="modal" data-target="#myModal" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ID" SortExpression="TrainingSwipeID">
<ItemTemplate>
<asp:Label id="lblSwipeID" runat="server" Text='<%# Eval("TrainingSwipeID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date" SortExpression="TrainingEnd">
<ItemTemplate>
<asp:Label id="lblExtendDate" runat="server" Text='<%# Eval("TrainingEnd") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The problem is the code in the LinkButton
data-extend='{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}'
When the page gets rendered I get the following as an example for the LinkButton.
<tr>
<td>
<a id="gvButtons_btnExtend_0" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog" data-extend="{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}" data-toggle="modal" data-target="#myModal" href="javascript:__doPostBack('gvButtons$ctl02$btnExtend','')"></a>
</td>
<td>
<span id="gvButtons_lblSwipeID_0">135</span>
</td>
<td>
<span id="gvButtons_lblExtendDate_0">2/10/2019 9:00:00 AM</span>
</td>
</tr>
How do I get the data-extend element within the LinkButton to render properly? It should render like this.
data-extend='{"TrainingSwipeID":135,"CurrentDate":"2/10/2019 9:00:00 AM"}'
ADDITIONAL INFO:
Here is the Javascript I use to open the modal dialog when the user clicks on the LinkButton:
<script>
$(function () {
$('#myModal').on('show.bs.modal', function (e) {
var ele = e.relatedTarget;
var sTrainingSwipeID = $(ele).data('extend').TrainingSwipeID;
var sCurrentDate = $(ele).data('extend').CurrentDate;
$("#TrainingSwipeID").val(sTrainingSwipeID);
$("#CurrentDate").val(sCurrentDate);
});
});
</script>
As well, here is the modal:
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Extend Date</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<asp:HiddenField ID="TrainingSwipeID" runat="server"></asp:HiddenField>
<asp:TextBox ID="CurrentDate" runat="server" autocomplete="off"></asp:TextBox>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<asp:Button ID="btnExtendFromModal" runat="server" Text="Extend" class="btn btn-primary" OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal" />
<button type="btnClose" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks #AlexKudryashev, you were able to help me get to the final solution. It seems there is a "bug" with ASP.Net in returning single and double quotes in strings (in my case used for Javascript) from code behind with server side controls. So finally tried the following which worked.
Create a data table and get each requested row from the database.
Format a text string from each returned row from the database and put it into a row in the data table.
Use the data table as the data source for the GridView.
Use a regular hyperlink tag in the GridView, not using the runat="server".
For reference:
Formatted string from the database in code behind to be put into the data table in the DataExtendText column:
sDataExtendText = "{\"TrainingSwipeID\":" + iTrainingSwipeID + ",\"CurrentDate\":\"" + sNextReviewDateNoFormat + "\"}";
The regular hyperlink tag in the GridView getting it's data from the DataExtendText column in the data table:
<a id="btnExtend" class="btn btn-outline-success btn-med" data-extend='<%# Eval("DataExtendText") %>' data-toggle="modal" data-target="#myModal">Extend</a>
I try to delete data that display in GridView after confirm it using twitter bootstrap. my gridview with modal-dialog as follow
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title clearfix ">
<div>
<b>Name</b>
<div style="float: left;">
</div>
</div>
</h2>
</div>
<div class="panel-body">
<div>
<asp:GridView ID="gridView" DataKeyNames="Id" runat="server"
CssClass="table table-striped table-bordered table-hove"
AutoGenerateColumns="False" HeaderStyle-Font-Bold="true"
OnRowEditing="gridView_RowEditing"
OnRowCancelingEdit="gridView_RowCancelingEdit"
OnRowUpdating="gridView_RowUpdating"
OnRowDeleting="gridView_RowDeleting"
OnRowCommand="gridView_RowCommand">
<Columns>
<asp:TemplateField HeaderText="ID" ControlStyle-Width="0px">
<ItemTemplate>
<asp:Label ID="txtid" runat="server" Text='<%#Eval("Id") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblid" runat="server" Width="40px" Text='<%#Eval("Id") %>' />
</EditItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblLName" runat="server" Text='<%#Eval("Location_name") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtLName" CssClass="form-control" runat="server" Text='<%#Eval("Location_name") %>' />
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="LocName" AutoCompleteType="Disabled" runat="server" />
<asp:RequiredFieldValidator ID="ReqBrName" runat="server" ControlToValidate="BrName" Display="Dynamic" CssClass="valid" ErrorMessage="?" ValidationGroup="validaiton" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Options">
<ItemTemplate>
<asp:LinkButton ID="lbEdit" CssClass="btn btn-default btn-sm " runat="server" CommandName="Edit">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit</asp:LinkButton>
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm " runat="server" CommandArgument='<%#Eval("Id")%>' OnClientClick="return ConfirmDelete()">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</asp:LinkButton>
<%-- Delete Form --%>
<div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="">Delete the data</h4>
</div>
<div class="modal-body">
Are You sure?
<asp:Label ID="lblLName1" runat="server" Text='<%#Eval("id") %>' />
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default glyphicon glyphicon-remove" data-dismiss="modal">Cancel</button>
<asp:LinkButton ID="lbde" CssClass="btn btn-default btn-sm " runat="server" CommandName="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
</asp:LinkButton>
</div>
</div>
</div>
</div>
<%-- Delete Form --%>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="lbUpdate" CssClass="btn btn-default btn-sm " runat="server" CommandName="Update">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Update
</asp:LinkButton>
<asp:LinkButton ID="lbCancel" CssClass="btn btn-default btn-sm " runat="server" CommandName="Cancel">
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span> Cancel
</asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle Font-Bold="True"></HeaderStyle>
</asp:GridView>
</div>
</div>
</div>
and my JavaScript function is
<script>
function ConfirmDelete() {
$('#DeleteModal').modal()
return false;
}
</script>
so when I try to delete the record by using the popup model it's not working, the model will work fine but the data in lblLName1 allows will be the first record ID so when I confirm the first record will be deleted
could anyone helps me in that??
Thanks everyone
after trying several ways I found the solution.
first, change the calling button from
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm " runat="server" CommandArgument='<%#Eval("Id")%>' OnClientClick="return ConfirmDelete()"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</asp:LinkButton>
to
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm" runat="server" CommandArgument='<%#Eval("Id")%>'
OnCommand="lbDelete_Command" CommandName='<%#Eval("Location_name")%>'>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> حذف</asp:LinkButton>
and in c# call function under lbDelete_Command
protected void lbDelete_Command(object sender, CommandEventArgs e)
{
foreach (GridViewRow row in gridView.Rows)
{
HiddenField hf_id = row.FindControl("hf_Del_ID") as HiddenField;
Label l_name = row.FindControl("lb_Del_Name") as Label;
l_name.Text = e.CommandName.ToString();
hf_id.Value = e.CommandArgument.ToString();
}
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { ConfirmDelete(); });", true);
}
and I edit the fields under modal-body division like follow
<div class="modal-body">
<asp:HiddenField ID="hf_Del_ID" runat="server" />
Are You sure?
<h4><asp:Label ID="lb_Del_Name" runat="server"/></h4>
</div>
I use the hidden field hf_Del_ID for delete purpose
and the label lb_Del_Name for display only
and also the deleting SQL in C# as follow
try
{
HiddenField hf_id = (HiddenField)gridView.Rows[e.RowIndex].FindControl("hf_Del_ID");
con.Open();
SqlCommand cmd = new SqlCommand("delete from TABLE_NAME where Id=" + hf_id.Value, con);
int result = cmd.ExecuteNonQuery();
con.Close();
if (result == 1)
{
loadData();
lbl_msgDet.ForeColor = Color.Red;
lbl_msgDet.Text = " delete done";
}
}
catch (SqlException ex)
{
lbl_msgDet.ForeColor = Color.Red;
lbl_msgDet.Text = (String)GetGlobalResourceObject("Err_msg", "MsgDeleteErr") + "<br/>" + ex.Message;
}
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { CallMsg(); });", true);
I hope the solution helps
Thanks
this works for me... very easy
<asp:DataGrid runat="server" ID="dgMyGrid" ValidationGroup="grdMyGrid" OnDeleteCommand="dgRel_DeleteCommand" AutoGenerateColumns="false">
<Columns>
<asp:TemplateColumn HeaderText="FirstColumn">
<ItemTemplate>
<asp:Label runat="server" ID="FirstColumnID" Text='<%# getFirstColumnName(Eval("FirstColumn").ToString())%>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<div class="modal" id="myModal<%#Eval("MyIDToBound").ToString()%>">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="modal-help-text">Are you sure to remove item?</p>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btnDelete" CssClass="btn btn-secondary" CommandName="Delete" Text="Yes"/>
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<button type="button" data-toggle="modal" data-target="#myModal<%#Eval("MyIDToBound").ToString()%>">
<asp:Label runat="server" ID="lblDeleteButton" Text="Delete"></asp:Label>
</button>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
I am trying to hide a Panel in Gridview but I get
Object reference not set to an instance of an object.
Here is the code I am using:
Protected Sub gvTally_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvTally.RowDataBound
If e.Row.Cells(2).Text = "Incomplete" Then
Dim Panelhide As Panel = CType(e.Row.FindControl("Panel1"), Panel)
Panelhide.Visible = False
Else
Dim Panelhide As Panel = CType(e.Row.FindControl("Panel1"), Panel)
Panelhide.Visible = True
End If
End Sub
And here is my Gridview:
<asp:GridView ID="gvTally" runat="server" EnableModelValidation="True"
AllowSorting="True" OnRowDataBound="gvTally_RowDataBound" class="table table-condensed table-striped table-bordered table-hover no-margin" AutoGenerateColumns="False" Font-Size="Small">
<Columns>
<asp:BoundField DataField="Company" HeaderText="Company">
<ItemStyle Width="180px" />
</asp:BoundField>
<asp:BoundField DataField="Submitted" HeaderText="Submitted" />
<asp:BoundField DataField="Variance" HeaderText="Variance" />
<asp:BoundField DataField="Accepted" HeaderText="Accepted" />
<asp:TemplateField HeaderText="Action" ShowHeader="False">
<ItemTemplate>
<asp:Button ID="Button3" runat="server" CssClass="btn btn-warning btn-small" Text="Unaccept" CommandName="Unaccept" Visible="False" />
<asp:Button ID="Button2" runat="server" CssClass="btn btn-success btn-small hidden-phone" Text="Accept" CommandName="Accept" />
<asp:Panel ID="Panel1" runat="server">
<a href="#accSettings3" role="button" class="btn btn-success btn-small hidden-phone" data-toggle="modal" data-original-title="">Accept
</a>
<div id="accSettings3" class="modal hide fade" tabindex="-3" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 id="myModalLabel3">Accept Validation
</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
Are you sure you want to accept the tally with the variance off?
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnacceptchanges" class="btn btn-primary" runat="server" Text="Yes" />
<button class="btn" data-dismiss="modal" aria-hidden="true">
No
</button>
</div>
</div>
</asp:Panel>
<asp:Button ID="Button1" runat="server" CssClass="btn btn-info btn-small" Text="View" CommandName="View" />
</td>
</tr>
</ItemTemplate>
<ItemStyle Width="160px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
I am not sure why I cannot hide this Panel that contains other HTML and another Button Control even when I use FindControl.
I have other FindControls that work perfectly fine, but this one gives me the error that it cannot find the Panel1.
I am using the panel just to hide the code inside it.
This probably has nothing to do with the panel.
Make sure you have a data row and not a header or something.
If e.Row.RowType = DataControlRowType.DataRow Then
...
End If
I have a gridview containing membership providers roles.
With Link Button For editing and Link button for deleting.
I want to populate a modal with a text box inside it to save the role name as shown.
I succeeded in populating the modal and binding the grid and all of that, but, how can I bind the txtRoleName in the modal with the role name of the row? Preferably without any postback if possible, or with postback if not.
Here is the code for the grid:
<asp:GridView ID="grdRoles"
CssClass="table table-bordered responsive"
runat="server"
GridLines="None"
CellSpacing="-1"
AutoGenerateColumns="False"
OnPageIndexChanging="grdRoles_PageIndexChanging"
OnRowDataBound="grdRoles_RowDataBound"
ShowFooter="True" ShowHeaderWhenEmpty="True" EmptyDataText="Empty !">
<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate>
<asp:Label ID="lblRank" runat="server" Text='<%# Container.DataItem %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Roles">
<ItemTemplate>
<asp:Label ID="lblRoleName" runat="server" Text='<%# Container.DataItem %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="btnEdit" data-toggle="modal" href="#EditModal" runat="server" CssClass="btn icon-edit" />
<asp:LinkButton ID="btnRemove" runat="server" CssClass="btn btn-danger remove" Text="<i class=icon-remove></i>" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And this is the code for the modal:
<div id="EditModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Edit"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="helpModalLabel"><i class="icon-external-link"></i> Edit Role</h3>
</div>
<div class="modal-body">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">Role Name</span>
<asp:TextBox ID="txtRoleName" Text='<%# Bind("RoleId") %>' runat="server"></asp:TextBox>
</div>
</div>
<div class="form-actions">
<asp:Button ID="btnSave" type="submit" class="btn btn-primary" runat="server" Text="Save" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
I am using data property to send data to the modal:
<a id="edit" href="#dlgName" data-toggle="modal" role="button"
data-id="<%# DataBinder.Eval (Container.DataItem, "Id") %>"
data-IsPrimary ="<%# DataBinder.Eval(Container.DataItem, "IsPrimary") %>" >Edit</a>
And, retrieve the data using jQuery:
var Id = $('#edit').data('Id');
var isprimary = $('#edit').data('IsPrimary');
hello friends i want to use Bootstrap like icons with button but when i try using it in my asp.net project the image doesnt shows can you please tell me how to use bootstrap icon with buttons i have tried this code
<i class="icon icon-ok"><asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit"
CssClass="btn btn-small btn-primary" /></i>
and this one too
<asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit"
CssClass="btn btn-small btn-primary" ><i class="icon icon-ok"></i> </asp:Button>
also i tried using this <asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit <i aria-hidden=true class=icon-ok icon-white></i>" CssClass="btn btn-small btn-primary" />
but it dont work please someone post a solution how to make it work ???
LinkButton, like this...
<asp:LinkButton ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" CssClass="btn btn-small btn-primary"><i class="icon icon-ok"></i> Submit</asp:LinkButton>
https://stackoverflow.com/a/11373500/1315626
<button type="button" onserverclick="Unnamed_ServerClick" class="btn btn-default " runat="server" > <span class="glyphicon glyphicon-search"></span></button>