i have a page that has a grid with rows of data and it has url hidden in each row n when a row is clicked it opens new tabed window and the parent page still stays open with the grid data. i want to have a button that does the same . my aspx is
<script type="text/javascript" id="igClientScript">
function NavigateOnClick(sender, eventArgs) {
try {
var row = eventArgs.get_item().get_row().get_index();
var url = sender.get_rows().get_row(row).get_cell(0).get_text();
window.open(url);
}
catch (e) {
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Entity"></asp:Label>
<asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Select Entity</asp:ListItem>
</asp:DropDownList>
<asp:Label runat="server" ID="EntityName"></asp:Label>
<asp:Button ID="newEntity" runat="server" Visible="false" OnClick="newEntity_Click" OnClientClick="aspnetForm.target ='_blank';" />
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager>
<ig:WebDataGrid ID="EntityGrid" runat="server" Width="100%" Height="50%" StyleSetName="Claymation" >
<Columns>
</Columns>
<ClientEvents Click="NavigateOnClick" />
</ig:WebDataGrid>
</div>
I want something like window.open =(entity,_newtab) without doing a page post back how can i get this?
Just use
window.open(url, 'random_name');
Refer this: http://www.w3schools.com/jsref/met_win_open.asp
Add an attribute to your button:
target="_blank"
button.attributes.add("target","_blank");
here is what worked part of my problem was that the url is dynamic i created a label that is updated on dropdown selection and pass the label text while creating the url instead of asp button went with html button function opentab(sender, eventArgs) {
try {
var name = document.getElementById('EntityName');
var url = name.textContent;
window.open(url+"Edit.aspx");
}catch(e){
}
}which wont cause a postback
Related
I thought this could be easily achieved with Jquery or ASP.NET Ajax but not finding a solution or able to create one. I'm close with the below but not able to return value to lblStatus during loop. Or maybe way to use just Jquery and AJAX.
JQuery
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script>
function validateAdd() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.show();
return true;
}
</script>
HTML
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server" BackgroundCssClass="ModalBackground" BehaviorID="ProgressBarModalPopupExtender" TargetControlID="hiddenField" PopupControlID="Panel1" DynamicServicePath="" Enabled="True" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
<p class="wait">Please wait!</p>
<asp:Label ID="lblStatus" runat="server" Text=""></asp:Label>
</asp:Panel>
<asp:HiddenField ID="hiddenField" runat="server" />
<input type="submit" value="Process Records" id="process" causesvalidation="False" onclick="javascript: return validateAdd();" onserverclick="btnProcess_ServerClick" runat="server" />
</form>
Then on the code behind, do a loop and push status on each loop and then hide process dialog. If I could show progress even better, but just trying to show current record processing.
protected void btnProcess_ServerClick(object sender, EventArgs e)
{
//Example Test Looping Through Slow Process
string[] arr1 = new string[] { "record_one", "record_two", "record_three" };
foreach( string s in arr1)
{
lblStatus.Text = "Processing.." + s;
Thread.Sleep(2000);
}
ProgressBarModalPopupExtender.Hide();
}
I tried a lot but couldn't figure it out. I wanted to pass data on my javascript function.
I am saving data on hidden filed. what I want as soon I click on my button it will call javascript function & pass my hidden field vlaue.
<asp:Repeater ID="rptGallary" runat="server" >
<ItemTemplate>
<asp:HiddenField ID="hfsportsmanfeedid" runat="server" value='<%# DataBinder.Eval(Container.DataItem,"SportsmanFeedId") %>'/>
<asp:Button ID="btnLike" runat="server" Text="Like" OnClientClick="Test("How to pass here"));" />
</ItemTemplate>
</asp:Repeater>
Thanks for your help.
You just need to pass the clicked element on Test button click
Try with this code:
HTML/ASPX Markup
<asp:Button ID="btnLike" runat="server" Text="Like"
OnClientClick="Test(this);" />
Javascript
function Test(element){
var $btn = $(element) // Gets clicked button
var hiddenBValue = $btn.prev().val(); // Gets hidden element value
}
Docs
prev()
This should work!
You can pass it like,
<asp:HiddenField ID="hfsportsmanfeedid" runat="server" value='<%# DataBinder.Eval(Container.DataItem,"SportsmanFeedId") %>'/>
<asp:Button ID="btnLike" runat="server" Text="Like" OnClientClick="Test('<%# DataBinder.Eval(Container.DataItem,\"SportsmanFeedId\") %>'));" />
SCRIPT
function Test(value){
alert(value);
}
Or use prev() like,
<asp:Button ID="btnLike" runat="server" Text="Like" OnClientClick="Test(this));" />
SCRIPT
function Test(ths){
alert($(ths).prev().val());
}
Do it like this-
<asp:Button ID="btnLike" runat="server" Text="Like" OnClientClick="javascript:Test(document.getElementById('hfsportsmanfeedid').value);" />
get the value of hidden field from repeater rptGallary_ItemCommand event and pass that to java script
protected void rptGallary_ItemCommand(object source, RepeaterCommandEventArgs e)
{
//add command name to btnLike button let it bet test here
if (e.CommandName == "test")
{
HiddenField hiddenfield = (HiddenField)e.Item.Parent.Parent.FindControl("hfsportsmanfeedid");
//pass that to javascript
}
}
I basically want to ask this question(How to implement "select all" check box in HTML?) but from a asp.net point of view. There seems to be more challenges to over come when you are using asp.net to do this. The CssClass attribute generates a span container with the class you specified and it doesn't get placed on the input. Along with the challenge of masterpages and controls. I am looping through records and displaying them with a checkbox. I was hoping to grab all the checkboxes by class to perform the check all. I don't think that will be possible. Any advice?
Markup:
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" />
<asp:Table ID="tblitems" Visible="false" Width="80%" HorizontalAlign="Center" runat="server">
<asp:TableRow>
//The data gets added as a table row.
</asp:TableRow>
</asp:Table>`
Browser:
//Check All check box
<span class="CheckAll"><input id="ctl00_ContentPlaceHolder1_checkAll" type="checkbox" name="ctl00$ContentPlaceHolder1$checkAll" /></span>
//Each checkbox that will be checked looks like this
<span class="chkBox"><input id="ctl00_ContentPlaceHolder1_ctl01" type="checkbox" name="ctl00$ContentPlaceHolder1$ctl01" /></span>
JavaScript
$('.CheckAll').click(function (event) {
alert("start");
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
alert("end");
}
});
ClientIDMode property of the checkbox control will allow you to more easily work with client-side selectors, like this:
Markup:
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" ClientIDMode="Static" />
Check out the Control.ClientIDMode Property MSDN documentation.
Note: ClientIDMode is available in ASP.NET 4.0 and later.
Since each checkbox is in a span with a class 'chkBox', locate the checkboxes using that selector on the click handler:
$('.CheckAll').on('click', function (event) {
var checked = $(this).prop('checked');
$('.chkBox :checkbox').prop('checked', checked);
});
It would be more precise if you wrapped all the checkboxes you'd like to have checked in a container div:
<div id="myCheckboxes">
// .NET code here
</div>
JS:
$('.CheckAll').on('click', function (event) {
var checked = $(this).prop('checked');
$('#myCheckboxes :checkbox').prop('checked', checked);
});
Karl, I believe, has improved the approach. However, if you want to stick with what you have, modify your Javascript to be the following:
$('.CheckAll').find(':checkbox').click(function (event) {
alert("start");
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
alert("end");
}
});
The following code basically selectes all checkboxes, and change the check statuses based on the CheckAll Checkbox.
<script type="text/javascript">
$(document).ready(function () {
$('#<%= CheckAll.ClientID %>').click(function() {
var checkedStatus = this.checked;
$("input[type='checkbox']").attr('checked', checkedStatus);
});
});
</script>
<asp:CheckBox runat="server" ID="CheckAll" />
<asp:CheckBox runat="server" ID="Check1" />
<asp:CheckBox runat="server" ID="Check2" />
<asp:CheckBox runat="server" ID="Check3" />
<asp:CheckBox runat="server" ID="Check4" />
Multiple Group of CheckBoxes in a Single Page
If you have multiple groups of checkboxes in a single page, you can differentiate them with class.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication2012.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Selects all enabled checkboxes
$("#<%= CheckAll.ClientID %>").click(function () {
var checkedStatus = this.checked;
$(".myCheckBox input[type='checkbox']").attr('checked', checkedStatus);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBox runat="server" ID="CheckAll" Text="Check All" CssClass="myCheckAll" /><br />
<asp:CheckBox runat="server" ID="Check1" Text="Check1" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check2" Text="Check2" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check3" Text="Check3" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check4" Text="Check4" CssClass="myCheckBox" />
</form>
</body>
</html>
I got it to work using this script below. This not work for every scenario but it worked very well for mine so far. Thanks!
mark up
<asp:CheckBox runat="server" ID="CheckAll" OnClick="toggle(this)" />
Javascript
function toggle(source) {
checkboxes = document.getElementsByTagName('input');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
I have 2 update panel in one update panel i have a datalist and in other update panel I have a textbox with tinymce editor.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataList ID="dlst1" runat="server" RepeatDirection="Horizontal" CellSpacing="5" CellPadding="7"
DataKeyField="Id" CaptionAlign="Left" OnItemCommand="dls1_ItemCommand"
OnItemDataBound="dlst1_ItemDataBound">
<ItemTemplate>
<asp:ImageButton ID="btnImg" OnClientClick="javascript:void(0);"
runat="server" ImageUrl='<%#"~/Controls/Images.ashx?FileName=" +DataBinder.Eval(Container.DataItem, "FilePath") %>'
CommandName="Select" OnCommand="Select_Command"
CommandArgument='<%# Eval("Id").ToString() ' />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:TextBox ID="TextBox1" CssClass="tinyEditor" ClientIDMode="Static" runat="server" TextMode="MultiLine"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
for making tinymce worked I am using
ScriptManager.RegisterClientScriptBlock(UpdatePanel2, this.GetType(), "init", "tinyMCE.execCommand('mceAddControl', false, '" + TextBox1.ClientID + "');", true);
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
TinyMCEEditor();
});
$(function () {
TinyMCEEditor();
});
my TinyMCE Editor
function TinyMCEEditor() {
tinyMCE.init({
mode: "textareas",
theme: "advanced"
});
}
on page load.
I am giving the text for every image, for the previous image I am storing the textbox value in a view state, suppose I have 3 images for image 1 i have given the text abcd and selected image2, so image 1 text will store in the viewstate.
on Select_Command:
if (ViewState["txbtext"] != null)
txbtext= (Hashtable)ViewState["txbtext"];
int index1 = previouslySelectedIndex;
if (index1 != -1)
{
ImageButton imgbtn= (dlst1.Items[index1].FindControl("btnImg") as ImageButton);
if (imgbtn!= null)
{
string[] ImgStr = imgbtn.CommandArgument.ToString().Split(';');
Int32 selectedId = Convert.ToInt32(Str[0]);
if (txbtext!= null && txbtext.ContainsKey(selectedId))
txbtext[selectedId] = textbox.Text;
else
txbtext.Add(selectedId, textbox.Text);
}
}
ViewState["txbtext"] = txbtext (//this is the hashtable);
}
when I was not using update panel it was working fine, but as I am using update panel I am not able to store the textbox value in viewstate,
Please someone tell me how can I fix this issue, if possible give some exp. code.
Some one plz help me
I had the same problem with it and I decided to use another editor. Have a look at CKEditor for ASP.NET http://www.ckeditor.com/download
I have added
onchange_callback: function(ed) { ed.save(); }
for my TInyMCE Editor its working now...
Is there a way to display a gridview in a tooltip?
In the standard tooltip no, but you'd have to write your own tool tip class to accomplish this.
If you are using jquery you could do this using the QTip Plugin
.
I use QTip in a lot of apps, but I'm not sure this is the best solution.....it's a lot of overhead if this is all you're using it for, and it's really very straightforward to do it from scratch. I'd treat it as a simple tab pane that is toggled by Jquery, using a $(element).show() to make it show.
Here's a tut along those lines: http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
As an aside, while I know .net has some gridviews available, I'm in love with additional functionality that datatables provides. Far and away, this is the one JQuery plugin that my clients cite as adding true value to their apps.
i am using VS2010 and in VS 2012 intellisense is showing tooltip option in Designer page.
You can use ModalPopup to achieve it and use JavaScript to show it dynamically.
Please try the below sample:
<script type="text/javascript">
function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
function getLeft(e)
{
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
function hideModalPopupViaClient()
{
var modalPopupBehavior = $find('ModalPopupExtender');
modalPopupBehavior.hide();
}
function showModalPopupViaClient(control,id) {
$get("inputBox").innerText="You choose the item "+control.innerHTML;
var modalPopupBehavior = $find('ModalPopupExtender');
modalPopupBehavior.show();
$get(modalPopupBehavior._PopupControlID).style.left=getLeft($get('<%=DataList1.ClientID %>'))+ $get('<%=DataList1.ClientID %>').offsetWidth+"px";
$get(modalPopupBehavior._PopupControlID).style.top=getTop(control)+"px";
}
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<input id="Hidden1" runat="server" type="hidden" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" >
<ItemTemplate>
<div style="border-color:Black;border-width:1px;border-style:solid;">
<asp:Label ID="Label1" Text='<%# Eval("CategoryID") %>' runat="server"></asp:Label>
<asp:HyperLink ID="detail" runat="server" onmouseout="hideModalPopupViaClient()" onmouseover="showModalPopupViaClient(this)">'<%# Eval("CategoryID") %>'</asp:HyperLink>
</div>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Categories]"></asp:SqlDataSource>
<asp:Button runat="server" ID="showModalPopupClientButton" style="display:none"/>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="showModalPopupClientButton"
PopupControlID="programmaticPopup" RepositionMode="None"
/>
<br />
<div CssClass="modalPopup" id="programmaticPopup" style="background-color:#EEEEEE; filter:alpha(opacity=70);opacity:0.7;display:none;width:50px;padding:10px">
<span id="inputBox" ></span>
<br />
</div>
</form>
Yes, you can get the tooltip in ASP.net grid view. See the below code, which should be included in the GridView1_RowDataBound event:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
if (e.Row.RowType == DataControlRowType.Header) {
for (int i = 0; i < GridView1.Columns.Count; i++) {
e.Row.Cells[i].ToolTip = GridView1.Columns[i].HeaderText;
}
}
}