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

Disable browser autocomplete suggestions for Treeview node when editing

6 Answers 53 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Praveen
Top achievements
Rank 1
Praveen asked on 08 Mar 2017, 01:17 PM
Is there a way or property to sisable browser autocomplete suggestions for Treeview node when editing?

6 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 13 Mar 2017, 09:03 AM

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.
0
Praveen
Top achievements
Rank 1
answered on 14 Mar 2017, 09:01 AM

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?

0
Marin Bratanov
Telerik team
answered on 14 Mar 2017, 09:49 AM

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.
0
Praveen
Top achievements
Rank 1
answered on 15 Mar 2017, 05:57 AM

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?

0
Accepted
Marin Bratanov
Telerik team
answered on 16 Mar 2017, 05:10 PM

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.
0
Praveen
Top achievements
Rank 1
answered on 17 Mar 2017, 04:21 AM

Hi Marin,

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

Thanks a lot for your answer.

Tags
TreeView
Asked by
Praveen
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Praveen
Top achievements
Rank 1
Share this question
or