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

Bug with RadGrid Popup Editing

14 Answers 172 Views

Grid

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

14 Answers, 1 is accepted

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

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

Accepted

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.

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 { get; set; } 
        
                } 
        
                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.

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

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Bug with RadGrid Popup Editing

14 Answers, 1 is accepted

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