Disable browser autocomplete suggestions for Treeview node when editing

7 posts, 1 answers
  1. Praveen
    Praveen avatar
    6 posts
    Member since:
    Jul 2015

    Posted 08 Mar Link to this post

    Is there a way or property to sisable browser autocomplete suggestions for Treeview node when editing?
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3899 posts

    Posted 13 Mar Link to this post

    Hi Praveen,

    You can use the OnClientNodeEditStart event to modify the <input> so it does not have autocomplete: http://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag.

    <script>
        function OnClientNodeEditStart(sender, args) {
            args.get_node().get_inputElement().setAttribute("autocomplete", "off");
        }
    </script>
    <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" TabIndex="1" AccessKey="T"
        AllowNodeEditing="True" OnClientNodeEditStart="OnClientNodeEditStart">


    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Praveen
    Praveen avatar
    6 posts
    Member since:
    Jul 2015

    Posted 14 Mar in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks for your reply.

    I tried doing the above but with no success.

    The browser still gives suggestions on editing the tree node.

    Actually why I want this is because when using MS Edge, the browser suggestion dropdown gets stuck and does not go away even after i have completed editing the node.

    Any suggestions?

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3899 posts

    Posted 14 Mar Link to this post

    Hi Praveen,

    Once you can disable the browser autocomplete for any generic input, you can use the code above to apply the same attributes to the one rendered by the treeview.

    Note that you may have to set the autocomplete attribute to the form.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Praveen
    Praveen avatar
    6 posts
    Member since:
    Jul 2015

    Posted 15 Mar in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks again for your response, I am using the Treeview in an ascx file

    I tried using a simple <input> element within my control file and set its autocomplete attribute to 'off' and it worked.

    But the same is not working for the Treeview node.

    Following is the snippet of my ascx file:

    <%@ Control Language="c#" AutoEventWireup="True" CodeBehind="abc.ascx.cs"
      %>
    <script type="text/javascript" src="client/JavaScript/ObjFileList.js"></script>
    <style type="text/css">
        .rtImg
        {
            height: 16px;
            width: 16px;
        }
        .rmLeftImage
        {
            height: 16px;
            width: 16px;
        }
        .AttachmentToolTipHeader
        {
            text-decoration: underline;
            font-weight: bold;
            display: block;
        }
        .AttachmentToolTipText
        {
            display: block;
            padding-bottom: 10px;
        }
        .TreeRoot span.rtIn <%--Hide text area of root node--%>
        {
            display:none;
        }
    }
    </style>
    <asp:Label ID="plbSharePointWarningMsg" runat="server" Visible="false" ForeColor="Black"></asp:Label>
    <input type="hidden" runat="server" id="hdnBannerBookmarkNameLabel" clientidmode="Static"/>
    <input type="hidden" runat="server" id="hdnBannerBookmarkInvalidNameLabel" clientidmode="Static" />
    <input type="hidden" runat="server" id="hdnCopyId" clientidmode="Static" />
    <input type="hidden" runat="server" id="hdnFileId" clientidmode="Static" />
    <input type="hidden" runat="server" id="hdnFoldercategory" clientidmode="Static" />
    <input type="hidden" runat="server" id="hdnBookmarkLink" clientidmode="Static"/>
    <input type="text" autocomplete="off" />  -- it worked for this element
    <telerik:RadToolTipManager runat="server" ID="radToolTipManager1" Position="BottomRight"
        RelativeTo="Element" Width="300px" Height="100px" ShowDelay="850"
        ShowCallout="false" AutoCloseDelay="0" OnClientBeforeShow="ToolTipClientBeforeShow"
        OnClientResponseError="ToolTipResponseError" OnClientResponseEnd="ToolTipResponseEnd">
        <WebServiceSettings Path="~/WebServices/AttachmentToolTipService.asmx" Method="GetAttachmentToolTip" />
    </telerik:RadToolTipManager>
    <telerik:RadAjaxPanel ID="radAjaxPanel" runat="server" EnablePageHeadUpdate="false"
        HorizontalAlign="NotSet" OnAjaxRequest="RadAjaxPanel_AjaxRequest">
        <telerik:RadTreeView ID="attachmentTreeView" runat="server" EnableDragAndDrop="true" OnClientNodeEditStart ="OnClientNodeEditStart"
            AllowNodeEditing="true" AppendDataBoundItems="true"
            DataFieldID="ObjFileId" DataFieldParentID="ParentObjFileId" DataTextField="ObjFileName"
            DataValueField="ObjFileId" OnNodeDataBound="AttachmentTreeView_NodeDataBound"
            OnNodeEdit="AttachmentTreeView_NodeEdit" OnNodeDrop="AttachmentTreeView_NodeDrop"
            OnContextMenuItemClick="AttachmentTreeView_ContextMenuItemClick" OnClientMouseOver="TreeClientMouseOver"
            OnClientMouseOut="TreeClientMouseOut" OnClientNodeDragging="TreeClientNodeDragging"
            OnClientNodeDropping="TreeClientNodeDropping" OnClientNodeDropped="TreeClientNodeDropped"
            OnClientNodeClicking="TreeClientNodeClicking" OnClientNodeEditing="TreeClientNodeEditing"
            OnClientContextMenuShowing="TreeClientContextMenuShowing" OnClientContextMenuItemClicking="TreeClientContextMenuClicking">
            <ContextMenus>
                <telerik:RadTreeViewContextMenu ID="fileContextMenu" runat="server">
                    <Items>
                        <telerik:RadMenuItem Value="View Properties" ID="viewPropertiesMenuItem" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/edititem.gif" Value="EditInBrowser"
                            ID="editInBrowserMenuItem" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/delete2.gif" Value="Delete" ID="deleteFileMenuItem" />
                        <telerik:RadMenuItem IsSeparator="true" Value="fileContextMenuSeparator" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/checkout.gif" Value="Checkout" ID="checkoutMenuItem" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/checkout.gif" Value="Checkin" ID="checkinMenuItem" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/upload.gif" Value="Upload New Version"
                            ID="uploadVersionMenuItem" />
                        <telerik:RadMenuItem Value="Rename" ImageUrl="~/client/Images/rename.png" ID="renameMenuItem" PostBack="false" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/versions.gif" Value="Version History" ID="versionMenuItem" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/Copy.gif" Value="Copy" ID="copyBookmark" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/4x_file_copy.png" Value="CopyFile" ID="copyFile" />
                    </Items>
                </telerik:RadTreeViewContextMenu>
                <telerik:RadTreeViewContextMenu ID="folderContextMenu" runat="server">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/client/Images/edititem.gif" Value="Edit" PostBack="false"
                            ID="editMenuItem" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/delete2.gif" Value="DeleteFolder"
                            ID="deleteFolderMenuItem" />
                        <telerik:RadMenuItem IsSeparator="true" Value="folderContextMenuSeparator" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/4x_add_files.png" Value="Upload Multiple Files" ID="uploadMultipleFileMenuItem" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/4x_add_url.png" Value="Add URL" ID="uploadFileMenuItem" />                    
                        <telerik:RadMenuItem ImageUrl="~/client/Images/fav_Folder.gif" Value="Add Folder" ID="addFolderMenuItem" />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/4x_folder_copy.png" Value="CopyFolder" ID="CopyFolder"  />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/4x_folder_paste.png" Value="Paste" ID="Pastetxt"  />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/4x_paste.png" Value="Paste Url" ID="Paste"  />
                        <telerik:RadMenuItem ImageUrl="~/client/Images/fav_Sort.gif" Value="Sort By" ID="sortByMenuItem">
                            <Items>
                                <telerik:RadMenuItem ImageUrl="~/client/Images/fav_SortName.gif" Value="Sort By Name"
                                    ID="sortByNameMenuItem" />
                                <telerik:RadMenuItem ImageUrl="~/client/Images/fav_SortDate.gif" Value="Sort By Date"
                                    ID="sortByDateMenuItem" />
                            </Items>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadTreeViewContextMenu>
            </ContextMenus>
        </telerik:RadTreeView>
    </telerik:RadAjaxPanel>

    and the function in the js file:

    function OnClientNodeEditStart(sender, args) {
        args.get_node().get_inputElement().setAttribute("autocomplete", "off");
    }

     

    can you please suggest?

  6. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3899 posts

    Posted 16 Mar Link to this post

    Hi,

    Does setting the attribute with JavaScript work for you on the hardcoded input?

    Have you also tried setting the autocomplete attribute on the <form>?

    The difference is that RadTreeView creates the textbox dynamically, with JavaScript. It is then up to the browser to honor its attributes and we cannot influence that.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Praveen
    Praveen avatar
    6 posts
    Member since:
    Jul 2015

    Posted 16 Mar Link to this post

    Hi Marin,

    Setting the Autocomplete="off" to the form as well did it.

    Thanks a lot for your answer.

Back to Top