I there
I'm using an asp.net user control with a tree view.
When I load the page I want to scrool the user control to the selected node in the tree view.
I'm using js function .ScrollIntoView(true).
But this is scrolling the entire page (not only what is inside the user control)
here's my code
//js
function ScroolToFirstSelectedCheckBox(ctrlId) {
Event.observe(window, 'load', function() {
var tree = document.getElementById(ctrlId + '_MyTreeView');
var checkBoxes = tree.getElementsByTagName("input");
var checkBoxesCount = checkBoxes.length;
for (var i = 0; i < checkBoxesCount; i++) {
if (checkBoxes[i].checked) {
checkBoxes[i].scrollIntoView(true);
break;
}
}
}
);
}
//aspx.cs
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"ScrollToSelectedCheckBox",
string.Format("ScroolToFirstSelectedCheckBox('{0}')",
this.UniqueID),
true);
How can I keep the parent page scroll position but continue to set user controll position where I want?
Tks
ok, simply changed
checkBoxes[i].scrollIntoView(true);
with
checkBoxes[i].scrollIntoView(false);
That's it!!!
=P
Related
In the ascx.cs file I'm dynamically generating buttons. In .aspx file I add the control to the form. The control itself renders well, but when the buttons are clicked I get this error
An error has occurred because a control with id 'ctl03' could not be
located or a different control is assigned to the same ID after
postback.
DestopControl.ascx.cs
public partial class DesktopControl : PlaceHolder
{
public void Build()
{
for (int i = 0; i < 10; i++)
{
Button button = new Button()
{
Width = 50,
Height = 50,
ID = string.Format("button{0}", i),
Text = i.ToString()
};
button.Click+=new EventHandler(button_Click);
}
}
}
Default.aspx.cs
DesktopControl desktop = new DesktopControl();
desktop.Build();
MainContent.Controls.Add(desktop);
After reading the comments (little hard to read the code-part of the comments) it appears that yes, you are generating your controls inside an if(!isPostBack){}; well, looks like it's in the else part of that if statement.
You have to generate your controls every time the page posts back, as the page_load gets fired before your button click. So once the controls have been re-created the code will continue on to your button click handler, where the controls should be available to handle.
Essentially, take ReloadUI(Session["ui"]); OUT of the if(!isPostBack){}else{} statement. Put it after your if statement.
Like this:
if (!isPostBack){
// my first load code
}else{
// my postback code
}
// load all my dynamic controls here
ReloadUI(Session["ui"]);
Found a solution:
Every time there is a new UI I call this ClearScreen() which does the trick.
The error on 'ctl03' was a menu control which was generating it's own ID and somehow wasn't available on postback. I assigned an ID to it. But I guess all the issue went away with this ClearScreen() method.
private void ClearScreen()
{
try
{
List<Control> controls = new List<Control>();
foreach (Control control in MainContent.Controls)
{
controls.Add(control);
}
for (int i = 0; i < controls.Count; i++)
{
if (!(controls[i].GetType() == typeof(LiteralControl) || controls[i].GetType() == typeof(ScriptManager)))
{
MainContent.Controls.Remove(controls[i]);
}
}
}
catch (Exception ex)
{
}
}
I have a web form which load 100 000 of data from the database.I Have 50 dropdown which is populated with respect to selectedindex change of dropdown .so to bind dropdown i am using ajax code .
I have written nearly about 200 line of ajax code in a separate js file.I am using 3 tier artitecture .I am not returning dataset from the bal class, am returning generic class to bind gridview.also i have created a class to bind the gridview.Also I am not using any update panel.
Is this approach will improve my performance.??
But there is a problem for me,i have to write code in js file to bind dropdown like this.
function GetAppStoreLnk(id) {
var txtnameid = document.getElementById(id);
CreateXmlHttp();
var requestUrl = "Default2.aspx?id="+txtnameid+"";
if (XmlHttp) {
XmlHttp.onreadystatechange = function() { getschemename(txtnameid) };
XmlHttp.open("GET", requestUrl, true);
XmlHttp.send(null);
}
}
function getschemename(id)
{
// To make sure receiving response data from server is completed
if(XmlHttp.readyState == 4) {
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttp.status == 200) {
var strData = XmlHttp.responseText;
if(strData != "") {
var arrscheme = strData.split("|");
id.length = 0;
for(i=0; i<arrscheme.length-1; i++) {
var strscheme = arrscheme[i];
var arrschnm = strscheme.split("~");
id.options[i] = new Option();
id.options[i].value = arrschnm[0];
id.options[i].text = arrschnm[1];
}
} else {
id.length = 0;
id.options[0] = new Option();
id.options[0].value = "";
id.options[0].text = "Scheme Name is not available";
}
document.body.style.cursor = "auto";
}
else {
id.length = 0;
id.options[0] = new Option();
id.options[0].value = "";
id.options[0].text = "server is not ready";
document.body.style.cursor = "auto";
}
}
}
but if i make class to bind the dropdown this will reduce my js file code line .How will i find the ID of the dropdown in the different page ie Default2.aspx .
Please help me .
How will i find the ID of the dropdown in the different page ie Default2.aspx .??Also i want dont want to use usercontrol or masterpage.
I don't understand your question. You are trying to access the Asp.net drop down in page Default.aspx in the page Default2.aspx right?
Could you please clarify your requirement?
I hope someone knows the answer to this as I am very new to using Telerik controls. Here is the problem, I have a requirement that says that I have to set the background color for a control attached to a validation control if the IsValid flag was set on the validation control. An earlier requirement that I had may be affecting this as well, it was set focus to the control based on the SetFocusOnError="true".
All of the controls are contained in a asp:UpdatePanel and the page has a master page set.
So what I have done is the following to set focus I overrode the Validate function on the System.Web.UI.Page class as so:
public override void Validate(string group)
{
base.Validate(group);
// get the first validator that failed
var validator = GetValidators(group)
.OfType<BaseValidator>()
.FirstOrDefault(v => !v.IsValid);
// set the focus to the control
// that the validator targets
if (validator != null)
{
//Check to see if SetFocusOnError was set.
if (validator.SetFocusOnError == true)
{
Control target = validator
.NamingContainer
.FindControl(validator.ControlToValidate);
if (target != null)
target.Focus();
}
}
}
This works and sets focus to the control. The next thing that I did was the following inline in my webpage:
var OriginalValidatorUpdateDisplay = null;
if (typeof (ValidatorUpdateDisplay) == 'function') {
OriginalValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NewValidatorUpdateDisplay;
}
function NewValidatorUpdateDisplay(val) {
OriginalValidatorUpdateDisplay(val);
ValidateControls();
}
function ValidateControls() {
if (window.Page_Validators) {
for (var vI = 0; vI < Page_Validators.length; vI++) {
var vValidator = Page_Validators[vI];
if (vValidator.isvalid) {
$("#" + vValidator.controltovalidate).removeClass("error");
if ($("#" + vValidator.controltovalidate).parent().find('.riTextBox').length > 0) {
$("#" + vValidator.controltovalidate).parent().removeClass("error");
}
}
else {
$("#" + vValidator.controltovalidate).addClass("error");
if ($("#" + vValidator.controltovalidate).parent().find('.riTextBox').length > 0) {
$("#" + vValidator.controltovalidate).parent().addClass("error");
}
}
}
}
}
However, when you load the page and submit the page for validation the first time the css doesn't change, but if you do it again it does. Oh and the AddClass is just adding
.error .riTextBox
{
background-color: lightpink !important;
z-index:6001;
}
to the control.
Has anyone worked encountered this before?
Oh I should also note that if I remove the Telerik controls and use asp textbox controls everything works as it should but I can't remove the Telerik controls from the project.
I am using ASP.NET with C# 2.0 and Visual Studio 2005. I am using a Master page and content pages. I have a treeview menu in the master page and when a user selects any menu item I redirect to that content page.
My problem is that after a user navigates to the content page all the treenodes refresh and the structure is collapsed. I want the selected treenode to stay expanded.
Can anybody help me out?
Are you using the treeview inside any UpdatePanel? Actually UpdatePanel does not support TreeView. I however managed the same using a lot of additional codes. You can see most of them on http://www.geekays.net/post/Using-TreeView-inside-AJAX-UpdatePanel.aspx and another post on the same site: http://www.geekays.net/post/TreeView-control-postbacks-on-check-and-uncheck-of-the-nodes-Checkbox.aspx
I added javascripts like the following also to scroll to a tree node that was selected, but the success was poor:
function scrollSelectedTviewNodeToDisplay(){
try{
var inpSelectedNode = document.getElementById("ctl00_contRMSMaster_TViewDeviceHeirarchy_SelectedNode");
var divTree = document.getElementById("ctl00_contRMSMaster_TViewDeviceHeirarchy");
if (inpSelectedNode.value != "")
{
var objScroll = document.getElementById(inpSelectedNode.value);
//my treeview is contained in a scrollable div element
var posY =findPosY(objScroll);
//alert(posY);
if (divTree){
divTree.scrollTop = posY;
//alert(divTree.nodeType);
}
//this works as well bu, but there is not as much control over the y position
//document.all(inpSelectedNode.value).scrollIntoView(true);
}
}
catch(oException)
{
//alert(document.getElementById("ctl00_contRMSMaster_divTree"));
}
}
function findPosX(obj){
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj){
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
Scenario: I have a standard dropdown list and when the value in that dropdownlist changes I want to update another dropdownlist that exists in a tinyMCE control.
Currently it does what I want when I open the page (i.e. the first time)...
function changeParent() {
}
tinymce.create('tinymce.plugins.MoePlugin', {
createControl: function(n, cm) {
switch (n) {
case 'mylistbox':
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts',
onselect: function(v) {
tinyMCE.execCommand("mceInsertContent",false,v);
}
});
<% foreach (var insert in (ViewData["Inserts"] as List<String>)) { %> // This is .NET
yourobject = '<%= insert %>'; // This is JS AND .NET
mlb.add(yourobject, yourobject); // This is JavaScript
<% } %>
// Return the new listbox instance
return mlb;
}
return null;
}
});
<%= Html.DropDownList(Model.Record[184].ModelEntity.ModelEntityId.ToString(), ViewData["Containers"] as SelectList, new { onchange = "changeParent(); return false;" })%>
I am thinking the way to accomplish this (in the ChangeParentFunction) is to call a controller action to get a new list, then grab the 'mylistbox' object and reassign it, but am unsure how to put it all together.
As far as updating the TinyMCE listbox goes, you can try using a tinymce.ui.NativeListBox instead of the standard tinymce.ui.ListBox. You can do this by setting the last argument to cm.createListBox to tinymce.ui.NativeListBox. This way, you'll have a regular old <select> that you can update as you normally would.
The downside is that it looks like you'll need to manually hook up your own onchange listener since NativeListBox maintains its own list of items internally.
EDIT:
I played around a bit with this last night and here's what I've come up with.
First, here's how to use a native list box and wire up our own onChange handler, the TinyMCE way:
// Create a NativeListBox so we can easily modify the contents of the list.
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
As far as updating the list box at runtime, your idea of calling a controller action to get the new items is sound; I'm not familiar with ASP.NET, so I can't really help you there.
The ID of the <select> that TinyMCE creates takes the form editorId_controlId, where in your case controlId is "mylistbox". Firebug in Firefox is the easiest way to find the ID of the <select> :)
Here's the test button I added to my page to check if the above code was working:
<script type="text/javascript">
function doFoo() {
// Change "myEditor" below to the ID of your TinyMCE instance.
var insertsElem = document.getElementById("myEditor_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
optElem.value = "1";
optElem.text = "Foo";
insertsElem.add(optElem, null);
optElem = document.createElement("option");
optElem.value = "2";
optElem.text = "Bar";
insertsElem.add(optElem, null);
}
</script>
<button onclick="doFoo();">FOO</button>
Hope this helps, or at least gets you started.
Step 1 - Provide a JsonResult in your controller
public JsonResult GetInserts(int containerId)
{
//some code to get list of inserts here
List<string> somedata = doSomeStuff();
return Json(somedata);
}
Step 2 - Create javascript function to get Json results
function getInserts() {
var params = {};
params.containerId = $("#184").val();
$.getJSON("GetInserts", params, updateInserts);
};
updateInserts = function(data) {
var insertsElem = document.getElementById("183_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
for (var item in data) {
optElem = document.createElement("option");
optElem.value = item;
optElem.text = data[item];
try {
insertsElem.add(optElem, null); // standards compliant browsers
}
catch(ex) {
insertsElem.add(optElem, item+1); // IE only (second paramater is the items position in the list)
}
}
};
Step 3 - Create NativeListBox (code above provided by ZoogieZork above)
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
//populate inserts on listbox create
getInserts();