HTML divs popup to select columns - c#

I have a web application(ASP.NET2.0 C#) and in it, I have a gridview that gets its data from a datasource.
I wanted to add the following feature: the user can click a button "select columns", and a box pops up with a list of all the columns(a checkboxlist in a div, possibly) and that way, the user can choose the columns they want to see, and click another button "show" and the list of columns goes away, and the table shows the columns that the user selected.
I have already implemented the column choosing part, but it is the popup part that I need help with. How can I make the div popup and then disappear?
The solution might require javascript, and I might not have figured it out since I don't really know javascript that well.
Thank you.

HI,
Its better to make the display of div to be none rather than setting visibility to hidden. If visibility is set to hidden even if the div doesn't show up but it will take the rendering space which in some situation might not be that good.
You can dynamically create a div using createNode and then by absolute positioning and setting the top and left according to your convenience you can align the div to any portion in the page. Its better if you could disable the background when the div pops out.

Create the div and set visible=false. When you want to pop it up write the javascript to set it visible=true.
here's a good pointer http://lists.evolt.org/archive/Week-of-Mon-20020624/116151.html

Related

How do I make a custom pop up for when I click on an asp table element?

I have a table I've dynamically created, and I want to make it so that I see a pop up with a custom image, along with some text taken straight from the table element.
With the limited context you provide, I can't give you a complete solution, but I can at least outline a way to get it running:
Use jQuery and jQueryUI.
Bind a jQuery click event handler to the element.
Use a jQueryUI Dialog to display the popup.

Create "dropdown" comment box within a GridView

I'm very new to ASP.NET and imagine this is possible, but I have a grid view with a handful of columns. One of the columns has a button, that when clicked, I'd like a box to appear below the button (to ensure its visibility) that allows the user to add comments, submit comments, and cancel. I'm not too worried about the last three pieces of functionality yet, but am stuck on just getting the comments box to pop up in the right spot.
My idea functionality would be to have the rows below the clicked button the shift down to leave a space for the comments box, and once it is submitted, to have it disappear and the other rows back in place. The second best solution would be to have a pop-up window.
I must also note that I am on a closed system that cannot have any plugins installed, though it does have jquery.
I can elaborate on my problem if needed.
you can use either Accordion, HoverMenu or ModalPopup. please go to the following link for the demo and select your choice.
AjaxControlToolkit Demo

Auto adding textbox

I wanna ask for your opinions/ideas about how to automatically add new Textbox when user click on Add button. In my system, there are 2 Textboxes which user need to enter expenses and price respectively. And there's also a ADD button. When they click on it, another two boxes will automatically generate. Before this, I only have 8 Textboxes for expenses and 8 Textboxes for their price. But it looks quite messy for me so i want to make it more tidy. Thank you
You could use a grid and then have a hidden row that has the same input cells as the other rows. When the add button is clicked, have javascript clone the hidden row and then add then show it, and add it to the bottom of the grid.
If a grid isn't right for your UI then do the same thing with just cloning a text box and showing it. It is often easier to just have a single hidden input field with the proper style applied and then clone it, and then remove the display: hidden.
But it looks quite messy for me so i want to make it more tidy.
GridView should be used to make it visibility better and consume space properly.
Assign the DataSource to your GridView
Set the Text boxes in your Footer
When you click the Add Button, Set the Visibility of your Footer "True"
Once user fills the values in Textbox save it and Bind to the GridView.
Repeat Step 4 to iterate the same process next time.

Header and footer layout

this is my second question regarding more or less the same topic, since I am still struggling with it.
This is the layout I need to build:
Also important:
The header and the footer contain buttons, info but shouldn't be included in the page transitions (eg. shouldn't fade in or fade out).
In the end I just want the controls inside the "Page w/ content" (see picture below) area to be animated (fade in/fade out, etc) between the different pages.
What I got so far:
Header and Footer are user controls;
Page w/ content is a Lockablepivot (with headers hidden), and I use the pivot items to switch between the different content I want.
Problems:
I havent been able to put the Islocked = true working (it always gives me a null ref excep);
A pivot item is not really a page, so If the user for presses the back button it leaves the app (I think I can probably solve this by overriding the back button etc..);
I don't know if its easy or even doable to change the pivot items animations (haven't researched much about this one).
Ok, so my real question:
What other options do I have?
Using a ContentPresenter in the "Page w/ content" area to show me another xaml page? I read something about this being not good at all;
Do everything in one page but dynamically and through the code add, delete, fade in, fade out all the controls ?
Any ideas? What about performance? Which one should perform best?
Thank you!
Put an Header and Footer controls to a each page and make any animations with Content control you like

How to create a function that resizes text on a page without javascript?

Does anyone have any ideas how to create a function that resizes text on a page dynamically without the use of JavaScript? I'm using CMS based on C#?
Is it possible with CSS only? if it's not possible then i want to do with javascript like this page http://demo.joomla.org/1.5/?template=beez and as a fallback want to user server side solution which this page hasn't http://demo.joomla.org/1.5/?template=beez
Without javascript? Well, guess you will have to perform a postback onchange, then perform resize in your codebeind. Not very user friendly though.
I doubt CSS can do that.
You could create 3 links:
A A A
Then on postback, use the value of the 'size' query string attribute as a CSS font-size value. something like (pseudocode)
// aspx
<div style="font-size:<%= getsize(); %>"> ...
// code behind
getsize(){
return Request.QueryString["size"];
}
If you are getting size from database then you can do one thing:
Create a panel and put all controls in it and set size dynamically.
See following for more details:
http://asp-net-example.blogspot.com/2009/04/how-to-set-change-panel-font-size.html
I think you are misunderstanding something, you want a C# function for something that is fundamentally client side? Do you want to do it after the page has loaded or before? You can resize text on a page with CSS easily.
body{ font-size:60%; }
If you are looking for say 3 sizes (standard, large, huge) then the way I've done this is to create the visual elements as ImageButtons or CSS'ed Buttons to style them to fit the design.
You can then hold the body{font-size:1em;} outside of the CSS includes (but before it in the head section) within a Literal to honor the browser defaults by default. When the postback occurs you can adjust the literal accordingly - e.g. large would be adjusted to body{font-size:1.5em}.
litFontSize.Text = "body{font-size:1.5em;}"
You do need to check that the body font-size is being inhereted throughout though, cross browser - form text for one will need independent definiton in my experience.
What do you want to trigger the dynamic-resizing? The window being resized? Or the user pressing a button?
If you want to resize text when a user resizes the window, then no - you won't be able to do that with CSS alone, since CSS doesn't have any way of setting font sizes based on the window size. Every site I've seen that does this does it via javascript.
If you want the trigger to be a button press, then this is pretty simple - the button sends a postback to the server, you pick up their desired size from a dropdown or from the specific button that was pressed, and then you can add some CSS into the page or add a link to a different stylesheet.

Categories