User control inside RadGrid Javascript Problem

[fenix2222]

Hi,

I have a weird problem. I have created a usercontrol called MemberPicker, which allows me to select particular member. It has textbox and button. On button click javascript fires and opens RadWindow with a search screen for members. When member is chosen RadWindow is closed and members name is populated into the textbox of the MemberPicker. It works fine when I put it on any page. However I get function undefined javascript error when I put MemberPicker control inside RadGrid in EditItemTemplate of one of the columns?

I must mention that RadGrid is wrapped inside RadAjaxPanel, when I remove it everything works fine. But I really need to have ajax effects with loading panel etc. I know you would probably suggest to use RadAjaxManager, but how can I use it to avoid error I am getting without removing all nice ajax effects?

Any suggestions I am clueless and this is very urgent. Thanks

[Princy]

Hi,

Have you checked the KB article on Using RadWindow for editing/inserting RadGrid records  ? Please post your code for a better understanding of the scenario.

Do let me know if this helps.

Thanks,
Princy
 

[fenix2222]

Here is a code for member's picker user control

<

 

telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

 

<script type="text/javascript">

 

 

function <%=this.ClientID%>_openLookup()

 

{

 

//get a reference to the RadWindow

 

 

var oWnd = $find("<%=RadWindow1.ClientID%>");

 

 

//use its client-side API to set its NavigateUrl (if needed) and show it

 

oWnd.setUrl(

"../../../Resources/UserControls/Popups/SearchMembers.aspx");

 

oWnd.show();

}

 

function <%=this.ClientID%>_onMemberLookupClose(oWnd, args)

 

{

 

//get the transferred arguments

 

 

var arg = args.get_argument();

 

 

if (arg)

 

{

 

var memberName = arg.memberName;

 

 

var memberID = arg.memberID;

 

 

var txtMemberName = $find("<%=txtMemberName.ClientID%>");

 

 

//var txtMemberName = document.getElementById("<%=txtMemberName.ClientID%>");

 

 

var hfldMemberName = document.getElementById("<%=hfldMemberName.ClientID%>");

 

 

var hfldMemberID = document.getElementById("<%=hfldMemberID.ClientID%>");

 

txtMemberName.set_value(memberName);

 

//txtMemberName.value = memberName;

 

hfldMemberName.value = memberName;

hfldMemberID.value = memberID;

}

}

 

</script>

 

</

 

telerik:RadCodeBlock>

 

<

 

telerik:RadWindowManager ID="WindowManager1" runat="server">

 

 

<Windows>

 

 

<telerik:RadWindow

 

 

id="RadWindow1"

 

 

runat="server"

 

 

showcontentduringload="false"

 

 

Title="Lookup Members"

 

 

InitialBehavior="Maximize"

 

 

AutoSize="false"

 

 

Width="800px"

 

 

Height="500px"

 

 

Animation="FlyIn"

 

 

InitialBehaviors="Maximize"

 

 

VisibleStatusbar="false"

 

 

Modal="true"

 

 

behaviors="Close,Reload,Maximize"

 

 

Style="z-index: 120" />

 

 

</Windows>

 

</

 

telerik:RadWindowManager>

 

<

 

table cellpadding="0">

 

 

<tr>

 

 

<td>

 

 

<asp:HiddenField ID="hfldMemberID" runat="server" Value="" />

 

 

<asp:HiddenField ID="hfldMemberName" runat="server" Value="" />

 

 

<telerik:RadTextBox ID="txtMemberName" runat="server" ReadOnly="true" Width="150px" />

 

<%

--<asp:TextBox ID="txtMemberName" runat="server" ReadOnly="true" Width="170px" />--%>

 

 

</td>

 

 

<td>

 

 

<asp:Button ID="btnLookup" runat="server" Text="..." />

 

 

</td>

 

 

<td>

 

 

<asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" />

 

 

</td>

 

 

</tr>

 

</

 

table>

 

protected

 

void Page_Load(object sender, EventArgs e)

 

{

txtMemberName.Text = hfldMemberName.Value;

btnLookup.OnClientClick =

string.Format("javascript:{0}_openLookup(); return false;", this.ClientID);

 

RadWindow1.OnClientClose =

string.Format("{0}_onMemberLookupClose", this.ClientID);

 

}

 

I use this control inside radGrid EditTemplate as follows

 

<

 

telerik:RadGrid ID="rgPrizes" runat="server"

 

 

AutoGenerateColumns="false"

 

 

AllowPaging="true"

 

 

 

 

 

 

AllowSorting="true"

 

 

ShowHeader="true"

 

 

OnNeedDataSource="rgPrizes_NeedDataSource"

 

 

OnUpdateCommand="rgPrizes_UpdateCommand"

 

 

 

 

 

 

OnDeleteCommand="rgPrizes_DeleteCommand"

 

 

 

 

 

 

OnInsertCommand="rgPrizes_InsertCommand"

 

 

 

 

 

 

OnItemCommand="rgPrizes_ItemCommand"

 

 

Width="920px"

 

 

 

 

 

 

CellPadding="2"

 

 

 

 

 

 

PageSize="15" >

 

 

 

 

 

 

<MasterTableView DataKeyNames="PrizeID" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage">

 

 

 

 

 

 

<Columns>

 

 

 

 

 

 

 

<telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-Width="30px">

 

 

 

 

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

 

 

 

 

</telerik:GridEditCommandColumn>

 

 

 

 

 

 

 

<telerik:GridButtonColumn ConfirmText="Delete this prize?" ItemStyle-Width="30px" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete">

 

 

 

 

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

 

 

 

 

</telerik:GridButtonColumn>

 

 

 

<telerik:GridTemplateColumn HeaderText="Prize" ItemStyle-Width="200px">

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

<asp:Label ID="lblName" runat="server" Text='<%# Eval("PrizeName")%>' />

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

<EditItemTemplate>

 

 

 

 

 

 

<telerik:RadTextBox ID="txtPrizeName" runat="server" MaxLength="50" Width="170px" Text='<%# Eval("PrizeName")%>' />

 

 

 

 

 

 

<asp:RequiredFieldValidator ID="rfvPrizeName" runat="server"

 

 

 

 

 

 

ControlToValidate="txtPrizeName"

 

 

 

 

 

 

Display="Dynamic"

 

 

 

 

 

 

ErrorMessage="*" />

 

 

 

 

 

 

</EditItemTemplate>

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn HeaderText="Amount" ItemStyle-Width="100px">

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

<asp:Label ID="lblPrizeAmount" runat="server" Text='<%# Eval("PrizeAmount") %>' />

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

<EditItemTemplate>

 

 

 

 

 

 

<telerik:RadNumericTextBox ID="txtPrizeAmount" runat="server" MaxValue="10000000" MinValue="0" Value='<%# Eval("PrizeAmount") == null || Eval("PrizeAmount") is System.DBNull ? 0 : double.Parse(Eval("PrizeAmount").ToString()) %>' ShowSpinButtons="True" Type="Currency" InvalidStyleDuration="100" Width="100px">

 

 

 

 

 

 

<NumberFormat AllowRounding="True" KeepNotRoundedValue="False" DecimalSeparator="." GroupSeparator="," GroupSizes="3" NegativePattern="$ -n" PositivePattern="$ n" DecimalDigits="2" />

 

 

 

 

 

 

</telerik:RadNumericTextBox>

 

 

 

 

 

 

<asp:RequiredFieldValidator ID="rfvPrizeAmount" runat="server"

 

 

 

 

 

 

ControlToValidate="txtPrizeAmount"

 

 

 

 

 

 

Display="Dynamic"

 

 

 

 

 

 

ErrorMessage="*" />

 

 

 

 

 

 

</EditItemTemplate>

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Winner" ItemStyle-Width="150px">

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

<asp:Label ID="lblWinnerName" runat="server" Text='<%# Eval("WinnerName") == null || Eval("WinnerName") is System.DBNull ? "<i>Not Set</i>" : Eval("WinnerName").ToString() %>' />

 

 

</ItemTemplate>

 

 

 

 

 

 

<EditItemTemplate>

 

 

 

 

 

 

<uc:MemberPicker ID="mpWinner" runat="server" MemberID='<%# Eval("WinnerID") == null || Eval("WinnerID") is DBNull ? (int?)null : int.Parse(Eval("WinnerID").ToString()) %>' MemberName='<%# Eval("WinnerName") %>' />

 

 

</EditItemTemplate>

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn HeaderText="Convert Type" ItemStyle-Width="80px">

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

<asp:Label ID="lblType" runat="server" Text='<%# bool.Parse(Eval("IsToBeConvertedToPoints").ToString()) ? "<b class=redfont>POINTS</b>" : (bool.Parse(Eval("IsToBeConvertedToMoney").ToString()) ? "<b class=bluefont>MONEY</b>" : "<i>Not Set</i>") %>' />

 

 

 

 

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn HeaderText="Is Converted" ItemStyle-Width="80px" ItemStyle-HorizontalAlign="Center">

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

<asp:Image ID="imgYes" runat="server" ImageUrl="~/Resources/Images/Icons/add.png" Visible='<%# bool.Parse(Eval("IsConverted").ToString()) %>' />

 

 

 

 

 

 

<asp:Image ID="imgNo" runat="server" ImageUrl="~/Resources/Images/Icons/delete.png" Visible='<%# !bool.Parse(Eval("IsConverted").ToString()) %>' />

 

 

 

 

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn HeaderText="Convert" ItemStyle-Width="250px" ItemStyle-HorizontalAlign="Center">

 

 

 

 

 

 

<ItemTemplate>

 

 

<asp:Button ID="btnToPoints" runat="server" Text="To Points" CommandName="ToPoints" CommandArgument='<%# Eval("PrizeID") %>' />

 

 

 

 

 

 

<asp:Button ID="btnToMoney" runat="server" Text="To Money" CommandName="ToMoney" CommandArgument='<%# Eval("PrizeID") %>' />

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

 

 

 

</Columns>

 

 

 

 

 

 

 

<EditFormSettings>

 

 

 

 

 

 

<EditColumn ButtonType="ImageButton" />

 

 

 

 

 

 

</EditFormSettings>

 

 

 

 

 

 

 

<PagerStyle Mode="NextPrevAndNumeric" />

 

 

 

</MasterTableView>

 

 

 

 

 

 

 

<ClientSettings EnableRowHoverStyle="true" AllowKeyboardNavigation="true">

 

 

 

 

 

 

</ClientSettings>

 

 

 

 

 

 

 

</telerik:RadGrid>

 

 

 

 

 

 

<telerik:RadWindowManager ID="WindowManager1" runat="server" />

 

 

 

 

[Yavor]

Hi Igor,

Based on the supplie dinformation, it is hard to determine what is causing the problem which you reported. If the issue persists, you can open a formal support ticket, and send us a small working project, demonstrating your setup, and showing the unwanted behavior. We will debug it locally, and get back to you with more information on the matter.

Greetings,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Noble]

Hi,
    I am facing exactly the same issue. I have a user control which has a textbox and a button. On click of my button i open a radwindow which enables user to search for a particular name(s) in active directory and return the selection to the user control. It works perfectly fine, when i put it on a page,but when i put it in a grid, it gives me an error. I tried adding it in the ITemTemplateand it works but it puts the  selected value in the textbox on the last row of the radgrid and not in the editform. The url given by does not work and gives an error. Appreciate if you could please help me

[Antonio Stoilkov]

Hi Noble,

From the information provided it seems that the problem is from how the controls that you set values to are accessed. However, without successfully replicating the problem on your side it is hard to determine the exact cause of the problem. In such cases we recommend opening a formal ticket and attaching a sample runnable project showing the unwanted behavior so we could debug it and advice you with the best possible solution.

Regards,
Antonio Stoilkov
Telerik

[Noble]

hi,
    I have a grid, where i have a column which maps users from active directory. In the View mode, I just display it as a label which is stored in the DB. In the Edit form I want to use a usercontrol which actually has a button and textbox and on click of the button, I open a pop up which searches from active directory and the selection displayed in the textbox. Please refer to the snapshot. I tried to use a template column  with the user control in the EditTemplate, but it breaks my code giving me a js error.

   Please  refer to the snaspshot

[Antonio Stoilkov]

Hi Noble,

The described scenario could be implemented with a GridTemplateColumn with EditItemTemplate defined as you have explained. Could you trace where the JS error is thrown? If it is in Telerik JS file you could upload a sample runnable project on public sharing site and provide a link so we could download it and debug it in order to provide you with the best possible solution.

Regards,
Antonio Stoilkov
Telerik