Edit Dialog for RadGrid Using In UserControl

[Bahram]

Hello everyone and special thanks to Princy!

I am using a Radgrid with a Radwindow on Editing , you can see all about it in “Demo/Asp.Net Ajax/Window/Edit Dialog For RadGrid”

I tried it to customize it  in my Project logic and every thing is fine when I use the same structure(DefaultCS.aspx, and code behind and EditForm and its codebehind).

But  I am using a UserControl instead of aspx file ,as follow :

Root

.

.

.

Folder :Usercontrols

                                                ChargePanel.ascx(Instead of DefaultCS.aspx)[Inherited from SiteMasterpage]

                                                EditForm.aspx  

SiteMasterPage.master

 

When I click On Edit Button everything is true still, and works fine ,and the Grid will be updated after closing windows with some Java Script Code,after do that if I tend to edit another row when I click the Edit button It will raise  an error!

                Microsoft JScript runtime error: 'null' is null or not an object

 

Here is my Code,I have  tried  to find a solution from Many posts but I didn’t find anything to help me…

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ChargePanelCS.ascx.cs"
    Inherits="UserControls_ChargePanel" %>
<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    <style type="text/css">
        .orderText
        {
            font: normal 12px Arial,Verdana;
            margin-top: 6px;
        }
        .expandImage
        {
            display: inline-block;
            background-image: url('<%= Page.ResolveUrl("~/Common/styles09/sprite09.gif")%>');
            background-position: -596px -1191px;
            background-repeat: no-repeat;
            width: 15px;
            height: 15px;
        }
        * html .expandImage
        {
            background-position: -596px -1194px;
        }
        * + html .expandImage
        {
            background-position: -596px -1194px;
        }
    </style>
</telerik:RadCodeBlock>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function ShowEditForm(id, rowIndex) {
            var grid = $find("<%= RadGrid1.ClientID %>");

            var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
            grid.get_masterTableView().selectItem(rowControl, true);

            window.radopen("../UserControls/EditFormCS.aspx?PanelId=" + id, "UserListDialog");
            return false;
        }
        function ShowInsertForm() {
            window.radopen("../UserControls/EditFormCS.aspx", "UserListDialog");
            return false;
        }
        function refreshGrid(arg) {
            if (!arg) {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
            }
            else {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
            }
        }
        function RowDblClick(sender, eventArgs) {
            window.radopen("../UserControls/EditFormCS.aspx?PanelId=" + eventArgs.getDataKeyValue("PanelId"), "UserListDialog");
        }
    </script>
</telerik:RadCodeBlock>
   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" CssClass="myRadGrid" AllowPaging="true"
            AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource" PageSize="10"
            Font-Names="Tahoma" dir="rtl" AllowFilteringByColumn="true" OnUpdateCommand="RadGrid1_UpdateCommand"
            OnItemCreated="RadGrid1_ItemCreated">
            <ExportSettings IgnorePaging="true" OpenInNewWindow="true">
                <Pdf PageHeight="297mm" PageWidth="210mm" PageTitle="SushiBar menu" />
            </ExportSettings>
            <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" TableLayout="Auto"
                Font-Names="Tahoma" DataKeyNames="PanelId" EditMode="PopUp">
                <%--<EditFormSettings InsertCaption="ركورد جديد" CaptionFormatString="ويرايش" CaptionDataField="PanelId"
            PopUpSettings-Modal="true" FormCaptionStyle-Font-Names="Tahoma" EditColumn-HeaderStyle-Font-Names="Tahoma" />--%>
                <CommandItemTemplate>
                    <div style="padding: 5px 5px;" dir="rtl">
                        <asp:LinkButton ID="LinkButton4" runat="server" Font-Names="Tahoma" CommandName="RebindGrid"><img style="border:0px;vertical-align:middle;" alt="" src="../Images/Icons/Refresh.gif" />به روزآوري اطلاعات</asp:LinkButton>
                    </div>
                </CommandItemTemplate>
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                        <ItemStyle CssClass="MyImageButton" />
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn AllowSorting="true" DataField="PanelName" HeaderText="نام پنل"
                        SortExpression="PanelName" UniqueName="PanelName" ColumnEditorID="GridTextBoxColumn">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn HeaderText="رده بندي ارسال">
                        <ItemTemplate>
                            <telerik:RadRating dir="rtl" ID="RadRating1" runat="server" AutoPostBack="true" Value='<%# Convert.ToDouble(Eval("Used_Charges_Send"))/100000 %>'
                                OnRate="RadRating1_Rate" ReadOnly="true" Precision="Item" ItemCount="10" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn AllowSorting="true" DataField="N_Charges_Send" HeaderText="شارژ ارسال"
                        SortExpression="N_Charges_Send" UniqueName="N_Charges_Send" ItemStyle-CssClass="grid_txt_NO"
                        ColumnEditorID="GridTextBoxColumn">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn AllowSorting="true" DataField="Fake_Charges_Send" HeaderText="شارژ اضطراري"
                        SortExpression="Fake_Charges_Send" UniqueName="Fake_Charges_Send" ItemStyle-CssClass="grid_txt_NO"
                        ColumnEditorID="GridTextBoxColumn">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="TemplateEditColumn">
                        <ItemTemplate>
                            <asp:HyperLink ID="EditLink" runat="server" ToolTip="افزايش شارژ" ImageUrl="../Images/Icons/Credit.png"
                                Text="Charge"></asp:HyperLink>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
                <PagerStyle Mode="NumericPages" />
                <EditFormSettings ColumnNumber="3" CaptionDataField="PanelId" CaptionFormatString="ويرايش اطلاعات"
                    InsertCaption="" FormCaptionStyle-Font-Names="Tahoma" FormStyle-Font-Names="Tahoma">
                    <FormTableItemStyle Wrap="True"></FormTableItemStyle>
                    <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                    <FormMainTableStyle GridLines="None" CellSpacing="5" BorderColor="Yellow" CellPadding="3"
                        Width="100%" />
                    <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" Font-Names="Tahoma" />
                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                    <EditColumn ButtonType="ImageButton" InsertText="ثبت " UpdateText="ويرايش" UniqueName="EditCommandColumn1"
                        CancelText="لغو ">
                    </EditColumn>
                    <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
                <ClientEvents OnRowDblClick="RowDblClick" />
            </ClientSettings>
        </telerik:RadGrid>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true" OnClientClose="refreshGrid" >
            <Windows>
                <telerik:RadWindow ID="UserListDialog" runat="server" Title="Editing record" Height="320px"
                    Width="310px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false"
                    Modal="true" />
            </Windows>
        </telerik:RadWindowManager>
        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumn" runat="server" TextBoxStyle-CssClass="GridTextBoxColumnEditor" />
        <asp:Label ID="Label1" runat="server" Width="410px"></asp:Label>
    </div>
    <!-- content end -->
    </form>
</body>
</html>

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {

       if (e.Item is GridDataItem)
       {
           HyperLink editLink = (HyperLink)e.Item.FindControl("EditLink");
           editLink.Attributes["href"] = "#";
           editLink.Attributes["onclick"] = String.Format("return ShowEditForm('{0}','{1}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["PanelId"], e.Item.ItemIndex);
       }
   }
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
   {
       if (e.Argument == "Rebind")
       {
           RadGrid1.MasterTableView.SortExpressions.Clear();
           RadGrid1.MasterTableView.GroupByExpressions.Clear();
           RadGrid1.Rebind();
       }
       else if (e.Argument == "RebindAndNavigate")
       {
           RadGrid1.MasterTableView.SortExpressions.Clear();
           RadGrid1.MasterTableView.GroupByExpressions.Clear();
           RadGrid1.MasterTableView.CurrentPageIndex = RadGrid1.MasterTableView.PageCount - 1;
           RadGrid1.Rebind();
       }
   }

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditFormCS.aspx.cs" Inherits="UserControls_EditFormCS" %>

<!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 id="Head1" runat="server">
    <title>Edit dialog</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            function CloseAndRebind(args) {
                GetRadWindow().BrowserWindow.refreshGrid(args);
                GetRadWindow().close();
            }

            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

                return oWindow;
            }

            function CancelEdit() {
                GetRadWindow().close();
            }
            function onError(input, args) {
                var message = "Invalid character: ";

                message += "accepts only numberic values.";
                document.getElementById("numInput").innerHTML = args.get_inputText();
                document.getElementById("numErrorOut").innerHTML = message;
            }
            function onKeyPress(input, args) {

                document.getElementById("numInput").innerHTML = "";
                document.getElementById("numErrorOut").innerHTML = "";

            }
            function Close() {
                GetRadWindow().Close();
            }
        </script>
        <asp:ScriptManager ID="ScriptManager2" runat="server" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
        <br />
        <br />
        <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Type="Number" NumberFormat-DecimalDigits="0">
            <ClientEvents OnError="onError" OnKeyPress="onKeyPress"></ClientEvents>
        </telerik:RadNumericTextBox>
        <asp:Button runat="server" Text="Submit" ID="btnSubmit" OnClick="Unnamed1_Click" />
        <asp:Button runat="server" Text="Reset" ID="btnReset" OnClick="btnReset_Click" Visible="false" />
    </div>
    <asp:Label ID="Label1" runat="server" Width="410px"></asp:Label>
    <div class="module" style="width: 448px; clear: both;">
        <table cellpadding="4" cellspacing="0" width="100%">
            <tbody>
                <tr>
                    <td>
                        <span id="numInput"></span>
                    </td>
                    <td>
                        <span id="numErrorOut" style="color: Red"></span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);


        this.Page.Title = "Editing record";
    }
protected void btnSubmit_Click(object sender, EventArgs e)
    {

        //Some Code here

       Label1.Text = "<script type='text/javascript'>Close()</" + "script>";

        }





    }
    protected void btnReset_Click(object sender, EventArgs e)
    {
       /SomeCode here
    }

[Marin Bratanov]

Hello Bahram,

  I was not able to get this error (and anyway, it is too generic for me to be able to tell its origin), yet there were other errors raised from your code, mostly due to the way you add AJAX to the page.

In the case of user controls and master pages it is recommended that you place the RadAjaxManager in the master page and use either programmatic AjaxSettings, or a RadAjaxManagerProxy. This approach is described in the following online resources:
http://www.telerik.com/help/aspnet-ajax/ajax-masterpage.html
http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/usercontrol/defaultcs.aspx

This prompts for a change in the way you reference the controls as well, and you can find an example for this in my sample project that I have attached. Please examine it and compare it with your actual project, as it seems to be working correctly on my end and no errors are thrown. Please also note my comments in the code.

Feel free to use my sample as basis for your development and extend it further as needed by your custom logic.

On a side note - I would advise that you examine this help article on some better ways to inject the script that closes the RadWIndow.


All the best,
Marin
the Telerik team

[L D]

Hi 
I tried implementing a simple EditMode=PopUp in a RadGrid control that is within a Usercontrol and it does not seem to work . Where as if the same control id used directly on the Page , the edit popup shows up. Can you please guide me as to what needs to be done when using the rad control within the usercontrol. Attached is a code for reference. 

Thanks in advance
LD 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TelerikRadGrid.ascx.cs"

    Inherits="Web.TelerikRadGrid" %>

<b>Grid with EditMode="EditForms" </b>

<br />

<telerik:RadGrid ID="radGridUserEditForms" ClientIDMode="Static" AllowPaging="True" runat="server"

    AutoGenerateColumns="False" AllowSorting="True" PageSize="3" GridLines="None"

    CellPadding="0" AllowMultiRowSelection="True" AllowAutomaticInserts="True" OnItemInserted="radGridUserEditForms_ItemInserted"

    OnItemUpdated="radGridUserEditForms_ItemUpdated" CellSpacing="0">

    <PagerStyle Mode="NextPrevAndNumeric" />

    <MasterTableView CommandItemDisplay="Bottom" CommandItemSettings-AddNewRecordText="Add"

        EditMode="EditForms" CommandItemSettings-ShowRefreshButton="false">

        <Columns>

            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">

                <ItemStyle   />

            </telerik:GridEditCommandColumn>

            <telerik:GridBoundColumn UniqueName="clnName" SortExpression="UserName" HeaderText="User"

                DataField="UserName">

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="clnAge" SortExpression="Age" HeaderText="Age"

                DataField="Age">

            </telerik:GridBoundColumn>

        </Columns>

        <EditFormSettings ColumnNumber="2" CaptionDataField="UserName" CaptionFormatString="Edit properties of User {0}"

            InsertCaption="New User" PopUpSettings-Modal="true">

        </EditFormSettings>

    </MasterTableView>

    <ClientSettings>

        <Selecting AllowRowSelect="true" />

    </ClientSettings>

</telerik:RadGrid>

 

 

 

<br />

<b>Grid with EditMode="PopUp" </b>

<br />

<telerik:RadGrid ID="radGridUserPopUp" ClientIDMode="Static" AllowPaging="True" runat="server"

    AutoGenerateColumns="False" AllowSorting="True" PageSize="3" GridLines="None"

    CellPadding="0" AllowMultiRowSelection="True" AllowAutomaticInserts="True" OnItemInserted="radGridUserPopUp_ItemInserted"

    OnItemUpdated="radGridUserPopUp_ItemUpdated" CellSpacing="0">

    <PagerStyle Mode="NextPrevAndNumeric" />

    <MasterTableView CommandItemDisplay="Bottom" CommandItemSettings-AddNewRecordText="Add"

        EditMode="PopUp" CommandItemSettings-ShowRefreshButton="false">

        <Columns>

            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">

                <ItemStyle />

            </telerik:GridEditCommandColumn>

            <telerik:GridBoundColumn UniqueName="clnName" SortExpression="UserName" HeaderText="User"

                DataField="UserName">

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="clnAge" SortExpression="Age" HeaderText="Age"

                DataField="Age">

            </telerik:GridBoundColumn>

        </Columns>

        <EditFormSettings ColumnNumber="2" CaptionDataField="UserName" CaptionFormatString="Edit properties of User {0}"

            InsertCaption="New User" PopUpSettings-Modal="true">

        </EditFormSettings>

    </MasterTableView>

    <ClientSettings>

        <Selecting AllowRowSelect="true" />

    </ClientSettings>

</telerik:RadGrid>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

 

namespace Web

{

    public partial class TelerikRadGrid : System.Web.UI.UserControl

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            radGridUserEditForms.DataSource = UserClass.GetAllUsers();

            radGridUserPopUp.DataSource = UserClass.GetAllUsers();

        }

 

        protected void radGridUserEditForms_ItemInserted(object source, GridInsertedEventArgs e)

        {}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Web
{
    public class User
    {
        public string UserName { get; set; }
        public int Age { get; set; }
    }

    public static class UserClass
    {
        public static List<User> GetAllUsers()
        {
            return new List<User>{new User{Age=30, UserName="John" },
                new User{Age=35, UserName="Jim"},
                new User{Age=1,UserName="Jake"}};
        }
    }
}

 

        protected void radGridUserEditForms_ItemUpdated(object source, GridUpdatedEventArgs e)

        {} 

        protected void radGridUserPopUp_ItemInserted(object source, GridInsertedEventArgs e)

        {} 

        protected void radGridUserPopUp_ItemUpdated(object source, GridUpdatedEventArgs e)

        {}

    }

}

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

    CodeBehind="Default.aspx.cs" Inherits="Web._Default" %>

    <%@ Register TagPrefix="uc" TagName="UserList" Src="~/TelerikRadGrid.ascx" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

     <telerik:RadScriptManager ID="radScripManager" runat="server">   

    </telerik:RadScriptManager>

    <h2>

        

    </h2>

    <p>

         <b>Requirement :</b> Show the Edit form of the Telerik RadGrid as a popup. Note - the radgrid is in the usercontrol "TelerikRadGrid.ascx".

         <br/><b>Issue:</b> The Edit form popup is not displayed. However the form shows up if the EditMode is set to "EditForms".

    </p>

    <p>

       <uc:UserList ID="ucUserList" runat="server"/>

    </p>

</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Web
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    }
}

[Marin Bratanov]

Hello L D,

Please try removing the ClientIDMode property, as the RadControls do not support the scenario where it is set to Static. This is because most of them are complex container controls and thus require the id changes the framework does for any other INaming container, while setting ClientIDMode to Static disables this.


Kind regards,
Marin
the Telerik team

[L D]

Thanks Marin, that worked perfectly .. awesome.. thank-you so much. :)