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

Bug with RadGrid Popup Editing

14 Answers 152 Views
Grid
This is a migrated thread and some comments may be shown as answers.
anand
Top achievements
Rank 1
anand asked on 12 Dec 2008, 07:24 PM
I am using a custom WebUserControl with popup editing mode in the RadGrid, however, any javascript that is included in the WebUserControl is never triggered.  Is this a limitation when using the popup editing mode or is there a way around this?

14 Answers, 1 is accepted

Sort by
0
anand
Top achievements
Rank 1
answered on 12 Dec 2008, 10:54 PM
Can someone from the telerik team please help me with this or point me to the right documentation.  I have not been able to find anything and I would like to confirm this before I embark on re-doing the UI
Thanks.
0
Steve Y
Top achievements
Rank 2
answered on 13 Dec 2008, 03:06 AM
Hi Anand,

I don't know how you're using/calling your javascript within the usercontrol (which is a popup edit template), but I have a small grid popup test case I just modified to include a button within my usercontrol and it fires fine. Here's the code I have.

<%` Control Language="C#" AutoEventWireup="true" CodeFile="ucTestGrid.ascx.cs" Inherits="UserControls_ucTestGrid" %> 
 
<script type="text/javascript"
    function abc() [ 
        var i = 0
        alert("abc"); 
    ] 
 
</script> 
 
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FirstName") %>' TabIndex="1" /> 
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("LastName") %>' TabIndex="2" /> 
<asp:Button ID="Button1" runat="server" OnClientClick="return abc();" Text="Button"  /> 
                                                 
<asp:button id="btnUpdate" text="Update" runat="server" CommandName="Update" /> 
<asp:button id="btnInsert" text="Insert" runat="server" CommandName="PerformInsert" /> 
<asp:button id="btnCancel" text="Cancel" runat="server" causesvalidation="False" commandname="Cancel" /> 

Regards, Steve




0
Steve Y
Top achievements
Rank 2
answered on 13 Dec 2008, 04:28 AM
ok.

I need to back up a little. It turns out that I had a javascript function in my aspx page holding the primary grid also called abc() - I was testing that a button would call a javascript function from the main grid page first before I put it into usercontrol. I didn't delete it when I tested the user control javascript call.

As I was deleting the test code from the aspx page, I noticed that the button on the usercontrol stopped working. I put it the javascript function back on the grid page and it worked again.

So. Bottom line so far, based on my small test, is that javascript functions on the main aspx page holding the grid can be called from the usercontrol edit form but I cannot get a javascript function located in the usercontrol to work.

Regards, Steve


0
Accepted
Vlad
Telerik team
answered on 15 Dec 2008, 07:11 AM
Hi Steve,

If you have RadAjax in your scenario you can wrap the JavaScript block in RadScriptBlock and the manager will executed this automatically:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function abc()
        {
             alert("abc");
        }
    </script>
</telerik:RadScriptBlock>

Greetings,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Steve Y
Top achievements
Rank 2
answered on 15 Dec 2008, 07:19 AM
Yep. That did the trick.

I had tried to put it into a RadCodeBlock but I had not tried a RadScriptBlock (I've never used this and don't yet know when to use it - perhaps it's time to RTM...)

Thanks, Steve
0
Vlad
Telerik team
answered on 15 Dec 2008, 07:42 AM
Hi Steven,

With RadCodeBlock you can wrap server-side code-blocks to avoid ReadOnly Controls collection problems. For example if you have something with <%= %> in the page <head> tag and if you try to set page StylesheetTheme you will get famous:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Here is an example:
<%@ Page StylesheetTheme="Theme1" Language="C#" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <script type="text/javascript"
        var test = '<%= "MyValue" %>'
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"
    <div> 
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    </div> 
    </form> 
</body> 
</html> 


To resolve this you can wrap the script block with RadCodeBlock:
<%@ Page StylesheetTheme="Theme1" Language="C#" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
        <script type="text/javascript"
            var test = '<%= "MyValue" %>'
        </script> 
    </telerik:RadCodeBlock> 
</head> 
<body> 
    <form id="form1" runat="server"
    <div> 
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    </div> 
    </form> 
</body> 
</html> 


If you want this JavaScript to be executed after every ajax request you can use RadScriptBlock:
<%@ Page StylesheetTheme="Theme1" Language="C#" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
        <script type="text/javascript"
            var test = '<%= "MyValue" %>'
        </script> 
    </telerik:RadScriptBlock> 
</head> 
<body> 
    <form id="form1" runat="server"
    <div> 
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" /> 
    </div> 
    </form> 
</body> 
</html> 
 


Sincerely yours,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Steve Y
Top achievements
Rank 2
answered on 15 Dec 2008, 08:22 AM
Thanks Vlad. This explanation really helps...

Regard, Steve

Hi Anand. Did you get your problem solved?
0
anand
Top achievements
Rank 1
answered on 15 Dec 2008, 04:26 PM
Hi,
  I was able to replicate this behavior over the weekend, did not have online access.
The suggested solution solves my issue. I appreciate all the help. Possibly this could be included as a note in the RadGrid pop editing example, since I believe most will be using the RadAjaxManager.

Thank you Vlad and Steven.
0
anand
Top achievements
Rank 1
answered on 15 Dec 2008, 11:16 PM
There is still a problem using validators and setting EnableClientScript = true.  Is there  a way to get around this?

0
Nikolay Rusev
Telerik team
answered on 17 Dec 2008, 02:57 PM
Hello anand,

Can you elaborate a bit more on what exactly is your scenario? Can show us how you are using validators and when the issue arise?
Thus we'll be able to help you more on this.

Kind regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
anand
Top achievements
Rank 1
answered on 17 Dec 2008, 05:46 PM
I have created a separate sample application that encapsulates only the issue.  I might be doing something that is incorrect with the RadAjaxManager, so if you can point that out, it would be great.

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Telerik.SampleApp._Default" %> 
<%@ register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
<%@ Register src="ucUsers.ascx" tagname="ucUsers" tagprefix="uc1" %> 
 
<html> 
<head runat="server"
</head> 
<body> 
    <form id="form1" runat="server"
     
    <asp:scriptmanager id="ScriptManager1" runat="server" /> 
     
    <telerik:radajaxmanager id="RadAjaxManager1" runat="server"
        <ajaxsettings> 
            <telerik:ajaxsetting ajaxcontrolid="ucUsers"
                <updatedcontrols> 
                    <telerik:ajaxupdatedcontrol controlid="ucUsers" /> 
                </updatedcontrols> 
            </telerik:ajaxsetting> 
        </ajaxsettings> 
    </telerik:radajaxmanager> 
     
    <uc1:ucusers id="ucUsers" runat="server" /> 
     
    </form> 
</body> 
</html> 
 
 

ucUsers.ascx (contains the radgrid)
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucUsers.ascx.cs" Inherits="Telerik.SampleApp.ucUsers" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<telerik:radgrid id="users" runat="server" autogeneratecolumns="False" gridlines="None" skin="Vista" onneeddatasource="users_NeedDataSource"
    <headercontextmenu enabletheming="True"
        <collapseanimation type="OutQuint" duration="200"></collapseanimation> 
    </headercontextmenu> 
    <mastertableview editmode="PopUp" commanditemdisplay="Top"
        <columns> 
            <telerik:grideditcommandcolumn headerstyle-width="30px" itemstyle-horizontalalign="Center" buttontype="ImageButton" /> 
            <telerik:gridboundcolumn datafield="Username" headertext="Username" /> 
        </columns> 
        <rowindicatorcolumn> 
            <headerstyle width="20px"></headerstyle> 
        </rowindicatorcolumn> 
        <expandcollapsecolumn> 
            <headerstyle width="20px"></headerstyle> 
        </expandcollapsecolumn> 
        <editformsettings usercontrolname="ucEditUser.ascx" editformtype="WebUserControl" captionformatstring="User Details"  > 
            <popupsettings height="450px" width="650px" modal="false" scrollbars="Vertical" /> 
        </editformsettings> 
    </mastertableview> 
    <filtermenu enabletheming="True"
        <collapseanimation type="OutQuint" duration="200"></collapseanimation> 
    </filtermenu> 
</telerik:radgrid> 

ucUsers.ascx.cs
using System.Collections.Generic; 
using Telerik.Web.UI; 
 
namespace Telerik.SampleApp 
    public class User 
    { 
        public string Username { getset; } 
    } 
    public partial class ucUsers : System.Web.UI.UserControl 
    { 
        protected void users_NeedDataSource(object source, GridNeedDataSourceEventArgs e) 
        { 
            users.DataSource =  new List<User> {new User {Username = "anand"}}; 
        } 
    } 


ucEditUser.ascx (used for the pop-up mode editing)
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucEditUser.ascx.cs" Inherits="Telerik.SampleApp.ucEditUser" %> 
 
<div> 
    <asp:textbox id="username" runat="server" text='<%#Eval("Username") %>' /> 
    <asp:requiredfieldvalidator id="requiredUsername" runat="server" enableclientscript="true" errormessage="Username is required." controltovalidate="username" /> 
    <asp:button id="buttonSubmit" runat="server" text="Update" /> 
</div> 

I have explicitly set enableclientscript="true", which works only when I remove the RadAjaxManager.  When included the validator does a postback to perform the validation, which is not good.


0
Steve Y
Top achievements
Rank 2
answered on 17 Dec 2008, 05:52 PM
Anand,

I think the issue is that you need to set the ajax manager control id to the id of the grid and not the usercontrol.

<telerik:radajaxmanager id="RadAjaxManager1" runat="server">  
        <ajaxsettings>  
            <telerik:ajaxsetting ajaxcontrolid="users">  
                <updatedcontrols>  
                    <telerik:ajaxupdatedcontrol controlid="users" />  
                </updatedcontrols>  
            </telerik:ajaxsetting>  
        </ajaxsettings>  
    </telerik:radajaxmanager>  

Regards, Steve
0
anand
Top achievements
Rank 1
answered on 17 Dec 2008, 06:19 PM
Steve,
  That did seem to work as desired, however, it seems to violate the isolation of the usercontrol.  I would need to explicitly put the id of elements in a usercontrol outside it?, The behavior seems to change to postback if I included the usercontrol twice in a page (although this is not going to happen in my application), but wanted to know the ramifications of such an implementation.  I thought I should be using the RadAjaxProxyManager to accomplish ajax behavior from within a usercontrol.


0
Steve Y
Top achievements
Rank 2
answered on 17 Dec 2008, 06:28 PM
Yes - you are right. Using a proxy is the way to do it without violating the encapsulation of controls within the usercontrol.

1. Set up a RadAjaxManager in your main aspx page (default.aspx).

<telerik:radajaxmanager id="RadAjaxManager1" runat="server" /> 
 

2. Set up a RadAjaxManagerProxy within the usercontrol ascx page (ucUsers.ascx)

<telerik:radajaxmanagerproxy id="RadAjaxManagerproxy1" runat="server">   
        <ajaxsettings>   
            <telerik:ajaxsetting ajaxcontrolid="users">   
                <updatedcontrols>   
                    <telerik:ajaxupdatedcontrol controlid="users" />   
                </updatedcontrols>   
            </telerik:ajaxsetting>   
        </ajaxsettings>   
    </telerik:radajaxmanagerproxy>   

You can have only one ajax manager in a 'page', but the proxy control associates itself with the main radajaxmanager and so gets around that issue when you have user controls involved. Same for master pages... Put the ajaxmanager on the master page and have proxy controls each page that uses the master page.

Hope this helps, Steve
Tags
Grid
Asked by
anand
Top achievements
Rank 1
Answers by
anand
Top achievements
Rank 1
Steve Y
Top achievements
Rank 2
Vlad
Telerik team
Nikolay Rusev
Telerik team
Share this question
or