RadListView inside RadListView problem.

6 posts, 0 answers
  1. Shekhar
    Shekhar avatar
    3 posts
    Member since:
    May 2013

    Posted 15 May 2013 Link to this post

    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>
                <!--ParentListView Child 1 RadGrid  -->
                <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>
                <!-- ParentListView Child 2RadGrid -->
                <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>
                <!-- ParentListView Child 3 RadListView Sub (Sub ListView)-->
                <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>
                                    <!--Grid Subheading Ref Doc-->
                                    <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>
                                    <!--Sub ListView Child 2 RadGrid -->
                                    <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>

     

     

  2. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 20 May 2013 Link to this post

    Hi Shekhar,

    Please open a support ticket to send us a sample runnable application demonstrating the erratic behavior. Thus, we will be able to further debug and analyze the problem and provide a proper solution.

    Thank you for your cooperation in advance.

    Greetings,
    Eyup
    the Telerik team
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shekhar
    Shekhar avatar
    3 posts
    Member since:
    May 2013

    Posted 14 Jun 2013 Link to this post

     

    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

     

  5. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 19 Jun 2013 Link to this post

    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.
  6. Shekhar
    Shekhar avatar
    3 posts
    Member since:
    May 2013

    Posted 03 Jul 2013 Link to this post


    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>

  7. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 08 Jul 2013 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017