Develop Reference

i cant set command argument to an img, but when i change it to imgbtn, it cant take my onclick jquery

I am displaying a collapsible grid view, when the user clicks the img, the 2nd nested grid view collapses. It works perfectly, except the grid 2 takes a parameter of grid view1 id, to keep the rows unique to each row.
The img code works (without the command argument).
What I am trying to achieve is to pass the grid view 1 id to this nested grid function (which is behind code) so that I can have unique rows displayed. I thought about doing this with the command argument, but like I explained above, the img didn't take command argument. When I tried a btnimg, the button img could take the command argument, but it then didn't like my onclick jquery.
Code:
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton Class="btnArrow" ImageUrl="~/img/close-arrow.png"
OnClick="ShoeHide(this, 'tr<%# Eval("OrderNumber") %>');"
CommandArgument='<%#Eval("OrderNumber")%>' runat="server" />
<%-- <asp:ImageButton Class="btnArrow" ImageUrl="/img/close-arrow.png"
CommandArgument='<%#Eval("odernumber")%>'
OnClick="ShoeHide(this, 'tr<%# Eval("OrderNumber") %>')" runat="server" />--%>
</ItemTemplate>
</asp:TemplateField>

move the click event out of the element
<script type="text/javascript">
$(function () {
$('.btnArrow').click(function () {
// something here
});
}
</script>

How to open link in new page in button control in item template in grid view?

I have one item template in grid view, which contains one link. I want while clicking that button it should open in a new tab like target= "_blank".
<asp:TemplateField HeaderText="Reportd Link" ItemStyle-HorizontalAlign="center" >
<ItemTemplate>
<button onclick="location.href='<%#Eval("ReportLinks")%>'" title='<%#Eval("ReportLinks")%>'> Link</button>
</ItemTemplate>

If you want to leave the button there you can change location.href = url call with window.open(url, '_blank'); call, that would open a link in a new tab.

this will work,
<input type="button" value="button name" onclick="window.open('http://www.website.com/page')" />

In gridview try this Code
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" Text="Enter Details" OnClientClick="OpenWindow('<%# Eval("id")%>',<%# Eval("start")) %>)" />
write a javascript methods
function OpenWindow(id,start)
{
window.open('Default.aspx','_blank');
window.location.assign(Default.aspx?goalText="+ id +"&ProductID="+ start)
}

Edit mode in grid view can't find the textbox id using getElementById()

In my gridview I have a date column and in edit mode, I place there a date picker. The date picker is in javascript which uses a getElementById() to get/set the value on the textbox.
This is the code of my gridview with the date picker if in edit mode:
<asp:TemplateField HeaderText="Effective Date" HeaderStyle-CssClass="allWidth160" ItemStyle-HorizontalAlign="Center" ControlStyle-CssClass="txtCommon allWidth80 txtCenter">
<ItemTemplate>
<asp:Label runat="server" ID="lblEffDate" Text='<%#DataBinder.Eval(Container.DataItem, "EFF_DATE").ToString()%>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ClientIDMode="Static" ID="EffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' />
<img alt="Calendar" src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" />
</EditItemTemplate>
</asp:TemplateField>
I included the javascript file in the HEAD:
<script src="../Library/DateTimePicker.js" type="text/javascript"></script>
When I click the image calendar it has an error somewhere in DateTimePicker.js file which leads to this code:
exDateTime = document.getElementById(pCtrl).value;
Where pCtrl is txtEffDate.
Error: Object required
It seems that it cannot see the object txtEffDate thats why it throws that error. I think that when it is in edit mode, it only show its drawing (the textbox appear) in the browser but its ID is still missing. Any thoughts? TIA

make a new function and pass this .Like this.
onclick = "javascript: NewCssCalClick(this)"
And in js make a new function NewCssCalClick.Like this.
function NewCssCalClick(sender) {
var id = $(sender).prev()[0].id;
NewCssCal(id);
}
Note: You need to add jquery plugin for $ and prev to work

If you are using jQuery you can use
$("[id*='EffDate']")
exDateTime = $("[id*='EffDate']").val();
to get the textbox. As you will have only one text-box at a time. Because you might be editing only one row at a time.

modify the edit item template like below:
add id="imgCalander" runat="server" attributes to calander image and onclick attribute like onclick="fnShowCalander(this.id);"
in javascript define new function like below:
function fnShowCalander(senderID) {
NewCssCal(senderID.replace('imgCalander', 'EffDate'));
}
</script>

Repopulate Asp.Net DropDownList In UpdatePanel

I am having some troubles with repopulating a dropdownlist inside an updatepanel. On page load, I load the drop down list:
this.dropdownFacility.Items.Clear();
this.dropdownFacility.DataSource = table;
this.dropdownFacility.DataTextField = "FacilityName";
this.dropdownFacility.DataValueField = "FacilityID";
this.dropdownFacility.DataBind();
The variable 'table' is a DataTable that I populate from a SQL Database. This works and shows all my values after the page loads the first time. Then, inside of my page, I have a JQuery Dialog that displays:
<div id="assignmentDialog" title="Process Assignment">
<div style="margin:10px; font-size:16px; ">
<asp:Label runat="server" Text="Select A Facility:*" Font-Bold="true" style="width:140px; display:inline-block; vertical-align:text-top; text-align:right;" />
<asp:DropDownList runat="server" ID="dropdownFacility" />
<asp:LinkButton runat="server" ID="linkNewFacility" Text="New" ForeColor="Blue" OnClientClick="OpenFacilityDialog();" />
</div>
</div>
Upon clicking on the link button, another JQuery dialog displays allowing the user to enter data for a facility. When they are done, they can click a button to submit the data:
<asp:Button runat="server" ID="NewFacility" Text="Submit" OnClick="NewFacility_Clicked" OnClientClick="return CheckFacilityData();" style="display: block; text-align:center; margin: 0 auto;" />
Here is where the issue occurs. After the button is clicked, I can see the record has been inserted into the table. Also, with break points in my code during page load, I can see that after I rebind the drop down, that the number of items have increased by 1, showing that the new record is there. However, on the actual page, that new record is not displayed in the drop down. Below is how I define my update panel with the triggers:
<asp:UpdatePanel runat="server" ID="assignmentUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="NewFacility" EventName="Click" />
</Triggers>
...
Can anyone see what I am doing wrong?

Try like this:
<asp:DropDownList runat="server" ID="dropdownFacility"
AppendDataBoundItems="True" AutoPostBack="True" />
or:
this.dropdownFacility.Items.Clear();
this.dropdownFacility.DataSource = table;
this.dropdownFacility.DataTextField = "FacilityName";
this.dropdownFacility.DataValueField = "FacilityID";
this.dropdownFacility.AppendDataBoundItems = true;
this.dropdownFacility.AutoPostBack = true;
this.dropdownFacility.DataBind();

Well, I figured out the issue. Issue was actually due to the fact that I am using a JQuery Dialog with the ASP.NET UpdatePanel. The JQuery logic actually creates a new div for the dialog and places it outside of the form element. To fix this, I basically did 2 things. The first was to append the dialog back to the form by doing this:
$("#assignmentDialog").dialog(
{
modal: true,
hide: "explode",
width: 450,
autoOpen: false,
resizable: false,
open: function (event, ui)
{
$(this).parent().appendTo("form");
},
close: function (event, ui)
{
// Clear the inputs
$("#textboxStartDate").val("");
$("#textboxEndDate").val("");
$("#dropdownFacility").val("");
}
});
Then, I had to move my update panel inside of the dialog by doing this:
<div id="assignmentDialog" title="Process Assignment">
<asp:UpdatePanel runat="server" ID="assignmentUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">

JQuery dialog opens collapsed

I wrote this code implemented in a much bigger solution. the point was to add an asp:ImageButton to an asp:GridView. Clicking this image button would trigger a javascript call to a JQuery dialog.
This dialog is bound to a div containing an asp:BulletedList.
Simple enough, and I got it to work, but when I click the button and the dialog opens, it shows up collapsed to only the title bar. I can resize and expand the window to show the contents but I'd like it to open to the right size from the get go.
Setting the Resizable option to false just blocks it in collapsed mode and I can't see the data anymore. Also, opening the source code from the rendered page in IE displays an empty div (the div used by the dialog) while the dialog is collapsed to the title bar, but after I expand the window and display my BulletedList data, displaying the source code by right clicking the bullet list still shows an empty div...
Here is the code, the gridview is a lot bigger and item templates are used because each column has a specific header and footer but I took out all the non-related stuff.
.ascx file
The Javascript:
function ShowReferedTasks() {
$('#litReferedTasks').dialog({
autoOpen: true,
modal: true,
minHeight: 150,
minWidth: 500,
resizable: true
});
}
The gridview containing the button that triggers the dialog:
<ext:GridView ID="gvTaskParameters" runat="server" AutoGenerateColumns="False" DataKeyNames="TaskParameterID"
ShowFooter="<%# _isAdmin %>" ShowHeaderWhenEmpty="True" ShowFooterWhenEmpty="True"
EmptyDataText="Aucun paramètre disponible" AllowPaging="True"
PagerSettings-Mode="NextPreviousFirstLast"
OnPageIndexChanging="gvTaskParameters_PageIndexChanging" OnRowCancelingEdit="gvTaskParameters_RowCancelingEdit"
OnRowEditing="gvTaskParameters_RowEditing" OnRowDeleting="gvTaskParameters_RowDeleting"
OnRowUpdating="gvTaskParameters_RowUpdating" OnRowCommand="gvTaskParameters_RowCommand"
OnRowDataBound="gvTaskParameters_RowDataBound"
OnDataBound="gvTaskParameters_DataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ibViewTasks" runat="server" CausesValidation="False" CommandName="ViewTasks"
ImageAlign="Middle" ImageUrl="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docs-info.gif" AlternateText="<%$ resources:resource, images_VoirTaches %>"
CommandArgument='<%# Eval("TaskParameterID") %>' />
<%--<input id="ibViewTasks" class="ui-state-default ui-corner-all" type="image" src="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docks-info.gif" value="button" />--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</ext:GridView>
The div bound to the dialog:
<div id="litReferedTasks" class="" title="Tâches Référées" style="background-color: White; position: absolute;">
<div style="padding-left: 25px; padding-bottom: 25px; padding-right: 25px;">
<asp:BulletedList ID="blReferedTasks" runat="server" DisplayMode="Text">
</asp:BulletedList>
</div>
</div>
Code Behind in C#:
else if (e.CommandName == "ViewTasks")
{
TaskParameterMapManager mgr = new TaskParameterMapManager(DatabaseConnection);
int id = Convert.ToInt32(e.CommandArgument.ToString());
var ts = mgr.GetTasks(id).OrderBy(t => t.TaskDescription);
this.blReferedTasks.DataSource = ts.ToList();
this.blReferedTasks.DataTextField = "TaskDescription";
this.blReferedTasks.DataBind();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Key_ShowReferedTasks", "ShowReferedTasks();", true);
}

The answer was, as #chris suggested, to remove the "position:absolute" style tag in the div used by the dialog.