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

RadListView inside RadListView problem.

5 Answers 293 Views

ListView

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

Shekhar asked on 15 May 2013, 07:01 AM

Hi,
Please consider UI hierarchy below:

RadListView (ParentListView)

ParentListView Child 1 RadGrid

ParentListView Child 2RadGrid

ParentListView Child 3 RadListView Sub (Sub ListView)

Sub ListView Child 1 RadGrid

Sub ListView Child 2 RadGrid

Every grid above supports Add and Edit item functionality and every grid has it's Need Data Source event.
The problem is whenever I Add new record in ParentListView Child 2RadGrid (using template) it get reflected in UI, however when I try to add new record in Sub ListView Child 2 RadGrid it opens template view, user can enter value in it and click on Save button however it doesn't show newly added record in UI (the datasource object has new record in it).

(No Declarative DataSource is used for any control).

Any help is appreciated.

Thanks,
Shekhar

Here is the code

<telerik:RadListView runat="server" ID="radListViewParent" ItemPlaceholderID="ParentPlaceHolder"

Skin="Vista" Font-Bold="true" EnableViewState="true">

<LayoutTemplate>

<table cellpadding="0" cellspacing="0" width="99%">

<tr>

<td align="left">

<asp:PlaceHolder ID="ParentPlaceHolder" runat="server"></asp:PlaceHolder>

</td>

</tr>

<tr style="height: 20px;">

<td align="left">

<telerik:RadButton ID="btnAddNewItem" Text="Add New" CommandName="PerformInsert"

runat="server">

</telerik:RadButton>

</td>

</tr>

</table>

</LayoutTemplate>

<ItemTemplate>

<table cellpadding="0" cellspacing="0" width="99%">

<tr>

<td>

<asp:HiddenField runat="server" ID="hdnFldId" Value='<%# Bind("Id") %>' />

<asp:Label ID="Label1" runat="server">Heading</asp:Label>

</td>

<td>

<telerik:RadTextBox runat="server" ID="txtHeading" Text='<%# Bind("Text") %>'>

</telerik:RadTextBox>

</td>

<td>

<asp:ImageButton runat="server" ID="imgBtnDelete" AlternateText="Delete" CommandName="Delete"

CommandArgument='<%# Bind("Id") %>' OnClientClick="return CofirmHeadingDelete()"

ImageUrl="~/App_Themes/Theme1/images/delete_small_btn.gif" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="Label2" runat="server">Text</asp:Label>

</td>

<td colspan="2">

<telerik:RadEditor runat="server" ID="radHeadingText" Height="200" Width="500" AutoResizeHeight="false"

Content='<%# Bind("TextDiscription") %>'>

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" Text="Bold" />

<telerik:EditorTool Name="Italic" Text="Italic" />

<telerik:EditorTool Name="Underline" Text="Underline" />

<telerik:EditorTool Name="InsertLink" Text="Insert Link Dialog" />

<telerik:EditorTool Name="Unlink" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

</td>

</tr>

<tr>

<td>

</td>

<td colspan="2">

<fieldset style="width: 100%;">

<legend style="font-weight: bold; font-size: larger; color: Black;">Ref Doc</legend>

<telerik:RadGrid runat="server" ID="ParentListViewChild1RadGrid" AutoGenerateColumns="false"

AllowSorting="false" AllowAutomaticUpdates="true" AllowAutomaticInserts="true"

Skin="Web20" OnItemDataBound="ParentListViewChild1RadGrid_ItemDataBound" OnItemCommand="ParentListViewChild1RadGrid_ItemCommand"

OnItemCreated="ParentListViewChild1RadGrid_ItemCreated" OnNeedDataSource="ParentListViewChild1RadGrid_NeedDataSource">

<MasterTableView DataKeyNames="Id" CommandItemDisplay="Bottom" Width="100%" InsertItemDisplay="Bottom">

<Columns>

<telerik:GridTemplateColumn ReadOnly="true">

<ItemTemplate>

<asp:Image ID="imgFiletypeIcon" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Description" HeaderText="Description">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CustomFileName" HeaderText="CustomFileName" ReadOnly="true"

Display="false">

</telerik:GridBoundColumn>

<telerik:GridAttachmentColumn MaxFileSize="1048576" EditFormHeaderTextFormat="Upload File:"

AttachmentDataField="BinaryData" DataTextField="CustomFileName" UniqueName="AttachmentColumn">

</telerik:GridAttachmentColumn>

<telerik:GridEditCommandColumn HeaderStyle-Width="30px" EditImageUrl="../../../App_Themes/Theme1/images/update_small_btn.png"

ButtonType="ImageButton">

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn>

<ItemTemplate>

<asp:ImageButton AlternateText="Delete" runat="server" ID="imgBtnEnrollDeleteRefDoc"

CommandName="Delete" ImageUrl="~/App_Themes/Theme1/images/delete_btn.png" CommandArgument='<%# Eval("ArtifactId") %>'

OnClientClick="return confirm('Are you sure you want to delete this record?');" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<CommandItemSettings ShowRefreshButton="false" AddNewRecordText="" AddNewRecordImageUrl="../../../App_Themes/Theme1/images/add_small_btn.gif" />

<EditFormSettings EditColumn-ButtonType="ImageButton" FormTableStyle-CellSpacing="5"

EditColumn-UpdateImageUrl="../../../App_Themes/Theme1/images/add_small_btn.gif"

EditColumn-CancelImageUrl="../../../App_Themes/Theme1/images/cancel_small_btn.gif"

EditColumn-UpdateText="Add" EditColumn-CancelText="Cancel">

<FormTableStyle CellSpacing="5" />

<FormMainTableStyle CellPadding="5" CellSpacing="5" />

</EditFormSettings>

<NoRecordsTemplate>

No records found.

</NoRecordsTemplate>

</MasterTableView>

<ClientSettings>

<ClientEvents OnCommand="gridCommand"></ClientEvents>

</ClientSettings>

</telerik:RadGrid>

</fieldset>

</td>

</tr>

<tr>

<td>

</td>

<td colspan="2">

<fieldset style="width: 100%;">

<legend style="font-weight: bold; font-size: larger; color: Black;">URL</legend>

<telerik:RadGrid runat="server" ID="ParentListViewChild2RadGrid" AutoGenerateColumns="false"

AllowSorting="false" Skin="Web20" Width="100%" OnItemCommand="ParentListViewChild2RadGrid_ItemCommand"

OnNeedDataSource="ParentListViewChild2RadGrid_NeedDataSource" OnItemDataBound="ParentListViewChild2RadGrid_ItemDataBound">

<MasterTableView DataKeyNames="HeadingId" CommandItemDisplay="Bottom" Width="100%"

ShowHeadersWhenNoRecords="true">

<Columns>

<telerik:GridBoundColumn UniqueName="Url" DataField="Url" HeaderText="Url" ItemStyle-Width="100px">

<ItemStyle Wrap="true" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name" ItemStyle-Width="100px">

<ItemStyle Wrap="true" />

</telerik:GridBoundColumn>

<telerik:GridEditCommandColumn HeaderText="" HeaderStyle-Width="30px" ButtonType="ImageButton"

EditImageUrl="../../../App_Themes/Theme1/images/update_small_btn.png">

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn ConfirmDialogType="Classic" ConfirmTitle="Confirm Delete"

DataTextField="" UniqueName="Delete" HeaderStyle-Width="30px" ConfirmText="Are you sure you want to delete this record?"

ButtonType="ImageButton" ImageUrl="~/App_Themes/Theme1/images/delete_btn.png"

Text="Delete" CommandArgument="" CommandName="Delete">

</telerik:GridButtonColumn>

</Columns>

<CommandItemSettings ShowRefreshButton="false" AddNewRecordText="" AddNewRecordImageUrl="../../../App_Themes/Theme1/images/add_small_btn.gif" />

<EditFormSettings>

<FormTableItemStyle Wrap="true"></FormTableItemStyle>

<EditColumn ButtonType="ImageButton" UpdateImageUrl="../../../App_Themes/Theme1/images/update_small_btn.png"

InsertImageUrl="../../../App_Themes/Theme1/images/add_small_btn.gif" UniqueName="EditCommandColumn1"

CancelImageUrl="../../../App_Themes/Theme1/images/cancel_small_btn.gif" CancelText="">

</EditColumn>

<FormTableButtonRowStyle HorizontalAlign="Right"></FormTableButtonRowStyle>

</EditFormSettings>

<NoRecordsTemplate>

No records found.

</NoRecordsTemplate>

</MasterTableView>

</telerik:RadGrid>

</fieldset>

</td>

</tr>

<tr>

<td colspan="3">

<telerik:RadListView runat="server" ID="ParentListViewChild3RadListViewSub" ItemPlaceholderID="SubListPlaceHolder"

Skin="Vista" Font-Bold="true" OnItemDataBound="ParentListViewChild3RadListViewSub_ItemDataBound"

OnItemCommand="ParentListViewChild3RadListViewSub_ItemCommand" EnableViewState="true"

DataSource='<%# Eval("SubHeadingsList") %>'>

<LayoutTemplate>

<fieldset style="width: 100%; background-color: #f3f3f3;">

<legend style="font-weight: bold; font-size: larger; color: Black;">Sub Headings</legend>

<table cellpadding="0" cellspacing="0" width="98%">

<tr>

<td>

<asp:PlaceHolder ID="SubListPlaceHolder" runat="server"></asp:PlaceHolder>

</td>

</tr>

<tr style="height: 20px;">

<td align="right">

<telerik:RadButton ID="btnAddNewSubListItem" Text="Add New Sub Item" runat="server"

CommandName="PerformInsert" CommandArgument='<%# Bind("HeadingId") %>'>

</telerik:RadButton>

</td>

</tr>

</table>

</fieldset>

</LayoutTemplate>

<ItemTemplate>

<table cellpadding="0" cellspacing="0" width="98%">

<tr>

<td>

<telerik:RadTextBox runat="server" ID="txtHeading" Text='<%# Bind("Text") %>'>

</telerik:RadTextBox>

</td>

<td>

<asp:ImageButton ID="imgBtnSubLisItemDelete" runat="server" AlternateText="Delete"

CommandName="Delete" CommandArgument='<%# Bind("HeadingId") %>' OnClientClick="return CofirmSubHeadingDelete()"

ImageUrl="~/App_Themes/Theme1/images/delete_small_btn.gif" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="Label4" runat="server">Text</asp:Label>

</td>

<td colspan="2">

<telerik:RadEditor runat="server" ID="radEditorSubListItemText" Height="200" Width="500"

AutoResizeHeight="false" Content='<%# Bind("TextDiscription") %>'>

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" Text="Bold" />

<telerik:EditorTool Name="Italic" Text="Italic" />

<telerik:EditorTool Name="Underline" Text="Underline" />

<telerik:EditorTool Name="InsertLink" Text="Insert Link Dialog" />

<telerik:EditorTool Name="Unlink" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

</td>

</tr>

<tr>

<td>

</td>

<td colspan="2">

<fieldset style="width: 100%">

<legend style="font-weight: bold; font-size: larger; color: Black;">Ref Doc</legend>

<telerik:RadGrid runat="server" ID="SubListViewChild1RadGrid" AutoGenerateColumns="false"

AllowSorting="false" AllowAutomaticUpdates="true" AllowAutomaticInserts="true"

Skin="Web20" OnItemCommand="SubListViewChild1RadGrid_ItemCommand" OnItemDataBound="SubListViewChild1RadGrid_ItemDataBound"

OnNeedDataSource="SubListViewChild1RadGrid_OnNeedDataSource">

<MasterTableView DataKeyNames="ArtifactId" CommandItemDisplay="Bottom" Width="90%">

<Columns>

<telerik:GridBoundColumn DataField="IsFileUploaded" HeaderText="ID" ReadOnly="true"

Display="false">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn ReadOnly="true">

<ItemTemplate>

<asp:Image ID="imgFiletypeIcon" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Description" HeaderText="Description">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CustomFileName" ReadOnly="true" HeaderText="CustomFileName"

Display="false">

</telerik:GridBoundColumn>

<telerik:GridAttachmentColumn MaxFileSize="1048576" EditFormHeaderTextFormat="Upload File:"

HeaderText="File" AttachmentDataField="BinaryData" DataTextField="CustomFileName"

UniqueName="AttachmentColumn">

</telerik:GridAttachmentColumn>

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

EditImageUrl="../../../App_Themes/Theme1/images/update_small_btn.png">

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn>

<ItemTemplate>

<asp:ImageButton AlternateText="Delete" runat="server" ID="imgSubHeadBtnDeleteRefDoc"

CommandName="Delete" ImageUrl="~/App_Themes/Theme1/images/delete_btn.png" CommandArgument='<%# Eval("ArtifactId") %>'

OnClientClick="return confirm('Are you sure you want to delete this record?');" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<CommandItemSettings ShowRefreshButton="false" AddNewRecordText="" AddNewRecordImageUrl="../../../App_Themes/Theme1/images/add_small_btn.gif" />

<EditFormSettings EditColumn-ButtonType="ImageButton" FormTableStyle-CellSpacing="5"

EditColumn-UpdateImageUrl="../../../App_Themes/Theme1/images/add_small_btn.gif"

EditColumn-CancelImageUrl="../../../App_Themes/Theme1/images/cancel_small_btn.gif"

EditColumn-UpdateText="Save" EditColumn-CancelText="Cancel">

<EditColumn UniqueName="EditCommandColumn">

</EditColumn>

<FormTableStyle CellSpacing="5" />

<FormMainTableStyle CellPadding="5" CellSpacing="5" />

</EditFormSettings>

<NoRecordsTemplate>

No records found.

</NoRecordsTemplate>

</MasterTableView>

<ClientSettings>

<ClientEvents OnCommand="gridCommand"></ClientEvents>

</ClientSettings>

</telerik:RadGrid>

</fieldset>

</td>

</tr>

<tr>

<td>

</td>

<td colspan="2">

<fieldset style="width: 100%">

<legend style="font-weight: bold; font-size: larger; color: Black;">URL</legend>

<telerik:RadGrid runat="server" ID="SubListViewChild2RadGrid" AutoGenerateColumns="false"

AllowSorting="false" Skin="Web20" Width="100%" OnNeedDataSource="SubListViewChild2RadGrid_NeedDataSource"

OnItemCommand="SubListViewChild2RadGrid_ItemCommand" OnItemDataBound="SubListViewChild2RadGrid_ItemDataBound">

<MasterTableView DataKeyNames="ArtifactId" CommandItemDisplay="Bottom" Width="100%">

<Columns>

<telerik:GridBoundColumn DataField="Url" HeaderText="Url" ItemStyle-Width="100px">

<ItemStyle Wrap="true" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Name" HeaderText="Name" ItemStyle-Width="100px">

<ItemStyle Wrap="true" />

</telerik:GridBoundColumn>

<telerik:GridEditCommandColumn HeaderText="" HeaderStyle-Width="30px" ButtonType="ImageButton"

EditImageUrl="../../../App_Themes/Theme1/images/update_small_btn.png">

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn ConfirmDialogType="Classic" ConfirmTitle="Confirm Delete"

DataTextField="" UniqueName="Delete" HeaderStyle-Width="30px" ConfirmText="Are you sure you want to delete this record?"

ButtonType="ImageButton" ImageUrl="~/App_Themes/Theme1/images/delete_btn.png"

Text="Delete" CommandArgument="" CommandName="Delete">

</telerik:GridButtonColumn>

</Columns>

<CommandItemSettings ShowRefreshButton="false" AddNewRecordText="" AddNewRecordImageUrl="../../../App_Themes/Theme1/images/add_small_btn.gif" />

<EditFormSettings>

<FormTableItemStyle Wrap="true"></FormTableItemStyle>

<EditColumn UpdateText="" UpdateImageUrl="../../../App_Themes/Theme1/images/update_small_btn.png"

InsertText="" InsertImageUrl="../../../App_Themes/Theme1/images/add_small_btn.gif"

ButtonType="ImageButton" UniqueName="EditCommandColumn1" CancelImageUrl="../../../App_Themes/Theme1/images/cancel_small_btn.gif"

CancelText="">

</EditColumn>

<FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>

</EditFormSettings>

<NoRecordsTemplate>

No records found.

</NoRecordsTemplate>

</MasterTableView>

</telerik:RadGrid>

</fieldset>

</td>

</tr>

</table>

</ItemTemplate>

<ItemSeparatorTemplate>

<table>

<tr style="height: 20px;">

</tr>

</table>

</ItemSeparatorTemplate>

</telerik:RadListView>

</td>

</tr>

</table>

</ItemTemplate>

<ItemSeparatorTemplate>

<table>

<tr style="height: 20px;">

</tr>

</table>

</ItemSeparatorTemplate>

</telerik:RadListView>

5 Answers, 1 is accepted

answered on 14 Jun 2013, 02:48 PM

Control-Hierarchy.png

Hi Eyup,

Thanks for the reply.

Unfortunately, don't have runnable POC application right now; however I will appreciate any guidelines on implementing below functionality:

I want to implement control hierarchy mentioned in earlier post
i.e.

RadListView (ParentListView)
ParentListView Child 1 RadGrid

        ParentListView Child 2RadGrid
        ParentListView Child 3 RadListView Sub (Sub ListView)
                            Sub ListView Child 1 RadGrid
                            Sub ListView Child 2 RadGrid

From above hierarchy following are the grids which have Upload control in it.
a. ParentListView Child 1 - RadGrid
b. Sub ListView Child 1 - RadGrid

All the grids have Add, Update and Delete functionality and both the RadListView (i.e.ParentListView and Sub ListView) have Add and Delete functionality.

(No Declarative DataSource is used for any control).

All the hierarchy is inside one RadAjaxPanel.

Would like to know your opinion on above hierarchy, whether we should go for a heavy control hierarchy? Or we should use some other control, to achieve the same.

Thank you in advance.

Thanks,
Shekhar

answered on 19 Jun 2013, 08:28 AM

Hello Shekhar,

You can use hierarchical structured RadGrid with templates. Please check out the following demos for a practical implementation and choose the approach most suitable to your specific requirements.:
- Standard Hierarchy
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/declarativerelations/defaultcs.aspx
- Programmatic Hierarchy
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/autogeneratedhierarchy/defaultcs.aspx
- Hierarchy with Templates
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx
- Template relations
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplatedeclarativerelations/defaultcs.aspx
- Master / Detail grids
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/selectedvalue/defaultcs.aspx

Hope this helps.

Regards,
Eyup
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 03 Jul 2013, 02:23 PM

Hi Eyup,

Thank you for suggesting new control structures.
I have achieved required control structure using RadListView, however facing one issue while uploading file. Whenever I try to upload document 1st time it doesn't upload file to server. Struggling with the issue. Any help id appreciated.
Thank you!

Below is the code.

TestControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestControl.ascx.cs" Inherits="TestControl" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">

<script type="text/javascript">

function gridCommand(sender, args) {

if (args.get_commandName() == "DownloadAttachment") {

var manager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');

manager.set_enableAJAX(false);

setTimeout(function () {

manager.set_enableAJAX(true);

}, 0);

}

var upload = null;

function uploadFileSelected(sender) {

if (sender.value != "") {

//Validation for type.

var indexOfSeparator = sender.value.toString().lastIndexOf('.');

var fileExt = sender.value.toString().slice(indexOfSeparator, sender.value.toString().length);

var valid_extensions = /(.doc|.docx|.pdf|.ppt|.pptx)$/i;

if (valid_extensions.test(fileExt)) {

upload = sender;

}

else {

alert('Only .pdf, .doc or .ppt type of files are allowed.');

//Clears selected file from upload control.

sender.select();

var clr = sender.createTextRange();

clr.execCommand('delete');

sender.focus();

upload = null;

}

else {

upload = null;

}

//This function gets called when Ajax request starts

//This function disables Async post back and posts complete page

//if File is getting uploaded.

function ConditionalPostback(sender, eventArgs) {

var eventArgument = eventArgs.get_eventArgument();

if (eventArgument.indexOf("Update") > -1 || eventArgument.indexOf("PerformInsert") > -1) {

if (upload && upload.value != "") {

eventArgs.set_enableAjax(false);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel2">

<ClientEvents OnRequestStart="ConditionalPostback"></ClientEvents>

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="gridEnrollmentRefDocs">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="gridEnrollmentRefDocs"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="radLoadingPnlEnrlmntRefDoc" Skin="Windows7" RegisterWithScriptManager="true">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel runat="server" ID="radPanelEnrlmntRefDoc"

LoadingPanelID="radLoadingPnlEnrlmntRefDoc"

ClientEvents-OnRequestStart="ConditionalPostback">

<telerik:RadGrid ID="gridEnrollmentRefDocs" runat="server"

AutoGenerateColumns="false"

AllowSorting="false"

AllowAutomaticInserts="false"

AllowAutomaticUpdates="false"

AllowAutomaticDeletes="false"

OnItemDataBound="gridEnrollmentRefDocs_ItemDataBound"

OnItemCommand="gridEnrollmentRefDocs_ItemCommand"

OnNeedDataSource="gridEnrollmentRefDocs_NeedDataSource"

GridLines="Both" Width="98%">

<MasterTableView DataKeyNames="ArtifactId" CommandItemDisplay="Bottom"

ItemStyle-HorizontalAlign="Left"

AlternatingItemStyle-HorizontalAlign="Left"

InsertItemDisplay="Bottom" EditMode="EditForms" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center">

<Columns>

<telerik:GridBoundColumn DataField="IsFileUploaded" HeaderText="ID" ReadOnly="true" Display="false">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn ReadOnly="true" HeaderText="File Type" UniqueName="FileType">

<ItemTemplate>

<asp:HyperLink runat="server" ID="imgFiletypeIcon" Target="_blank" CssClass="hyperlink"></asp:HyperLink>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="UploadedFileName" UniqueName="UploadedFileName" HeaderText="File Name">

<ItemTemplate>

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

</ItemTemplate>

<InsertItemTemplate>

<asp:FileUpload runat="server" ID="enrlmntInsertFileUpload" onchange="uploadFileSelected(this)"

AllowMultiple="false" />

</InsertItemTemplate>

<EditItemTemplate>

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

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Display Name" UniqueName="CustomFileName" DataField="CustomFileName">

<ItemTemplate>

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

</ItemTemplate>

<InsertItemTemplate>

<asp:TextBox runat="server" ID="txtEnrmntEditDisplayName" Width="240px"></asp:TextBox>

</InsertItemTemplate>

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtEnrmntEditDisplayName" Width="240px" Text='<%# Bind("CustomFileName") %>'></asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Description" UniqueName="Description" DataField="Description">

<ItemTemplate>

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

</ItemTemplate>

<InsertItemTemplate>

<asp:TextBox runat="server" ID="txtFileDesc" Width="240px" TextMode="MultiLine">

</asp:TextBox>

</InsertItemTemplate>

<ItemStyle HorizontalAlign="Left" />

<EditItemTemplate>

<asp:TextBox runat="server" ID="txtFileDesc" Width="240px" Text='<%# Eval("Description") %>'

TextMode="MultiLine">

</asp:TextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridEditCommandColumn ButtonType="ImageButton"

FooterStyle-HorizontalAlign="Left"

EditImageUrl="../../../App_Themes/Theme1/images/en-US/Admin/update_en.png"

UpdateImageUrl="../../../App_Themes/Theme1/images/en-US/Admin/save.png"

CancelImageUrl="../../../App_Themes/Theme1/images/en-US/Admin/cancel.png">

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn ItemStyle-Width="15%">

<ItemTemplate>

<asp:ImageButton AlternateText="Delete" runat="server" ID="imgBtnEnrollDeleteRefDoc"

CommandName="Delete" ImageUrl="~/App_Themes/Theme1/images/en-US/Admin/delete_en.png"

OnClientClick="return ConfirmArtifactDelete();" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<CommandItemStyle HorizontalAlign="Right" Height="25px" />

<CommandItemTemplate>

<asp:ImageButton runat="server" ID="btnAddNewEnrlmntRefDoc" CommandName="<%# RadGrid.InitInsertCommandName %>"

ImageUrl="~/App_Themes/Theme1/images/en-US/Admin/addnew_en.png" />

</CommandItemTemplate>

<EditFormSettings EditColumn-ButtonType="ImageButton"

EditColumn-FooterStyle-HorizontalAlign="Left"

ColumnNumber="4"

EditColumn-InsertImageUrl="../../../App_Themes/Theme1/images/en-US/Admin/save.png"

EditColumn-UpdateImageUrl="../../../App_Themes/Theme1/images/en-US/Admin/save.png"

EditColumn-CancelImageUrl="../../../App_Themes/Theme1/images/en-US/Admin/cancel.png">

<FormTableStyle CellSpacing="5" />

<FormMainTableStyle CellPadding="5" CellSpacing="5" />

</EditFormSettings>

<NoRecordsTemplate>

No records.

</NoRecordsTemplate>

</MasterTableView>

<ClientSettings EnableAlternatingItems="false">

<ClientEvents OnCommand="gridCommand"></ClientEvents>

</ClientSettings>

</telerik:RadGrid>

TestControl.ascx.cs

protected void gridEnrollmentRefDocs_ItemCommand(object sender, GridCommandEventArgs e)

{

RadGrid enrollGrid = sender as RadGrid;

GridEditableItem item = e.Item as GridEditableItem;

#region Add New

if (e.CommandName == RadGrid.PerformInsertCommandName && item != null)

{

FileUpload enrlmntUpload = item.FindControl("enrlmntInsertFileUpload") as FileUpload;

if (enrlmntUpload != null && enrlmntUpload.HasFile)

{

//File Upload Code

}

else

{

enrollGrid.Controls.Add(new LiteralControl("<b style='color:red;'> No file uploaded. </b>"));

e.Canceled = true;

}

return;

}

#endregion

}

TestPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs"

MasterPageFile="SiteMaster.Master" Inherits="TestPage" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Src="~/UserControls/TestControl.ascx" TagPrefix="Controls"

TagName="TestControl" %>

<asp:Content ContentPlaceHolderID="_submainSection" ID="NavigationContent" runat="server">

<Telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManagerCustomContents" />

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

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="radSubmainSectionLoadingPanel" runat="server" Skin="Windows7" />

<telerik:RadAjaxPanel runat="server" ID="ajaxPanel3" LoadingPanelID="radSubmainSectionLoadingPanel">

<Controls:TestControl ID="ucTestControl" runat="server" />

</telerik:RadAjaxPanel>

</asp:Content>

answered on 08 Jul 2013, 12:29 PM

Hi Shekhar,

Please note that using RadAjaxPanel simultaneously with RadAjaxManager or UpdatePanel ( or implementing multiple wrapped RadAjaxPanels ) is not a supported scenario and we highly recommend to avoid such implementation. Please either use just the manager to update your controls replacing the UpdatePanel / RadAjaxPanel with a regular asp:Panel, or use the UpdatePanel / RadAjaxPanel alone to wrap your page.

Furthermore, please refer to the following topic for file uploading with AJAX:
http://www.telerik.com/help/aspnet-ajax/ajax-ajax-and-upload.html

Hope this helps.

Regards,
Eyup
Telerik