Popup Edit Window - Issues

[Kevin Schneider]

There are 4 things that I'm trying to do and having trouble with.

I have my grid using the Telerik skin.  I have the rest of my controls using the Web20 skin (blue and silver basically).

I'm using the EditMode="Popup" on my grid and I'm specifying a custom template for it to use.  In this template I have a number of RadTextBox's that should be styling to Web20 but are being forced to use a grey/silver border (I assume from the Telerik skin).  Is this normal behaviour?  I've tried setting them via Skin="Web20" instead of using my theme but the problem persists.

Another problem I'm having is setting the window title of the popup.  I'd like it to say something like "Client Details" but I can't find the property to set this value.

I aso want this window to be modal but I don't see the option for it.

Finally I don't see the option to specify where the window opens.  I'd like to be able to tell the popup to open in the center of my screen instead of basing it off of the location of the grid that is opening it.

Thanks.

[Kevin Schneider]

A couple more issues I've run into:

1) If I have a validation summary dynamically show itself when saving the record then it will expand the size of the form but the window will not expand itself.  This makes it so the controls near the bottom of the window overhang.  I have not specified a height/width of the window so I would think it could grow/shrink to accomodate its contents?

2) Is there a way to make it so the close button (X) in the top right of the window does not cause validation?  I would like it to act as a cancel button really and close the window regardless.


Thank you.

[Kevin Schneider]

Bumpity bump in case this got lost in the wood work.

[Dimo]

Hello Kevin,

In order to set а window title you must use:

<EditFormSettings  CaptionFormatString="Client Details"  />

You may also want to check this related help article:

http://www.telerik.com/help/aspnet-ajax/grdpopupeditform.html
                            

Modal mode will be available in the next release, but for centering the popup you will have to do few things. Listen for OnPopUpShowing client event and then the coordinates of the edit form. For example:

<ClientSettings>
       <ClientEvents OnPopUpShowing="CenterEditForm" />
</ClientSettings>

in your JavaScript:

function CenterEditForm(sender, eventArgs)
{
 //get instance of the edit form
 var popup = eventArgs.get_popUp();

 //your custom code for centering
 popup.style.top = "40%";
        popup.style.left = "40%";     
}

The validation on the Close button (X) is internally off - CausesValidation = false. It should react like a cancel action.

As for the textboxes - yes, the Grid edit form styles override the textboxes' Web20 skin. In order to fix this, please add the following CSS code to your web application:


body  form  .radInput_Web20  .radEnabledCss_Web20,
body  form  .radInput_Web20  .radEmptyMessageCss_Web20,
body  form  .radInput_Web20  .radHoverCss_Web20,
body  form  .radInput_Web20  .radFocusedCss_Web20,
body  form  .radInput_Web20  .radReadOnlyCss_Web20,
body  form  .radInput_Web20  .radDisabledCss_Web20,
body  form  .radInput_Web20  .radNegativeCss_Web20,
body  form  .radInput_Web20  .radInvalidCss_Web20
{
    border:1px solid #6788be;
    border-bottom-width:2px;
    padding:2px 0 2px 1px;
    font:12px arial,verdana,sans-serif;
    color:#000;
}

.radInput_Web20  .radEnabledCss_Web20,
body  form  .radInput_Web20  .radEmptyMessageCss_Web20
{
    background:#fefefe;
}

body  form  .radInput_Web20  .radHoverCss_Web20
{   
    border-color:#a5bedf;
    background:#fefefe;
    color:#242424;
}

body  form  .radInput_Web20  .radFocusedCss_Web20
{   
    background:#fff;
}

body  form  .radInput_Web20  .radReadOnlyCss_Web20
{   
    background:#f9f9f9;
}

body  form  .radInput_Web20  .radDisabledCss_Web20
{   
    background:#f6f6f6;
    color:#aaa;
    cursor:default;
}

body  form  .radInput_Web20  .radNegativeCss_Web20
{   
    background:#fefefe;
}

body  form  .radInput_Web20  .radInvalidCss_Web20
{   
    border-color:#f00;
    background:#fefefe;
    color:#f00;
}



Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Kevin Schneider]

Thanks for your help.

The CSS you provided doesn't seem to impact the style of the controls inside of the popup though.  Am I missing something?

I'm also still looking for an answer on the height/width issue if javascript changes the content dimensions (like a validation control/summary does).

Also - the close button does in fact cause validation. Is there some way to turn this off?

Thank you.

[Buffet]

Hey Kevin

Would like to join your pact.

I was just about to post the same issues on the dynamically grow/shrink of the window size upon validation summary displaying and the validation on the X cancellation not letting the window close (this one here).

But say no more, you said it all!

Please help Telerik!

Thanks

[Jim]

I see no OnPopupShowing Event.  Need this, form shows up half off page.  Also how can I make the red x, cancel button not visible.

Thanks, Jim

[Iana Tsolova]

Hi Jim,

Please find attached a sample project on how to center the pop-up edit form in RadGrid and how to hide the pop-up close button also.

Let us know if any issues arise.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jim]

I get the following error when I try to implement your solution:
Type 'Telerik.Web.UI.GridClientEvents' does not have a public property named 'OnPopUpShowing'.

I am using Promethius, RadControls for ASPNET AJAX Q1 2008.

Thanks Jim

[Sebastian]

Hi Jim,

This new client event has been introduced in the Q1 2008 SP2 release of RadControls for ASP.NET AJAX (2008.1.619). Please migrate to this version following the instructions from this KB article and let us know how it goes.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jim]

Thanks,
Just found that out and am in the middle of the migration.

Again thanks

[Steve]

I am using the latest version of the controls and the new popup centering script (found in the help docs) does not work.

[Iana Tsolova]

Hi Steve,

Could elaborate more on the issue you are facing?

Note that the script from the help topic is to center the form over the grid. However if you would like place it at the center of the page, you should mind the window's width/height in the calculations.

Best wishes,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jim]

At http://www.telerik.com/help/aspnet-ajax/grdpopupeditform.html, it says this:

• ScrollBars - defines whether and which scrollbars should appear in the edit form. This setting is with higher priority, so if Height is set but the vertical scrollbar is not shown and the content requires more room, the popup will be resized to accommodate the entire content. The default value is None.

However, it doesn't seem to work.  Instead, the content continues below the bottom of the form.

[Jim]

I tried to write some JavaScript to size the UserControl popup according to it's contents, but was not able to get the size of the contents.  I tried a number of ways.  Immediately inside the popup (eventArgs.get_popUp()) was a div, which I couldn't find the size or position of. Inside that was a table (mine) that had some promising attributes and methods, such as getBoundingClientRect().  Unfortunately, everything I found was either 0 or an empty string.

[Princy]

Hi James,

You can get the width and the other properties of  the popup's inner contents as  shown below:

 var popUp = eventArgs.get_popUp();
 alert(popUp.children[1].children[0].style.width);

The object children[0] is the div  in the popup. You can get the table inside the div by trying to access the inner child .

Thanks,
Princy

[Jim]

Yes, this is one of the things I tried, but it yields an empty string.  I think you can only get back values that you manually put in, and cannot find the size of something that was sized by the browser.

[Dhawal]

Hi,

I ran into the same issue with required field validators on the page.

just add the below tag in your validation control:

<EnableClientScript="false">

as in

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate=<control name>
                                    ErrorMessage="This field is required!" runat="server" EnableClientScript="false">