Disable browser autocomplete suggestions for Treeview node when editing

[Praveen]

Is there a way or property to sisable browser autocomplete suggestions for Treeview node when editing?

[Marin Bratanov]

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

[Praveen]

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?

[Marin Bratanov]

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

[Praveen]

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?

[Marin Bratanov]

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

[Praveen]

Hi Marin,

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

Thanks a lot for your answer.