asp.net gridview scrollintoview when gridview in user control - javascript

I had a gridview in a webform, with javascript for scrolling the selected item into view; worked fine.
Then I moved the gridview to a user control, got it to work except for the scroll into view.
Here's how the scrollintoview works, or used to work.
On gridview.itemselected, a unique value from the selected row is stored in a hidden field.
$(document).ready on the main page calls a javascript "scrollintoview" function.
The scrollintoview function gets the value from the hidden field, finds that value in the gridview, identifies the vertical location of that value, does a scroll to the appropriate vertical position, and sets the background-color of the gridview row to light yellow.
Again, that worked fine when the gridview was in the main form.
Now, with the gridview in the user control, the javascript executes correctly (I can watch it during debug), but when the gridview appears on the page, it has not scrolled.
So, maybe somewhere in the sequence of events, the gridview is being rendered after the scrollintoview has taken place?
Any suggestions on how to get this to work would be appreciated. Thanks!

This can be tricky. The way I've done it is to place the gridview in a div which looks like this:
Then in function setScrollValue the hiddenfield value is set to divGvMD.scrollTop.
When the page refreshes divGvMD.scrollTop is set to the hiddenfield value.

Related

Accessing gridview row data CONSISTENTLY from javascript

I have an asp.net webpage that contains a gridview with SQL data bound to it using the DataSourceID property. I want to be able to launch JavaScript from various user events (like button clicks and row clicks in a second gridview) and use JavaScript to read the gv1 data and perform some simple actions. My problem is, some of my JavaScript calls see the data in the gridview, but many times all I see in the gridview is a header (no rows of data!).
For example, if I put a call to JavaScript inside Page_Load() using
ScriptManager.RegisterStartupScript(Me, Page.GetType, "Script", "jsPageLoadFirst();", True)
then I always see the gridview data on the initial page load, and also on some postbacks. On other postbacks however the gridview has been stripped and all I see is the gridview header (rows are undefined).
Similarly, if I setup a call to JavaScript in the html body as
<body id="mybody" onload="JavaScript:myJSsub();">
the JavaScript sub never sees the gridview data; only the header, but no rows. I THOUGHT that the client onload event only occurred after the page was fully loaded (including all data binding!) but apparently not! Note that I always see the gridview data showing on the webpage, even right before I click a button to invoke JavaScript, so it's a mystery to me as to why the gridview data sometimes gets stripped!
I've been pulling my hair out for days trying to figure this one out. Can anyone tell me what I'm doing wrong, and how I can make sure the gridview row data is always available to my JavaScript subs, no matter where (or how) I launch them?
Thanks!
-tom
10/7 update: Here's a little bit more info, plus a possible work around I've come up with today using a hidden field. First, I'm primarily accessing the gridview data in JavaScript using calls to document.getElementById("gv1"). So to start things off, since all the gridview data is available to the JavaScript sub I fire from the first server PageLoad event, I tried saving the gridview data in both a global variable "gvar1" and also in a hidden field on my page "hf1". Here is what my JavaScript looks like:
function jsPageLoadFirst() {
// Save gv1 to a global variable
gvar1 = document.getElementById("gv1");
// *** Also save gv1's html to a hidden field
document.getElementById("hf1").value = document.getElementById("gv1").innerHTML;
}
Now in the JavaScript sub I trigger from the onload() event of the body, I check the values of all three. I always find that 1) document.getElementById("gv1") shows only the gridview header (but no rows), 2) gvar1 is undefined and 3) hf1 looks fine - all row data is present. Similarly when firing javascript from server Postback pageloads, sometimes document.getElementById("gv1") shows all the gridview data, but sometimes it only shows the gridview header but no row data. Can someone explain to me why document.getElementById("gv1") does not always show the row data? I think if I understood this, I could see my way clear to get the rest of my code working. Thanks!!!

HTML select when click the object

I have a little problem. I have a select of an html page, when I select it often happens that the selection of the mouse remains locked and when I move my mouse I select all the content of the page.
How can I avoid this?
I have a table that contains the rows and cells.
In the cell I have a DropDownList that load on the server (I'm using ASP.NET) unseen. The DDL is rendered in an HTML Select.
When I click the cell with iquery.show () I display the select and to make it selectable I jquery.focus ().
When I click the select button to bring out the option, sometimes (not always) the mouse I select all in the browser.
On the page I have some javascript functions
$(".ddlClassAttivita").on("click", (function (events) {
//Mycode
}));
$(".ddlClassAttivita").on("change", (function (events) {
//Mycode
}));
I apologize for the English but I'm using translate

Current TabPanel ID in onClientLoad CSJS

I have client sided code in the onClientLoad event of my form that governs field hiding. Problem is, it depends on values in the first tabPanel. If I switch to the second tabPanel, it stops working. I can no longer switch back to any other tabPanel.
How can I within the onClientLoad event using CSJS identify which panel I currently am on?
In a tab panel whenever you switch between tabs the fields are recalculated.
So, I would rather suggest you to put a visibility formula on field instead.
Make sure all tab panels have a nice id. Then in your script block you can add something like:
var t1 = dojo.byId("#{id:tab1}");
if (t1) { // do your stuff }
Does it work for you?

Attach javascript function to rich:dataScroller

I have a rich:datatable in which every row contains a selectOneCheckbox. A javascript function is bound to checkboxes and deselects the current selected checkbox when another one is checked (so, only a checkbox per time can be checked within a page). The datatable uses a rich:datascroller for scrolling through result pages.
How can I deselect a row before scrolling to another page?
Example: I am at page 1 and select the checkbox for row1, then I press "3" on the scrollbar: the selection for row1 remains, but I would like to remove it before showing page 3*strong text*.
Thanks! :)
The rich:datascroller tag has an "onclick" attribute where you can make a call to your js function:
<rich:datascroller id="myscroller" onclick="unselectCombos()" />
I think this will work.

Multiple updatepanels on page remove JavaScript Datepicker calender from textbox

Actually I have Multiple update panels on page, which update different values on server but the problem is that I have textbox to which I attach javascript class for datepicker on Load event.
But There are other updatepanels before that date TextBox, when I update them first calender image with date control which is in updatepanel disappears. or it remove the calender which is next to the textbox.
txtDate.Attributes.Add("class", "show-week w16em dateformat-d-sl-m-sl-Y");
Before using any updatepanel its like this
After we upfdate any updatepanel control its like this.
But the Date controls which are not in any updatepanel are ok and working.
And in these updatepanels I actually saving values in DataTables and save these DataTables in viewState .... no change in HTML.
I guess the datepicker and its textbox both are placed in an updatepanel?
If you do an ajax-postback with UpdatePanels the server will send html back for all UpdatePanels on the page, and refresh all of their contents, so your datepicker will disappear.
If you set UpdateMode=Conditional on the UpdatePanels then only the UpdatePanels that caused the postback will update.
Another option is to recreate the datepicker with ScriptManager.RegisterStartupScript, but this possibly resets its value (depends on which datepicker it is).
Are you changing the INNERHTML of the DIV or TABLE in which the TextBox is present because if you are then its removing the calender control after that DIV or TABLE is being updated.
whatever method you are using to attach the datepicker, you must call again after the updatepanel updates
you can do it on server side with this:
// at some point of the method that updates the panel
ScriptManager.RegisterStartupScript(
this, typeof(object), "someUniqueKey", "theScript();", true);
or on client side with this:
// <body onload='...'> or in the <head>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function () { theScript() });

Categories

Resources