I am using Rad.Window within Rad.Grid to serve as a popup edit form.
It works well when I use them in single aspx page. However, when I inherits a master page to this page, I got the error Two components with same id "ctl00_ContentMain_radwLocalChurchItemEditForm" can't be added to the application.
I search the source code, I can only find one div control with id="ctl00_ContentMain_radwLocalChurchItemEditForm":
<div id="ctl00_ContentMain_radwLocalChurchItemEditForm" style="display:none;">
The code from master page:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="LocalChurchHeader.master.vb" Inherits="LocalChurchSeromon.LocalChurchHeader" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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">
<title id="LocalChurchHeaderTitle">Local Church</title>
<link type="text/css" rel="Stylesheet" href="css/cmwPage.css" />
<link type="text/css" rel="Stylesheet" href="css/cmwItemDisplay.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="cmwTitleBar">
<div class="centered">
<div class="oiOutbox logo">
<img src="images/tjc_logo.png" alt="" style="height: 54px; width: 90px" />
</div>
<div id="spanTitle" class="cmwTitle" runat="server">
Vancouver Church Sermon List
</div>
<div class="float-divider"></div>
</div>
</div>
<div class="centered">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Office2007" >
<Tabs>
<telerik:RadTab runat="server" Text="Home" Selected="True">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Browse"
NavigateUrl="LocalChurchBrowse.aspx?langid=1&lcid=29">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Widget"
NavigateUrl="LocalChurchWidgetUI.aspx">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Listen"
NavigateUrl="LocalChurchSermonPlayer.aspx">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Management"
NavigateUrl="LocalChurchManagement.aspx">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<asp:ContentPlaceHolder ID="ContentMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
The code from aspx page:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LocalChurchManagement.aspx.vb" Inherits="LocalChurchSeromon.LocalChurchManagement" MasterPageFile="LocalChurchHeader.Master" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="ContentMain" ContentPlaceHolderID="ContentMain" runat="server">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript" language="javascript">
// Rad Windows: Dialog of validate report
function ItemEditForm_showDialog(url) {
//Force reload in order to guarantee that the onload event handler of the dialog which configures it executes on every show.
var oRadWindow = "<%= radwLocalChurchItemEditForm.ClientID %>";
var oWnd = window.radopen(url, oRadWindow);
oWnd.setUrl(oWnd.get_navigateUrl());
}
function ItemEditForm_clientShow(sender, eventArgs) {
var args = new Object();
// args.filenameAsTitle = srvArgs.filenameAsTitle;
sender.Argument = args;
}
function ItemEditForm_clientCallback(sender, args) {
}
</script>
</telerik:RadScriptBlock>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
<Windows>
<telerik:RadWindow ID="radwLocalChurchItemEditForm" runat="server"
Modal="True"
OnClientShow="ItemEditForm_clientShow"
ClientCallBackFunction="ItemEditForm_clientCallback"
Width="640px" Height="640px" Behaviors="Close, Move" VisibleStatusbar="False">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
AllowPaging="True" AllowSorting="True" GridLines="None" Skin="Office2007"
PageSize="25" AutoGenerateColumns="False">
<PagerStyle Mode="NextPrevAndNumeric" />
<MasterTableView>
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridTemplateColumn HeaderText="" UniqueName="tcEdit" AllowFiltering="false">
<ItemTemplate>
<a id="aFileEdit" href="javascript:void(0);" runat="server">Edit</a>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="ItemID" HeaderText="Item ID" DataType="System.Int32"
SortExpression="ItemID" UniqueName="ItemID" Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ItemTitle" HeaderText="Title"
SortExpression="ItemTitle" UniqueName="ItemTitle">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Author" HeaderText="Speaker"
SortExpression="Author" UniqueName="Author">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Translator" HeaderText="Intepretor"
SortExpression="Translator" UniqueName="Translator">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Publisher" HeaderText="Publisher"
SortExpression="Publisher" UniqueName="Publisher" Visible="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PubDate" DataType="System.DateTime"
HeaderText="Sermon Date" SortExpression="PubDate" UniqueName="PubDate"
DataFormatString="{0:MMM dd, yyyy}">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CreatedDate" DataType="System.DateTime"
HeaderText="Upload Date" SortExpression="CreatedDate"
UniqueName="CreatedDate" DataFormatString="{0:MMM dd, yyyy}">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="SpeakerSLangText"
HeaderText="Speaker Language" SortExpression="SpeakerSLangText"
UniqueName="SpeakerSLangText" >
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="TranslatorSLangText"
HeaderText="Intepretor Language" SortExpression="TranslatorSLangText"
UniqueName="TranslatorSLangText" >
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
</telerik:RadGrid>
</asp:Content>
and code behind:
Private Sub INIT_RadGrid_Header()
' must assign header text during page load!!
' the problem to put this in RadGrid1.ItemDataBound is, it will effect the sort function for Rad.Grid!
RadGrid1.MasterTableView.GetColumn("ItemID").HeaderText = "Item ID"
RadGrid1.MasterTableView.GetColumn("ItemTitle").HeaderText = "Title"
RadGrid1.MasterTableView.GetColumn("Author").HeaderText = "Speaker"
RadGrid1.MasterTableView.GetColumn("Translator").HeaderText = "Intepretor"
RadGrid1.MasterTableView.GetColumn("Publisher").HeaderText = "Location"
RadGrid1.MasterTableView.GetColumn("PubDate").HeaderText = "Sermon Date"
RadGrid1.MasterTableView.GetColumn("CreatedDate").HeaderText = "Upload Date"
RadGrid1.MasterTableView.GetColumn("SpeakerSLangText").HeaderText = "Speak In"
RadGrid1.MasterTableView.GetColumn("TranslatorSLangText").HeaderText = "Translate To"
End Sub
Private Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
Dim sCnn As String = System.Configuration.ConfigurationManager.ConnectionStrings("eLibDBConnectionString").ToString
Dim db As New dcLocalChurchDataContext(sCnn)
RadGrid1.DataSource = db.GetSermonList(oQS.LCID, oQS.LangID)
End Sub
Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
Select Case True
Case (TypeOf (e.Item) Is GridDataItem)
Dim oItem As GridDataItem = CType(e.Item, GridDataItem)
Dim s As String = ""
Dim aObj As System.Web.UI.HtmlControls.HtmlAnchor
s = oItem("ItemID").Text
aObj = CType(oItem("tcEdit").FindControl("aFileEdit"), System.Web.UI.HtmlControls.HtmlAnchor)
aObj.Attributes.Add("onclick", _
String.Format("ItemEditForm_showDialog('LocalChurchItemEditForm.aspx?langid={0:g}&itemid={1}')", CInt(oQS.LangID), s))
End Select
End Sub
Please help, thanks!
Darren
It works well when I use them in single aspx page. However, when I inherits a master page to this page, I got the error Two components with same id "ctl00_ContentMain_radwLocalChurchItemEditForm" can't be added to the application.
I search the source code, I can only find one div control with id="ctl00_ContentMain_radwLocalChurchItemEditForm":
<div id="ctl00_ContentMain_radwLocalChurchItemEditForm" style="display:none;">
The code from master page:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="LocalChurchHeader.master.vb" Inherits="LocalChurchSeromon.LocalChurchHeader" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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">
<title id="LocalChurchHeaderTitle">Local Church</title>
<link type="text/css" rel="Stylesheet" href="css/cmwPage.css" />
<link type="text/css" rel="Stylesheet" href="css/cmwItemDisplay.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="cmwTitleBar">
<div class="centered">
<div class="oiOutbox logo">
<img src="images/tjc_logo.png" alt="" style="height: 54px; width: 90px" />
</div>
<div id="spanTitle" class="cmwTitle" runat="server">
Vancouver Church Sermon List
</div>
<div class="float-divider"></div>
</div>
</div>
<div class="centered">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Office2007" >
<Tabs>
<telerik:RadTab runat="server" Text="Home" Selected="True">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Browse"
NavigateUrl="LocalChurchBrowse.aspx?langid=1&lcid=29">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Widget"
NavigateUrl="LocalChurchWidgetUI.aspx">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Listen"
NavigateUrl="LocalChurchSermonPlayer.aspx">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Management"
NavigateUrl="LocalChurchManagement.aspx">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<asp:ContentPlaceHolder ID="ContentMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
The code from aspx page:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LocalChurchManagement.aspx.vb" Inherits="LocalChurchSeromon.LocalChurchManagement" MasterPageFile="LocalChurchHeader.Master" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="ContentMain" ContentPlaceHolderID="ContentMain" runat="server">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript" language="javascript">
// Rad Windows: Dialog of validate report
function ItemEditForm_showDialog(url) {
//Force reload in order to guarantee that the onload event handler of the dialog which configures it executes on every show.
var oRadWindow = "<%= radwLocalChurchItemEditForm.ClientID %>";
var oWnd = window.radopen(url, oRadWindow);
oWnd.setUrl(oWnd.get_navigateUrl());
}
function ItemEditForm_clientShow(sender, eventArgs) {
var args = new Object();
// args.filenameAsTitle = srvArgs.filenameAsTitle;
sender.Argument = args;
}
function ItemEditForm_clientCallback(sender, args) {
}
</script>
</telerik:RadScriptBlock>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
<Windows>
<telerik:RadWindow ID="radwLocalChurchItemEditForm" runat="server"
Modal="True"
OnClientShow="ItemEditForm_clientShow"
ClientCallBackFunction="ItemEditForm_clientCallback"
Width="640px" Height="640px" Behaviors="Close, Move" VisibleStatusbar="False">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
AllowPaging="True" AllowSorting="True" GridLines="None" Skin="Office2007"
PageSize="25" AutoGenerateColumns="False">
<PagerStyle Mode="NextPrevAndNumeric" />
<MasterTableView>
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridTemplateColumn HeaderText="" UniqueName="tcEdit" AllowFiltering="false">
<ItemTemplate>
<a id="aFileEdit" href="javascript:void(0);" runat="server">Edit</a>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="ItemID" HeaderText="Item ID" DataType="System.Int32"
SortExpression="ItemID" UniqueName="ItemID" Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ItemTitle" HeaderText="Title"
SortExpression="ItemTitle" UniqueName="ItemTitle">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Author" HeaderText="Speaker"
SortExpression="Author" UniqueName="Author">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Translator" HeaderText="Intepretor"
SortExpression="Translator" UniqueName="Translator">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Publisher" HeaderText="Publisher"
SortExpression="Publisher" UniqueName="Publisher" Visible="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PubDate" DataType="System.DateTime"
HeaderText="Sermon Date" SortExpression="PubDate" UniqueName="PubDate"
DataFormatString="{0:MMM dd, yyyy}">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CreatedDate" DataType="System.DateTime"
HeaderText="Upload Date" SortExpression="CreatedDate"
UniqueName="CreatedDate" DataFormatString="{0:MMM dd, yyyy}">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="SpeakerSLangText"
HeaderText="Speaker Language" SortExpression="SpeakerSLangText"
UniqueName="SpeakerSLangText" >
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="TranslatorSLangText"
HeaderText="Intepretor Language" SortExpression="TranslatorSLangText"
UniqueName="TranslatorSLangText" >
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
</telerik:RadGrid>
</asp:Content>
and code behind:
Private Sub INIT_RadGrid_Header()
' must assign header text during page load!!
' the problem to put this in RadGrid1.ItemDataBound is, it will effect the sort function for Rad.Grid!
RadGrid1.MasterTableView.GetColumn("ItemID").HeaderText = "Item ID"
RadGrid1.MasterTableView.GetColumn("ItemTitle").HeaderText = "Title"
RadGrid1.MasterTableView.GetColumn("Author").HeaderText = "Speaker"
RadGrid1.MasterTableView.GetColumn("Translator").HeaderText = "Intepretor"
RadGrid1.MasterTableView.GetColumn("Publisher").HeaderText = "Location"
RadGrid1.MasterTableView.GetColumn("PubDate").HeaderText = "Sermon Date"
RadGrid1.MasterTableView.GetColumn("CreatedDate").HeaderText = "Upload Date"
RadGrid1.MasterTableView.GetColumn("SpeakerSLangText").HeaderText = "Speak In"
RadGrid1.MasterTableView.GetColumn("TranslatorSLangText").HeaderText = "Translate To"
End Sub
Private Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
Dim sCnn As String = System.Configuration.ConfigurationManager.ConnectionStrings("eLibDBConnectionString").ToString
Dim db As New dcLocalChurchDataContext(sCnn)
RadGrid1.DataSource = db.GetSermonList(oQS.LCID, oQS.LangID)
End Sub
Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
Select Case True
Case (TypeOf (e.Item) Is GridDataItem)
Dim oItem As GridDataItem = CType(e.Item, GridDataItem)
Dim s As String = ""
Dim aObj As System.Web.UI.HtmlControls.HtmlAnchor
s = oItem("ItemID").Text
aObj = CType(oItem("tcEdit").FindControl("aFileEdit"), System.Web.UI.HtmlControls.HtmlAnchor)
aObj.Attributes.Add("onclick", _
String.Format("ItemEditForm_showDialog('LocalChurchItemEditForm.aspx?langid={0:g}&itemid={1}')", CInt(oQS.LangID), s))
End Select
End Sub
Please help, thanks!
Darren