I have the following code at the end of my aspx page. When I click on the button below, the usercontrol loads a grid. The problem is that when that grid is loaded it's out of the viewed range, and the user has to scroll to the botton to view the displayed grid.
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div style="border: thin; border-style: double">
<asp:Panel ID="PnlRequired" runat="server" DefaultButton="BntOpenGridView_Click">
<table style="width: 100%">
<tr width="100%">
<td>
<asp:ImageButton ID="BtnOpenGridView" Visible="false" OnClick="BntOpenGridView_Click" runat="server" ImageUrl="~/Images/find1.png" Width="2.5%" />
</td>
</tr>
<tr>
<td>
<UserControl:RequiredGridView runat="server" ID="RqGrdView"></UserControl:KeywordsGridView>
</td>
</tr>
<tr>
<asp:Label ID="lblErrorMessage2" runat="server" ForeColor="Red"></asp:Label>
</tr>
</table>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
What I'm trying to do is to use javascript some way to scroll to the bottom of the page after displaying the grid.
Here's what i've tried:
<script type="text/javascript">
function ScrollToGrid()
{
document.getElementById('RqGrdView').scrollIntoView(true);
}
</script>
In the Button Click event after triggering the usercontrol to load the gridview I added the following code:
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "focusOnGrid", "ScrollToKeywordsGridView()", true);
This didn't work
I also tried to add the same code to Page PreRender as follows:
protected void BntOpenGridView_Click(object sender, ImageClickEventArgs e)
{
isRequiredGridViewClicked = true;
// code to load gridview in usercontrol
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (isRequiredGridViewClicked)
{
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "focusOnGrid", "ScrollToGridView()", true);
isRequiredGridViewClicked = false;
}
}
This also didn't work, the javascript fires OK, but the gridview is not not displayed in full and the user has to scroll manually.
I found the solution. This post helped a lot.
I added a hidden field to my aspx page, this hidden field would be set to True using javascript when the button is clicked. And each time the page is loaded the value of the hidden field is checked, and if it's true, the document would scroll to focus on the gridview control.
This is my script:
function SetHiddenField(){
document.getElementById('MainContent_HiddenShowGrid').value = "True";
}
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
if(document.getElementById('HiddenShowGrid').value == "True")
{
document.getElementById('MainContent_PnlKeyword').scrollIntoView(true);
document.getElementById('HiddenShowGrid').value = "False";
}
});
And this is the code for the hidden field:
<tr width="100%">
<td>
<asp:Label ID="lblRequiredSrch" runat="server" Visible="false">Search for Required</asp:Label>
<asp:TextBox ID="txtRequiredSrch" runat="Server" Visible="false" Width="60%" />
<asp:ImageButton ID="btnRequiredSrchGridView" Visible="false" OnClientClick="SetHiddenField();" OnClick="btnRequiredSrchGridView_Click" runat="server" ImageUrl="~/Images/find1.png" Width="2.5%" />
</td>
</tr>
<tr>
<td>
<UserControl:RequiredsGridView runat="server" ID="RequiredsGridView2"></Requireds:RequiredsGridView>
<asp:HiddenField runat="server" ID="HiddenShowGrid" Value ="False" />
</td>
</tr>
Step 1 : I have this problem too. My solution is i try get value of scrollbar and keep that value to sessionStorage:
my asp file:
<div overflow: auto; width:1000px; height:400px;" onscroll="myFunction()" id="myscroll" runat="server" name="myscroll">
function Javascript
function myFunction() {
var elmnt = document.getElementById("myscroll");
sessionStorage.setItem('focus', elmnt.scrollTop);
}
step 2 : wait for gridview loaded: (it mean insert this code after code you get gridview) and call new function to set scrollbar gridview.For my code i have to call Javafucntion from c# :
string script = "window.onload = function() { gridview_finish(); };";
ClientScript.RegisterStartupScript(this.GetType(), "gridview_finish", script, true);
step 3 : set position gridview by value sessionStorage :
function gridview_finish() {
var elmnt = document.getElementById("myscroll");
elmnt.scrollTop=sessionStorage.getItem('focus');
}
Related
I have a pop up page where I want to get the textbox value which is inside gridview of main page,
and populate value in that textbox.
I have tried:
var Emp = window.opener.document.getElementById('grd_txtEmp');
Emp.rows[1].cells[3].childNodes[0].value="abc";
My popup page:
<asp:TemplateField HeaderStyle-BackColor="#C0C0C0" HeaderStyle-BorderColor="Black" HeaderText="Man">
<ItemTemplate>
<table><tr><td>
<asp:TextBox ID="txtEmpy" runat="server" TextMode="MultiLine" ontextchanged="txtEmploy_TextChanged" ReadOnly="true" Text='<%# Eval("Empry") %>' Width="98%"></asp:TextBox>
</td>
<td align="right">
Select
</td></tr></table>
</ItemTemplate>
<HeaderStyle BackColor="Silver" BorderColor="Black" Width="30%"/>
</asp:TemplateField>
As far as I understood, you are opening the popup, on clicking of some link or button in the grid view row. If this is correct, then while opening the popup, you can pass the textbox id to the popup as a query string. Then you can set the value to the correct text box from the poped up window. To get the id of the textbox in the current row, you can use jQuery
As an example, you can try this idea
Add a css class to the textbox, say, "extdata"
Add a css class to the link/button, say, "popupopener"
Then add the following jQuery
$(document).ready(function () {
$('.popupopener').each(function () {
$(this).click(function () {
//If the textbox is at the same level as the link button
var textBoxId = $(this).closest("table").find('.extdata').attr('id');
window.open("Select.aspx" + "?textboxid=" + textBoxId, "mywindow", 'menubar=1,resizable=1,width=600,height=400, top=200, left=400');
}
);
});
});
Change the layout as below
<asp:TemplateField HeaderStyle-BackColor="#C0C0C0" HeaderStyle-BorderColor="Black" HeaderText="Man">
<ItemTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtEmpy" CssClass="extdata" runat="server" TextMode="MultiLine" OnTextChanged="txtEmploy_TextChanged" ReadOnly="true" Text='<%# Eval("Empry") %>' Width="98%"></asp:TextBox>
</td>
<td align="right">
<a class="popupopener">Select</a>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderStyle BackColor="Silver" BorderColor="Black" Width="30%" />
</asp:TemplateField>
I have a usercontrol and there is a radgrid included in it. I need to fetch label GetName's text from the radgrid using jquery.I have to check the label's value for each record. Can someone please help me to do it.Thanks.This is my radgrid.
<telerik:RadGrid ID="Gridview1">
<Columns>
<telerik:GridTemplateColumn UniqueName="tempcolumn">
<HeaderTemplate>
<table>
<tr>
<td>
<asp:Label ID="Header" runat="server" Text="Name"></asp:Label>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Getname" runat="server"></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</telerik:RadGrid>
The code you show there is in your .aspx page, not the generated one.
In HTML result, the aps:label would be something like that :
<span Id="ctl00$blablabla$Getname_random"></span>
So, I would suggest to add a class to your label to use it as selector :
<asp:Label ID="Getname" runat="server" CssClass="getNameClass"></asp:Label>
And then :
$(function () {
//Move in any trigger function (e.g: click)
$('.getNameClass').each(function() {
console.log($(this).text() );
});
});
Hope it helps.
I have a repeater having two columns. In first column i have an image button on click of which i am calling a javascript function.
In the second column i have a label. I want to pass the client id of this label to the javascript function called on click on ImageButton.
<asp:Repeater ID="rptElements" runat="server">
<ItemTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table>
<tr>
<td id="tdElementType" runat="server">
<asp:ImageButton ID="imgShow" runat="Server" Visible="false" OnClientClick="return DisplayElementDetails(this);" />
</td>
<td>
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
I figured it out.
I added following code to the javascript function:
function DisplayElementDetails(obj)
{
var name = obj.id.substring(0,(obj.name.length)-7) + "lblElementDetails"
var obj = document.getElementById(name);
obj.style.display = 'none';
return false;
}
and set the style for label control
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" style="display:block" />
Its working now.
This can be done by Jquery. Add CSSclass to button and label for selecting them using CSS selectors
<td id="tdElementType" runat="server">
<asp:ImageButton ID="imgShow" runat="Server" Visible="false" CssClass="showButton" /></td>
<td>
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" CssClass="lblElement"/>
</td>
Reference JQuery on aspx page and call function on click event of image button
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".showButton").click(function(){
$(".lblElement").toggle();
});
});
</script>
In a aspx page, I am trying to to validate when the user is checking a checkbox, if the select value of the same line has a certain value (the default one) to fire an alert message and uncheck the checkbox. I would like to realise this in javascript to avoid a postback but if possible without jquery.
<asp:ListView ID="lstView_retrievedIPPhones" runat="server" OnDataBound="lstView_retrievedIPPhones_DataBound" OnItemDataBound="lstView_retrievedIPPhones_ItemDataBound">
<LayoutTemplate>
<table id="tbl1" runat="server" class="bordered">
<tr id="tr1" runat="server">
<th id="th1" runat="server"><asp:CheckBox ID="chkbox_checkAllRows" runat="server" OnClick="javascript:ToogleCheckAll(this.id)"/></th>
<th id="th9" runat="server">Sites</th>
<th id="th8" runat="server">Result</th>
</tr>
<tr id="ItemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:CheckBox ID="chkbox_toConfigure" runat="server" OnClick="javascript:btnclick()" /></td>
<td>
<asp:DropDownList ID="dpdown_Site" runat="server"></asp:DropDownList>
</td>
<td><asp:Image ID="imgResultLastOp" tooltip= "" runat="server" /></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate></EmptyDataTemplate>
</asp:ListView>
In the above code, when clicking on chkbox_toConfigure, I want to validate that the DropDownList selectedvalue is not the default one.
Your help would be greatly appreciated.
If you know the Value of the default item of dropdown (for example its -1 here), then you can check on click of checkbox and alert the user to select another item from dropdown:
Adding this code just before the ending ItemTemplate tag: </ItemTemplate>
<script>
function CheckSelectedItem() {
var ddl = document.getElementById("<%# Container.FindControl("dpdown_Site").ClientID %>");
var ddlValue = ddl.options[ddl.selectedIndex].value;
if(ddlValue == "-1")
alert("Select another item!");
}
document.getElementById("<%# Container.FindControl("chkbox_toConfigure").ClientID %>").onclick = function() {
CheckSelectedItem();
return false;
}
</script>
Some help
Well I end up doing the following code:
<asp:CheckBox ID="chkbox_toConfigure" runat="server" OnClick='<%# "javascript:CheckSelectedItem(this.id," + ((ListViewDataItem)Container).FindControl("dpdown_Site").ClientID + ");" %>'/>
Into my javascript section :
function CheckSelectedItem(checkboxID, dropdown) {
var checkbox = document.getElementById(checkboxID);
var dropdownValue = dropdown.options[dropdown.selectedIndex].text;
if (dropdownValue == "<>") {
alert("Please select a valid value");
checkbox.checked = false;
}
}
In my form I am using a AjaxToolkit ModalPopupExtender. The PopupControlId has been set to a panel which has a RadioButtonList and a dropdownlist.The panel which pops up is something like this:
<asp:Panel ID="PopUpWindowPanel" runat="server" Visible="false" BorderStyle="Solid">
<table cellpadding="2" cellspacing="0" width="100%" border="0" class="dataTbl">
<tr>
<td class="left">
<asp:RadioButtonList ID="RdBtnLstSortOptions" runat="server">
<asp:ListItem Text="No change." Selected="True"
Value="None"></asp:ListItem>
<asp:ListItem Text="Some Change."
Value="Existing"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td class="left">
<asp:Label ID="lblList" runat="server">List:</asp:Label>
<asp:DropDownList ID="ddlList" runat="server" Visible="false">
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="3">
<div class="divBtn">
<asp:LinkButton ID="btnDone" class="button" runat="server" OnClick="btnDone_Click">OK</asp:LinkButton>
<asp:LinkButton ID="btnCloseProfile" class="button" runat="server">Cancel</asp:LinkButton>
</div>
</td>
</tr>
</table>
</asp:Panel>
Now, What I want is that when user selects the Listitem with Text="Some Change." and Value="Existing", then and only then will dropdownlist with id="ddlList" must show, otherwise it must be hidden. I am populating this list on server-side at page load. AS this is ajaxcontrol i do not want any postbacks, therefore I am trying to handle this with javascript/jquery. I am a beginner with Javascript/Jquery so don't know how to do this properly. I have written some JQuery which is something like this:
function pageLoad()
{
$find('<%= RdBtnLstPresortOptions.ClientID %>').add_selectedIndexChanged(
function (sender, args) {
var selectedValue = $(this).val();
if ($.trim(selectedValue) == 'Existing') {
// show the dropdown list ddlList
}
else { //show the hide the dropdown list ddlList }
});
}
My question is how can I write this jquery/javascript properly so that I can show the dropdownlist upon the selected radio button option. Thanks.
This worked for me.
$("#<%=RdBtnLstPresortOptions.ClientID%>").change(function () {
var rbvalue = $("input[#name=<%=RdBtnLstPresortOptions.UniqueID%>]:radio:checked").val();
if (rbvalue == "Existing") {
$("#<%=ddlList.ClientID%>").css("display", "block");
$("#<%=lblList.ClientID%>").css("display", "block");
} else if (rbvalue == "None") {
$("#<%=ddlList.ClientID%>").css("display", "none");
$("#<%=lblList.ClientID%>").css("display", "none");
} else {
}
});
When you have server control with Visible=False, it not rendered on client at all, so you can not display it. What you can do, is to render it with Visible=true and style="display:none".
Then use:
$find('').add_selectedIndexChanged(
function (sender, args) {
var selectedValue = $(this).val();
if ($.trim(selectedValue) == 'Existing') {
$get('<%= ddlList.ClientID %>').style.display="block";
// show the dropdown list ddlList
}
else { //show the hide the dropdown list ddlList }
});