This is a migrated thread and some comments may be shown as answers.

Popup Edit Window - Issues

17 Answers 501 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin Schneider
Top achievements
Rank 1
Kevin Schneider asked on 18 Jun 2008, 07:30 PM
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.

17 Answers, 1 is accepted

Sort by
0
Kevin Schneider
Top achievements
Rank 1
answered on 18 Jun 2008, 08:38 PM
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.
0
Kevin Schneider
Top achievements
Rank 1
answered on 19 Jun 2008, 03:05 PM
Bumpity bump in case this got lost in the wood work.
0
Dimo
Telerik team
answered on 20 Jun 2008, 12:51 PM
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
0
Kevin Schneider
Top achievements
Rank 1
answered on 20 Jun 2008, 03:59 PM
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.
0
Buffet
Top achievements
Rank 1
answered on 20 Jun 2008, 06:07 PM
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
0
Jim
Top achievements
Rank 2
answered on 16 Jul 2008, 02:23 AM
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
0
Iana Tsolova
Telerik team
answered on 16 Jul 2008, 08:16 AM
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
0
Jim
Top achievements
Rank 2
answered on 16 Jul 2008, 11:14 AM
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
0
Sebastian
Telerik team
answered on 16 Jul 2008, 11:19 AM
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
0
Jim
Top achievements
Rank 2
answered on 16 Jul 2008, 11:47 AM
Thanks,
Just found that out and am in the middle of the migration.

Again thanks
0
Steve
Top achievements
Rank 2
answered on 18 Oct 2008, 03:02 AM
I am using the latest version of the controls and the new popup centering script (found in the help docs) does not work.
0
Iana Tsolova
Telerik team
answered on 20 Oct 2008, 07:02 AM
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.
0
Jim
Top achievements
Rank 1
answered on 01 Nov 2008, 05:13 PM
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.
0
Jim
Top achievements
Rank 1
answered on 01 Nov 2008, 09:13 PM
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.
0
Princy
Top achievements
Rank 2
answered on 03 Nov 2008, 06:48 AM
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
0
Jim
Top achievements
Rank 1
answered on 03 Nov 2008, 03:31 PM
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.
0
Dhawal
Top achievements
Rank 1
answered on 18 Dec 2008, 04:54 AM
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">
Tags
Grid
Asked by
Kevin Schneider
Top achievements
Rank 1
Answers by
Kevin Schneider
Top achievements
Rank 1
Dimo
Telerik team
Buffet
Top achievements
Rank 1
Jim
Top achievements
Rank 2
Iana Tsolova
Telerik team
Sebastian
Telerik team
Steve
Top achievements
Rank 2
Jim
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Dhawal
Top achievements
Rank 1
Share this question
or