We Keep Coding

gridview row delete confirmation box

I need to show a delete conformation box on Gridview delete. with OnClientClick confirmation box, I am showing a simple Internet explore box for delete confirmation. Is it possible to show a fancy box for this. below is my JavaScript code that exists inside the gridview code:
OnClientClick="return DeleteItem();"
Below is my Gridview
<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5" GridLines="None" OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
<Columns>
<asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
<asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row" />
<ItemTemplate>
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" title='Remove' CommandName="delete" OnClientClick="return DeleteItem();" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
This is my Javascript function:
<script type="text/javascript">
function DeleteItem() {
if (confirm("Delete this Location?")) {
return true;
} else {
return false;
}
}
</script>
above code is showing this confirmation window:
I want to show something like this:
any help will be apprecaited.

It's not possible to add css to a confirm box. You can implement your own JavaScript popup.
Alternatively there are many plugins that can do this. One of the most popular JQuery plugins is JQuery UI dialog https://jqueryui.com/dialog/#modal-confirmation
As an as illustration for integrating JQuery UI Dialog with an ASP.NET Gridview, try something like:
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" title='Remove' CommandName="delete" class="button-delete" />
You don't need OnClientClick="return DeleteItem();"
The css class can be used as a reference for an onclick event.
JavaScript:
$(function() {
// Create click handler
$('.ui-search-result-table').on('click', 'button-delete', function(e) {
e.preventDefault($(this)); // $(this) should be a reference to imgbtnDelete
showDialog();
});
// Create the dialog popup
function showDialog(button) {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Remove": function() {
$(button).click(); // This should click imgbtnDelete
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
});
HTML for popup
<div style="display: none;">
<div id="dialog-confirm" title="Remove Item?">
<p>Are you sure you want to remove this item?</p>
</div>
</div>
Note: This example is for illustration purposes. You will need to have a play around with your solution to get it working.

auto scroll to dynamically generated control in ASP.NET

So I have an button that generates a control when clicked. It's nested inside an update panel inside a div, that will create a scroll bar when it overflows in the y-direction. Currently, when I click the button and it's already overflowing, the control will be created, though it will not scroll to it. So it seems like nothing happened at all. I want the scroll bar to roll down to where the control is created so it is more user-friendly.
I've tried Page.SetFocus(control) and control.Focus(), but both don't work. I've look up other posts but they don't quite solve the problem as my generated control is inside an updatePanel.
<!-- add button and dynamic control area -->
<asp:Button ID="addStreamButton" runat="server" Text="+" OnClick="AddStreamButton_Click" Width="30px" Height="30px" Tooltip="add new stream"/>
<div class="col-sm-6">
<asp:UpdatePanel runat="server" ID="updatePanelPlaceholder" ChildrenAsTriggers="false" UpdateMode="Conditional"
style="width:650px; height:550px; overflow-y:auto; overflow-x:hidden">
<ContentTemplate>
<div class="row">
<asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addStreamButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<script type="text/html">
function scrollToControl(controlName) {
document.getElementById(controlName).scrollIntoView();
}
</script>
</div>
protected void AddStreamButton_Click(object sender, EventArgs e)
{
var userControl = (DataStreamSelector)Page.LoadControl("~/DataStreamSelector.ascx");
userControl.ID = "DynamicControl" + ControlCount;
ControlCount++;
ph1.Controls.Add(userControl);
//Page.Focus(userControl);
Page.SetFocus(userControl);
}

You need to call it on the client side. Add this AddStreamButton_Click instead of the focus code:
ScriptManager.RegisterClientScriptBlock(this, GetType(), "none", "<script>scrollToControl('" + userControl.ID.ToString() + "');</script>", false);
That will call your scrollToControl method you already have defined.

Html Input button to perform print from inside a gridview

I have the following code:
<asp:GridView ID="GridViewProducts" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="GridViewProducts_SelectedIndexChanged" OnRowDataBound="GridViewProducts_Bound" CssClass="gridviewproducts"
DataKeyNames="ID">
<asp:BoundField DataField="id" />
<asp:BoundField DataField="nAME" />
<asp:TemplateField>
<ItemTemplate>
<input type="button" id="btnPrint" value="Print" runat="server" onserverclick="Button_ShowDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
and my javascript :
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>Bestilling</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="Content/Site2.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
And the html:
<div> ... some info to be printed ... </div>
This works if the button is outside the gridview, but now since it's performing some server side action, it's not working. I'm not getting any error messages either, it's simply just doing nothing.

Take a look at the generated HTML. You will see that the ID of button btnPrint has been renamed to something like GridViewProducts_btnPrint_0 because there are more that one in a GridView (or Repeater etc).
Better bind on a class name in the GridView, so give your buttons a class name.
<input type="button" id="btnPrint" class="PrintButton" value="Print" runat="server" />
And then bind the click to all the buttons with that class inside the GridView.
<script type="text/javascript">
$("#<%= GridViewProducts.ClientID %> .PrintButton").click(function () {
//do your stuff
});
</script>

javascript function make a full postback in an update panel

I call the following javascript function in an update panel which refresh my page although it is in an update panel!!
<script type="text/javascript" language="javascript">
function get_emp_num(source, eventArgs) {
var txt_emp_num = "<%= txt_RequestEmpNum.ClientID %>";
document.getElementById(txt_emp_num).value = eventArgs.get_value();
__doPostBack("<%=txt_RequestEmpNum.ClientID %>");
}
function get_person_num(source, eventArgs) {
var txt_person_num = "<%= txt_RequestPersonNum.ClientID %>";
document.getElementById(txt_person_num).value = eventArgs.get_value();
__doPostBack("<%=txt_RequestPersonNum.ClientID %>");
}
</script>
I don't want this script to change the partial post back behavior of my update panel .how to do that ?

What is your postback control and is it setup as an async trigger on the update panel? Based on the code you posted, I suspect that txt_RequestEmpNum and txt_RequestPersonNum are text boxes. Those controls don't natively support postbacks. What you need is a hidden button on the page that your javascript will "click" to send the postback. Something like this:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txt_RequestEmpNum" runat="server" />
<asp:TextBox ID="txt_RequestPersonNum" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<div style="display: none;">
<asp:Button id="Button1" runat="server" OnClick="Button1_Click" />
</div>
<script>
function get_emp_num(source, eventArgs) {
// I am unsure what your intent was with the code here so I removed it
__doPostBack("<%=Button1.UniqueID %>", "");
}
function get_person_num(source, eventArgs) {
// I am unsure what your intent was with the code here so I removed it
__doPostBack("<%=Button1.UniqueID %>", "");
}
function refresh_using_jquery() {
__doPostBack($('#<%=Button1.ClientID %>').attr('name'), '');
}
</script>

If you're looking to not do a full page postback then you'll want to implement a solution that uses AJAX. I would go with using jQuery because it makes using AJAX somewhat easier (in my opinion, anyway).

How to avoid the page refresh at each server side event in asp.net?

I've designed a web page in asp.net. And in that page i placed html control too like <a> & <div>. I have written one java script function which is hiding the <div> when i'm clicking on the <a> tag. Its working fine. But when i'm clicking on the asp.net button then page refresh occur again. And it is loading my previous design of the page. I set the display:none of the <div> at the design time. so it is hiding my <div> again when occuring any other server side event. And i don't want let it happen.
Javascript function-
<script language="javascript" type="text/javascript">
function toggle5(showHideDiv, switchTag) {
try {
'<%Session["temp"] = "'+more+'"; %>';
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchTag);
if (ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = 'More';
}
else {
ele.style.display = "block";
imageEle.innerHTML = 'Less';
}
}
catch (err) {
alert("Error");
}
}
</script>
html code is-
<div id="divSearch" style="float:left;height:100%;width:100%;">
<span style="float:right;height:27px;"><a id="displayText" href="#" onclick="javascript:toggle5('toggleText', 'displayText');">More</a></span>
</div>
<div id="toggleText" style="display:none;height:100%;width:100%;">
<div id="divCalls" style="width:24%;float:left;height:30%;">
<span style="float:left;width:100%;color:#3b5998;">
<asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in "
AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
<asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</div>
</div>
C#.net code of the Checkbox-
protected void chkNoCall_CheckedChanged(object sender, EventArgs e)
{
if (chkNoCall.Checked == true)
{
txtNoCall.Enabled = true;
}
else
{
txtNoCall.Enabled = false;
txtNoCall.Text = "";
}
}
How to solve this problem?
thanks

put this data inside the updatepanel like this
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<span style="float:left;width:100%;color:#3b5998;">
<asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in "
AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
<asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</ContentTemplate>
</asp:UpdatePanel>
hope this help

In your button click event, return false. this will prevent postback.

Use ajax to get the server side data instead of submitting the page.

Try one of the following:
remove runat=server from the component (a component with runat=Server always submits a form.
use standard html controls
use javascript for html controls
it it's a component with autopostback feature; make autopostback=false