Part of custom control should be rendered only once - asp.net

I am working on a custom control. Part of it is to render a div that is not displayed right away. Based on a particular client event, that div is shown. Everything works fine when there is only once instance of the custom control on a page. But in case of multiple instances, that many above mentioned divs are rendered, though not displayed. To make container page lighter, I basically want to render that div only once, irrespective of the number of occurrences of the custom control. Any help would be great.
Thanks,
Surya

Perhaps you can store a flag telling that that div has already been rendered. You can store that flag in HttpContext.Items. Here is some code
if ((bool)HttpContext.Current.Items["divRendered"] == false)
{
//Render the div
HttpContext.Current.Items["divRendered"] = true;
}

Related

Open Additional Fragment

Is there a way to open a second Fragment Page? (ie. open multiple fragment pages at the same time)
I have a database setup and when users click a button a Fragment Page pops up so they can edit the fields. I would like to try and have a sub-menu appear for comments (so they don't have to scroll all the way to the bottom of the screen).
Something like the Menu in the Material Gallery Sample would be great.
Note:
I am currently using app.showDialog(app.pageFragments.Menu); to open the Page Fragments.
Having both Fragments open side by side would be a usable options as well.
Thanks!
Here is an example diagram.
Sorry for the late reply. I'll put this as an answer because I think it will get you what you need. You could implement this if you put the page fragments directly into your page, and toggled their visible property to show/hide them.
The biggest trick here is how does the first page fragment tell the second to open? That ends up being simple, just add a custom boolean property to the first fragment. Then in the base page (which contains the two fragments) bind the visible property of the second fragment to the custom property of the first fragment. Then in the first fragment, you can set that property to "true" when you want the second fragment to show, and "false" when you want it to hide.

How to make invisible ASP.NET controls within a certain div tag?

I have a dropdown "ddl_group" list followed by two tags containing controls related to item chosen in the first. One item in ddl_group is teacher and another item is student. By default, I have set all controls within the two div tags to invisible. They only show up when a group related to them is chosen in ddl_group.
Imagine I choose student in ddl_group. Next, controls within div.stdInfo start to appear one after the other in response to user who makes choices on controls within div.stdInfo. Now the user might want to choose another group i.e. teacher from ddl_group. Therefore, I'll need to make invisible again all controls within div.stdInfo and make visible controls within div.teacherInfo.
Is it possible to make invisible or visible all asp.net controls within a certain tag (e.g. div tag) in one place rather than setting them individually?
You can place your div in
ASP.NET Panel Control
then you can make it
pnlName.Visible=true; or pnlName.Visible=false;
when ever you want or
you can use Div with
runat="server"
attribute so that it is accessible in code page
their you can do it like
divname.Visible=true; divname.Visible=false;
You can use ASP.NET Place holder or ASP.NET Panel controls for these purposes.
Wrap your content with Place holder or Panel.
On SelectedIndexChanged event of your drop down, you can change visibility of this PlaceHolder or Panel.
If you add a runat tag and an ID tag to your divs, that will make them accessible via server side code. I prefer this way because I don't have to mess-up my css at all.
e.g.
markup:
<div class='teacherinfo' ID='teacherDiv' runat='server'>
.
.
.
.
.
</div>
code behind:
teacherDiv.Visible = false;
One word of warning, making a server-side control invisible means that it will not be present on the resulting html document. So if you try to find it with javascript document.getElementById("<%= teacherDiv.ClientId %>"), you'll get an error.

Controlling div visibility from toggle buttons on another page

I am looking to control the visibility of a div on one page from a toggle button on an admin page. I have seen many examples of this being done on the same page but none that explain what it would look like to have this done from another page.
There are a number of ways to handle this. You should research what you want to do and then decide on a method that works best for you.
Personally I would look at a server-side implementation. In this way you can control the output to the client. You can use session variables for example. How this is done will depend on what language you are using.
If you only want a javascript solution then I can think of two options. First is to use cookies. You can then read the cookie and show/hide the div based on the value. This is what I would do.
Second you can pass in a querystring parameter and read it on the other page. Then hide/show your div. http://mysite.com/?div=hidden
If the admin page opened the child page using JavaScript then you can assign the window to a variable and control the contents through that variable. Like so:
var childWindow = window.open('some URL', options);
// now toggle the div in the child
var childDiv= childWindow.document.getElementById('your_div_id');
$(childDiv).toggle();

Moving the ScrollBar To the Selected Node In A TreeView Control

I have a treeview control where I am dynamically selecting a node depending on user interaction. when a node is selected I want to be able to have the scrollbar go to the location of that selected node in the tree. The scrollbar is simply made by overflow:auto in the div tag where the treeview is located. Can someone give me some detailed code to accomplish this? Thanks in advance.
If the scrollbar is a browser default triggered by overflow:auto, you'll probably need to use javascript. See if the answer below works for you:
Programmatically scroll to an Anchor Tag
In other words, you will need to figure out the ID of the selected node (or insert an element with an ID into the text of the node), then insert a snippet of javascript into the page (using, for example, a Literal control) that will scroll to that element when the page is loaded.
It's hard to give specific examples without seeing your code, but let's say your selected node is called ActiveNode and you've inserted a literal control called litScript. Then you could do something like this:
ActiveNode.Text = ActiveNode.Text & "<a id='TVSelectedNode'></a>"
litScript.Text = "<script type='text/javascript'>document.getElementById('TVSelectedNode').scrollIntoView(true);</script>"

How to populate long text in dropdownlist in asp.net

In asp.net, am trying to populate a dropdownlist box with very long text. I have fixed the width of list on the page and i don't want to change its size as it would affect my page layout. On clicking the dropdownlist, the text gets truncated to the size of the dropdown. I want to see the entire text without any truncation, without changing the size of the dropdownlist box..Also if there are any third party controls which would solve this problem?Would be very helpful if there's a solution for this.
Update:
Right now am trying a dropdown box in Jquery that will wrap the text if it exceeds the size..but again the problem is it works fine on an independent solution but when i integrate it with my application, it does not read the .css file and it does not do any formatting(style, font, alignment) that it is supposed to do according to the .css file.Any idea why this is happening?
The problem that you're describing is restricted to IE (it might be fixed in the latest version, I haven't tested).
In the past, I've had success with binding javascript methods to the onClick event on the drop down to increase the width, and the onBlur event to set the width back to its original value.
You might be able to use jQuery to create a tooltip like thing that appears when you hover over each option.
something like
// this executes on page load - just like asp.net Page_load()
function pageLoad(){
// attach a mouseover event to each option in your dropdown
$("#myDropdown option").mouseover(function(){
// get the text from that option
var text = $("#"+this.id).text();
// display that text in a small tooltip
showToolTip(text);
});
}
function showToolTip(text){
// display in some way
}
there's a javascript library called wz_tooltip available at walterzorn.com
hope that helps

Resources