Showing posts with label default. Show all posts
Showing posts with label default. Show all posts

Wednesday, March 28, 2012

HOW do I popup the model popup programmatically?

It's tried to a control click by default.
Does the model popup allow for programmatic viewing?

Thanks!

I really need this!

You can use a hidden button as the targetcontrolid of the modalpopup and have your button postback as normal. You can then call Show() from codebehind or show() from JS to show the modalpopup.


Someone posted this a while back. Another option would be to call the click method of the button you used for the targetcontrolid.

Show and Hide ModalPopupExtender from JavaScript

1) Assign a BehaviourID to the ModalPopupExtender using the BehaviourID attribute.

BehaviorID ="ModalBehaviour"
.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}

2) Use the $find method to get a handle to the Modal Popup Behaviour .

$find ("ModalBehaviour").
.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}

3) Call your hide and show methods on the acquired handle.

4) The Javascript would look like this.

<script language="javascript">function ShowModalPopup() { $find("ModalBehaviour").show(); }function HideModalPopup() { $find("ModalBehaviour").hide(); }</script>


Thanks.

I found what I needed:

ModalPopupExtender1.Show();


Hi ,

That would be meBig Smile.

Here is the link to the original Post.

http://blogs.msdn.com/phaniraj/archive/2007/02/20/show-and-hide-modalpopupextender-from-javascript.aspx

Hope this helps.


Hello,

I have a new problem.
How can I stop the modal popup from disappearing when a postback occurs.

For example, if I have a button on the modal "form", a click makes it dissappear.

Help!

Thanks!


The modal popup will disappear if the entire panel is wrapped in an updatepanel. You can move the update panel inside the panel tags or call Show() in server side code to keep it visible.

Wednesday, March 21, 2012

How can I override the default "TAB" look on the TabControl.

Basically, I'm the designer and trying to customize this tab control. I don't want the default "style" look and need to customize it to my liking. There really isn't much information on this. I do know how to create the tab options as a headertemplate. I just don't know how to TURN off the XP default tab. Can anyone lend any assistance?

I believe I have figured this out - Thanks to an external web site. I'm posting the solution here so others may benefit from it.

Basically I found out that the default CSS styles are listed below: The tab control uses CSS inheritance to set the cascade. So if you change the

<ajaxToolkit:TabContainerrunat="server"Height="300px"width="750px"ScrollBars="Vertical"CssClass="ajax__tab_xp"> to the following and modify the class value you can take control of the CSS in an external style sheet. The one problem is utilizing the embedded images.

/*AJAX.NET TAB CONTROL */.ajax__tab_xp .ajax__tab_header { font-family:verdana,tahoma,helvetica; font-size:11px; background: url(AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}.ajax__tab_xp .ajax__tab_outer { padding-right:4px; background: url(AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right; height:21px;}.ajax__tab_xp .ajax__tab_inner { padding-left:3px; background: url(AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_tab { height:13px; padding:4px; margin:0; background: url(AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer { background: url(AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner { background: url(AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab { background: url(AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_active .ajax__tab_outer { background: url(AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_active .ajax__tab_inner { background: url(AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_active .ajax__tab_tab { background: url(AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_body { font-family:verdana,tahoma,helvetica; font-size:10pt; border:1px solid #999999; border-top:0; padding:8px; background-color:#ffffff;}

Hi,

Do you know if there any sample css styles for the tabs out there? I am not very good with css and was wondering if I could look at some samples.

Thanks