How to find Control inside EditFormSettings of RadTree List using javascript

3 posts, 0 answers
  1. Ajay
    Ajay avatar
    66 posts
    Member since:
    May 2009

    Posted 25 Jun 2012 Link to this post

    I have been using RadTreeList in one of my project, I have used RadUpload Control which lies inside the EditFormSettings of the RadTreeList. I have used javascript for validating RadUpload control (i.e. where user has selected any file or not), now the problem here is that I'm not able to find/get the RadUpload control inside the RadTreeList in my javascript, though I'm getting the RadTreeList control.

    Below is my code :-
     function IsFilesSelected(source, args) {
                debugger;
                args.IsValid = true;
                var treeList = $find("<%= FAQRadTreeList.ClientID %>");
                var RadUpload = treeList._findChildControl.getName("UploadDocumentRadUpload");
                var UploadLabel = treeList.selectItem(ImageExtensionLabel);
                var FileInputs = RadUpload.getFileInputs();
                for (var i = 0; i < FileInputs.length; i++) {
                    if (FileInputs[i].value && FileInputs[i].value.length > 0) {
                        args.IsValid = true;
                    }
                    else {
                        if (UploadLabel == null || UploadLabel.innerHTML == '')
                            args.IsValid = false;
                        else
                            args.IsValid = true;
                    }
                }
            }

    While my RadTreeList is shown below :-
    <telerik:RadTreeList ID="FAQRadTreeList" runat="server" AllowPaging="True" DataSourceID="FAQSqlDataSource"
                            PageSize="20" DataKeyNames="FAQ_ID" ParentDataKeyNames="FAQ_Parent_ID" AutoGenerateColumns="False"
                            Width="100%" OnInsertCommand="FAQRadTreeList_InsertCommand" OnItemCommand="FAQRadTreeList_ItemCommand"
                            OnItemDataBound="FAQRadTreeList_ItemDataBound" OnUpdateCommand="FAQRadTreeList_UpdateCommand"
                            OnItemDrop="FAQRadTreeList_ItemDrop">
                            <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                            <Columns>
                                <telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="ImageButton"
                                    AddRecordText="Add" ShowEditButton="true" ItemStyle-CssClass="MyImageButton">
                                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="60px" />
                                    <HeaderStyle VerticalAlign="Top" HorizontalAlign="Left" Width="60px" />
                                </telerik:TreeListEditCommandColumn>
                                <telerik:TreeListTemplateColumn DataField="FAQ_Title" UniqueName="FAQ_Title" HeaderText="Title">
                                    <ItemTemplate>
                                        <asp:Label ID="FAQTitleLabel" runat="server" Text='<%# Bind("FAQ_Title") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" />
                                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" />
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListTemplateColumn DataField="FAQ_Description" UniqueName="FAQ_Description"
                                    HeaderText="Description">
                                    <ItemTemplate>
                                        <asp:Label ID="FAQDescriptionLabel" runat="server" Text='<%# ( Eval("FAQ_Description").ToString().Length > 150)? string.Concat(Eval("FAQ_Description").ToString().Substring(0, 150), ".....") : Eval("FAQ_Description") %>'></asp:Label>
                                        <telerik:RadToolTip ID="FAQDescriptionRadToolTip" TargetControlID='<%# ( Eval("FAQ_Description").ToString().Length > 150)? "FAQDescriptionLabel" : "" %>'
                                            Width="400px" Height="300px" ContentScrolling="Y" runat="server" HideDelay="1000"
                                            Position="TopCenter" RelativeTo="Element" ShowDelay="1000">
                                            <%# Eval("FAQ_Description")%>
                                        </telerik:RadToolTip>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
                                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" />
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListTemplateColumn DataField="ParentName" UniqueName="ParentName" HeaderText="Parent Item">
                                    <ItemTemplate>
                                        <asp:Label ID="ParentTitleLabel" runat="server" Text='<%# Bind("ParentName") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100px" />
                                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100px" />
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListTemplateColumn DataField="FAQ_Order" UniqueName="FAQ_Order" HeaderText="Order">
                                    <ItemTemplate>
                                        <telerik:RadNumericTextBox ID="FAQOrderRadNumericTextBox" MinValue="1" NumberFormat-DecimalDigits="0"
                                            Enabled="false" runat="server" Width="50px" Text='<%# Bind("FAQ_Order") %>'>
                                            <EnabledStyle Font-Names="Verdana" HorizontalAlign="Right" />
                                        </telerik:RadNumericTextBox>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListTemplateColumn HeaderText="Status" DataField="FAQ_ActiveStatus"
                                    UniqueName="FAQ_ActiveStatus">
                                    <ItemTemplate>
                                        <asp:Label ID="ActiveStatusLabel" runat="server" CssClass='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "active" : "inactive" %>'
                                            ToolTip='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "Active" : "Inactive" %>'
                                            Text="     "></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListTemplateColumn DataField="FAQ_ActiveStatus" HeaderText="Action"
                                    UniqueName="ActiveStatus">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="ActiveInactiveButton" runat="server" ToolTip='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "Make inactive" : "Make active" %>'
                                            Width="14px" Height="14px" CommandName="ActiveInactive" ImageUrl='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "../App_Themes/ELPISCMS/images/inactive.png" : "../App_Themes/ELPISCMS/images/active.png" %>' />
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
                                </telerik:TreeListTemplateColumn>
                            </Columns>
                            <EditFormSettings EditFormType="Template" PopUpSettings-Width="100%">
                                <FormTemplate>
                                    <asp:Panel ID="DetailsPanel" runat="server" DefaultButton="SaveRadButton">
                                        <table border="0" cellpadding="0" cellspacing="5" class="innertable">
                                            <tr>
                                                <td class="td18">
                                                    Title : <span class="mandatorymark">*</span>
                                                </td>
                                                <td class="td82">
                                                    <telerik:RadTextBox ID="FAQTitleRadTextBox" runat="server" SkinID="FAQTitleRadTextBox">
                                                    </telerik:RadTextBox>
                                                    <asp:RequiredFieldValidator ID="ReferenceTitleRequiredFieldValidator" runat="server"
                                                        ValidationGroup="FAQValidationGroup" Display="Dynamic" SetFocusOnError="true"
                                                        ControlToValidate="FAQTitleRadTextBox" CssClass="requiredfield" ErrorMessage="Required!"></asp:RequiredFieldValidator>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td18">
                                                    Description : <span class="mandatorymark">*</span>
                                                </td>
                                                <td class="td82">
                                                    <telerik:RadTextBox ID="FAQDescriptionRadTextBox" runat="server" TextMode="MultiLine"
                                                        Rows="8" SkinID="FAQDescriptionRadTextBox">
                                                    </telerik:RadTextBox>
                                                    <%-- <telerik:RadEditor ID="ReferenceDescriptionRadEditor" runat="server" AutoResizeHeight="false"
                                                        EnableResize="false" OnClientLoad="OnClientLoad" EditModes="Design, Html" AllowScripts="false"
                                                        ContentFilters="RemoveScripts,MakeUrlsAbsolute,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
                                                        NewLineBr="true" StripFormattingOptions="AllExceptNewLines" StripFormattingOnPaste="AllExceptNewLines"
                                                        Height="600px" Width="700px">
                                                        <ImageManager ViewPaths="~/uploads/editoruploadimages" UploadPaths="~/uploads/editoruploadimages"
                                                            DeletePaths="~/uploads/editoruploadimages" />
                                                        <CssFiles>
                                                            <telerik:EditorCssFile Value="" />
                                                        </CssFiles>
                                                        <ContextMenus>
                                                            <telerik:EditorContextMenu Enabled="true">
                                                                <telerik:EditorTool Name="Cut" />
                                                                <telerik:EditorTool Name="Copy" />
                                                                <telerik:EditorTool Name="Paste" />
                                                            </telerik:EditorContextMenu>
                                                        </ContextMenus>
                                                        <Tools>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="AjaxSpellCheck" />
                                                                <telerik:EditorTool Name="FindAndReplace" />
                                                                <telerik:EditorTool Name="SelectAll" />
                                                                <telerik:EditorTool Name="Cut" />
                                                                <telerik:EditorTool Name="Copy" />
                                                                <telerik:EditorTool Name="Paste" />
                                                                <telerik:EditorTool Name="Redo" />
                                                                <telerik:EditorTool Name="Undo" />
                                                                <telerik:EditorTool Name="InsertLink" />
                                                            </telerik:EditorToolGroup>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="Bold" />
                                                                <telerik:EditorTool Name="Italic" />
                                                                <telerik:EditorTool Name="Underline" />
                                                            </telerik:EditorToolGroup>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="FontName" />
                                                                <telerik:EditorTool Name="RealFontSize" />
                                                                <telerik:EditorTool Name="ApplyClass" />
                                                            </telerik:EditorToolGroup>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="ForeColor" />
                                                                <telerik:EditorTool Name="BackColor" />
                                                                <telerik:EditorTool Name="FormatStripper" />
                                                            </telerik:EditorToolGroup>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="InsertAnchor" />
                                                                <telerik:EditorTool Name="InsertCustomLink" />
                                                                <telerik:EditorTool Name="InsertDate" />
                                                                <telerik:EditorTool Name="InsertGroupbox" />
                                                                <telerik:EditorTool Name="InsertHorizontalRule" />
                                                                <telerik:EditorTool Name="InsertUnorderedList" />
                                                                <telerik:EditorTool Name="InsertOrderedList" />
                                                                <telerik:EditorTool Name="Paragraph" />
                                                                <telerik:EditorTool Name="InsertTable" />
                                                                <telerik:EditorTool Name="InsertSnippet" />
                                                            </telerik:EditorToolGroup>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="Indent" />
                                                                <telerik:EditorTool Name="Outdent" />
                                                                <telerik:EditorTool Name="JustifyRight" />
                                                                <telerik:EditorTool Name="JustifyLeft" />
                                                                <telerik:EditorTool Name="JustifyCenter" />
                                                            </telerik:EditorToolGroup>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="LinkManager" />
                                                                <telerik:EditorTool Name="ImageManager" />
                                                                <telerik:EditorTool Name="ImageMapDialog" />
                                                                <telerik:EditorTool Name="DocumentManager" />
                                                                <telerik:EditorTool Name="ConvertToLower" />
                                                                <telerik:EditorTool Name="ConvertToUpper" />
                                                                <telerik:EditorTool Name="ToggleScreenMode" />
                                                            </telerik:EditorToolGroup>
                                                        </Tools>
                                                    </telerik:RadEditor>
                                                    <div style="float: right;">
                                                        <span id="counter" style="text-align: right;"></span>
                                                    </div>--%>
                                                    <asp:RequiredFieldValidator ID="FAQDescriptionRequiredFieldValidator" runat="server"
                                                        ValidationGroup="FAQValidationGroup" Display="Dynamic" SetFocusOnError="true"
                                                        ControlToValidate="FAQDescriptionRadTextBox" CssClass="requiredfield" ErrorMessage="Required!"></asp:RequiredFieldValidator>
                                                </td>
                                            </tr>
                                            <td class="td18">
                                                Upload Document : <span class="mandatorymark">*</span>
                                            </td>
                                            <td class="td82">
                                                <telerik:RadUpload ID="UploadDocumentRadUpload" runat="server" ControlObjectsVisibility="AddButton,RemoveButtons"
                                                    InputSize="50" AllowedFileExtensions=".png,.jpg,.jpeg,.gif" oncontextmenu="return false;"
                                                    onpaste="return false;" ReadOnlyFileInputs="true"/>
                                                <span style="line-height: 15px; vertical-align: top;">
                                                    <asp:Label ID="ImageExtensionLabel" runat="server" Text="<br/>(Only .PNG,.JPG,.JPEG,.GIF images allowed)" />
                                                    <br />
                                                    <asp:Label runat="server" ID="ImageNameLabel" Visible="false" />
                                                </span>
                                                <br />
                                                <telerik:RadProgressArea ID="UploadDocumentRadProgressArea" runat="server" ProgressIndicators="CurrentFileName">
                                                </telerik:RadProgressArea>
                                                <asp:CustomValidator ID="IsFilesSelectedCustomValidator" runat="server" ClientValidationFunction="IsFilesSelected"
                                                    Display="Dynamic" SetFocusOnError="true" CssClass="requiredfield" ValidationGroup="FAQValidationGroup"
                                                    ErrorMessage="Required!"></asp:CustomValidator>
                                                <asp:CustomValidator ID="ValidateExtensionCustomValidator" runat="server" ClientValidationFunction="validateImageRadUpload"
                                                    Display="Dynamic" SetFocusOnError="true" CssClass="requiredfield" ValidationGroup="FAQValidationGroup"
                                                    ErrorMessage="<br/>(Only .PNG,.JPG,.JPEG,.GIF images allowed)"></asp:CustomValidator>
                                            </td>
                                            <tr>
                                                <td>
                                                      
                                                </td>
                                                <td class="td82">
                                                    <telerik:RadGrid ID="FilesRadGrid" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
                                                        AllowSorting="True" AutoGenerateColumns="False" CellSpacing="0" DataSourceID="FilesSqlDataSource"
                                                        GridLines="None" Width="530px" Visible="false" OnItemCommand="FilesRadGrid_ItemCommand">
                                                        <MasterTableView DataKeyNames="FAQ_Uploads_ID" DataSourceID="FilesSqlDataSource">
                                                            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                                                                <HeaderStyle Width="20px" />
                                                            </RowIndicatorColumn>
                                                            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                                                                <HeaderStyle Width="20px" />
                                                            </ExpandCollapseColumn>
                                                            <Columns>
                                                                <telerik:GridBoundColumn DataField="FileName" FilterControlAltText="Filter FileName column"
                                                                    HeaderText="File Name" SortExpression="FileName" UniqueName="FileName" FilterControlWidth="80%">
                                                                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                                    <ItemStyle HorizontalAlign="Left" Font-Size="11px" Font-Names="Arial" VerticalAlign="Middle" />
                                                                </telerik:GridBoundColumn>
                                                                <telerik:GridTemplateColumn HeaderText="Action" AllowFiltering="false">
                                                                    <ItemTemplate>
                                                                        <asp:ImageButton ID="DeleteImageButton" runat="server" ToolTip="Delete" CommandName="Del"
                                                                            ImageUrl="~/App_Themes/ELPISCMS/images/delete.png" OnClientClick="if (!confirm('Are you sure, you want to delete this record?')) {return false;}"
                                                                            CommandArgument='<%# Eval("FAQ_Uploads_ID") +":"+ Eval("FAQ_Uploads_ID") %>' />
                                                                    </ItemTemplate>
                                                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
                                                                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
                                                                </telerik:GridTemplateColumn>
                                                            </Columns>
                                                            <EditFormSettings>
                                                                <EditColumn FilterControlAltText="Filter EditCommandColumn column" />
                                                            </EditFormSettings>
                                                        </MasterTableView>
                                                        <FilterMenu EnableImageSprites="False" />
                                                        <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />
                                                    </telerik:RadGrid>
                                                    <asp:SqlDataSource ID="FilesSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:elpis_cmsConnectionString %>"
                                                        SelectCommand="Usp_FAQ_Uploads_Select" SelectCommandType="StoredProcedure">
                                                        <SelectParameters>
                                                            <asp:ControlParameter ConvertEmptyStringToNull="true" ControlID="FAQIDHiddenField"
                                                                DbType="Int32" Name="FAQ_ID" PropertyName="Value" />
                                                        </SelectParameters>
                                                    </asp:SqlDataSource>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td18">
                                                    Status :
                                                </td>
                                                <td class="td82">
                                                    <asp:RadioButton ID="ActiveRadioButton" runat="server" CssClass="radiobutton" Checked="true"
                                                        GroupName="ActiveInactive" />Active
                                                    <asp:RadioButton ID="InactiveRadioButton" runat="server" CssClass="radiobutton" GroupName="ActiveInactive" />Inactive
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                      
                                                </td>
                                                <td class="td82">
                                                    <telerik:RadButton ID="SaveRadButton" runat="server" Text='<%# (Container is TreeListEditFormInsertItem) ? "Save" : "Update" %>'
                                                        CausesValidation="true" CommandName='<%# (Container is TreeListEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                                        ValidationGroup="FAQValidationGroup" Width="80px">
                                                        <Icon PrimaryIconUrl="~/App_Themes/ELPISCMS/images/save2.png" PrimaryIconLeft="5"
                                                            PrimaryIconTop="3" />
                                                    </telerik:RadButton>
                                                    <telerik:RadButton ID="CancelRadButton" runat="server" Text="Cancel" CommandName="Cancel"
                                                        CausesValidation="false" Width="80px">
                                                        <Icon PrimaryIconUrl="~/App_Themes/ELPISCMS/images/cancel2.png" PrimaryIconLeft="5"
                                                            PrimaryIconTop="3" />
                                                    </telerik:RadButton>
                                                </td>
                                            </tr>
                                        </table>
                                    </asp:Panel>
                                </FormTemplate>
                            </EditFormSettings>
                            <ClientSettings AllowItemsDragDrop="true">
                                <Selecting AllowItemSelection="True" />
                            </ClientSettings>
                        </telerik:RadTreeList>
                        <asp:SqlDataSource ID="FAQSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:elpis_cmsConnectionString %>"
                            SelectCommand="Usp_FAQ_Select" SelectCommandType="StoredProcedure"></asp:SqlDataSource>

    It would be great if you guys please help me.

    Thanks

    Ajay

     

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2012 Link to this post

    Hi Ajay,

    Here is the sample code that I tried to access RadUpload inside formtemplate.
    C#:
    protected void RadTreeList1_ItemCreated(object sender, Telerik.Web.UI.TreeListItemCreatedEventArgs e)
    {
      if (e.Item is TreeListEditFormItem)
      {
        TreeListEditFormItem item = (TreeListEditFormItem)e.Item;
        RadUpload upload = (RadUpload)item.FindControl("UploadDocumentRadUpload");
        RadTreeList1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['upload'] = '" + upload.ClientID + "';</script>"));
       }
    }
    JS:
    function IsFilesSelected(source,args)
    {
     var upload = $find(window['upload']);
    }

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ajay
    Ajay avatar
    66 posts
    Member since:
    May 2009

    Posted 25 Jun 2012 Link to this post

    Hi Princy,

    Thanks a lot for your quick reply .

    I have been able to find the "RadUpload" using :-
     
    function ValidateExtensions(source, args) {
                    args.IsValid = false;
                    var upload = $find(source.parentNode.getElementsByTagName('div')[0].id);
                    var inputs = upload.getFileInputs();
                    for (var i = 0; i < inputs.length; i++) {
                        //check for empty string or invalid extension
                        if (upload.isExtensionValid(inputs[i].value)) {
                            args.IsValid = true;
                            break;
                        }
                    }
                }
     Thanks


Back to Top