I want to disable the main page while showing a DIV control. For example, One main form having a DataGrid and a Add Item button, while click on the Add Item button, I want to show a DIV control for new item entry, at the same time the main page control should be in disable mode. After close or hide the DIV, then I want to enable the main page. How is this possible? Please guide me.
How is this possible without a third party component?
You can do this by creating a div that falls over the main div and beneath the div you're showing.
both the visible divs should have a higher z-index then the main div.
because it has a higher z-index it disables the main div. the dimensions of this disabled div are the same as the main div.
Take a look at this page, here you have a perfect example of how to do it with JQuery and ASP .NET.
http://www.clientsideasp.deynu.com/alerts/Asp-net-jquery-confirm-gridview.aspx
All you should do is change the confirm panel by another inserting one or whatever you want.
Regards
Use jquery modal dialog to achive it:
http://jqueryui.com/demos/dialog/#modal
From your requirement, you can better look into modal form:
http://jqueryui.com/demos/dialog/#modal-form
Not the answer, but a recommendation (#LFMF):
You may want to refresh the main page after closing the modal/DIV - especially if the modal affects the data on it (updates, inserts, deletes).
Related
So I have my main page with buttons on top of it.
Below there's a MultiView (also tried with a Panel) and I want to display a different page (aspx) inside it when a user clicks the button on top of the page.
I've been trying to do this for 2 hours now and can't get this to work... No good info # Google.
Thanks in advance...
Try user controls instead of pages. I am not aware of any case where I ever needed this functionality.
Beside that, I'm rather sure that it is not supported to insert pages into other pages.
I have multiple user controls on the page that are used primarily for data entry purposes. When a product is loaded, I need to load the product data into all those user controls and retrieve data when I need to save the product. The user controls are not visible to the user directly, instead user would click on a link and the user control will open up in a modal popup.
Currently the way I'm doing this is, I've loaded all the user controls on the page in separate div controls, and showing the modal popup when the link is clicked. I'm sure loading all the user controls on the page is not a good idea. Is there a better way to handle this? I think we can show the markup using JSON with jQuery - but how can I load and retrieve the data using that? Can someone help please?
Thanks.
Sounds like a case for AJAX. You could use an UpdatePanel within the div that defines the modal dialog. From the click handler for whatever control brings up a particular modal, you can dynamically replace one usercontrol with another in that UpdatePanel, pre-populate the usercontrol's data, then show a single modal that could be anything. Doesn't have to be a modal either; you could set up the UI with tab-like controls that switch between these UserControls in an always-visible div.
For a simpler approach, you could keep your Usercontrols in a div that is initially hidden by JQuery.
On postback, ie. when the user clicks the button/link for a particular product you can populate all your controls in a standard ASP.Net way so they're ready to display and then call a bit of JS/JQuery to show the div as a modal dialog.
Could someone help me out in getting a popup with a gridview(with 2 columns) inside when a link is clicked. I need some help badly. Can someone please tel me how to start and the procedure. I will be thankful.
2 columns in the gridview include checkbox and Text. This should get populated from database and after modifying that. it should save it in the database!!
I really appreciate all your help!! Thanks!
If you have no time, and you want things to work "magically"; go download Ajax Control Toolkit;
Drop a link in your markup that would open the grid; name it MyLink
Define the two column'ed GridView inside a Panel.
<asp:Panel runat="server" ID="pnlGrid"><asp:GridView ...></asp:Panel>
Drop ModalPopupExtender control from Ajax Control Toolkit in your markup.
Add Panel's id in ModalPopupExtender's markup
<act:ModalPopupExtender ID="MyModalPopupExtender1" runat="server" TargetControlID="MyLink" PopupControlID="pnlGrid" style="display:none" OkControlID="MyOkButton"/>
Now clicking on the MyLink would open the Popup with GridView inside; dont forget to add GridView.EmptyDataText property, so that you'd know when there are no records to show.
Last, but not least, upon your page load, load the data from your database, and assign it your GridView.DataSource
This article is a good start.
Enjoy!
Assuming you are using asp.net webforms, the easiest way to do this is to use the Microsoft Ajax Toolkit. With it you can create your panel control with the gridview and extend it with the modal popup extender. You will then hook up the link's click event to show the modal popup control (and any other databinding you need to do).
Thus when you click on the link, the panel will be displayed with the gridview.
If you are using Web Forms, an option would be to use the Ajax Control Toolkit's ModalPopup control. This control is very easy to add to a web forms page. It will allow you to extend the link with the modal and load the gridview in a panel that the modal popup will then display.
I have a div which appears when a textbox gets focus. DIV has n number of textboxes. I want to say display:none when a user Clicks anywhere in the window. Div should not close if the user is switching between textboxes.
All these jquery plugins, say the calendar control closes if user clicks outside. How is that happening? Any idea?
How to tell if an Outside Element was Clicked with Javascript
You would achieve this using a Modal Dialog implementation.
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