How to get Attributes on client with ExplorerMode=FileTree?

[Steve White]

If I use the default ExplorerMode type the grid is showing with my Attributes. I am able to get the Attributes on the client in OnClientItemSelected like this:

var dataItem = oExplorer.get_grid().get_masterTableView().get_selectedItems()[0].get_dataItem();
var status = dataItem.Attributes["Status"];

When using ExplorerMode of FileTree, how do I get the Attribute?

            if (selectedItem.get_type() == Telerik.Web.UI.FileExplorerItemType.File) {
                alert('How do I get the Attributes here?');
            }

thanks,

Steve

[Steve White]

It looks like the Attributes aren't getting added to the tree nodes at all.

I'm using a CustomProvider and add in the Attributes when I add the FileItem. When I use the Default Mode I can get the Attributes in the Grid, but when I use FileTree Mode the Attributes aren't there.

How can I resolve this?

[Steve White]

I debugged this inside the ExplorerPopulated event:

    Private Sub DocumentExplorer_ExplorerPopulated(ByVal sender As Object, ByVal e As RadFileExplorerPopulatedEventArgs)
        If e.ControlName = "tree" Then
            Dim items As List(Of Widgets.FileBrowserItem) = e.List
            Dim i As Integer = 0
            While i < items.Count
                If TypeOf items(i) Is Widgets.FileItem Then
                    Dim strStatus As String = ""
                    strStatus = items(i).Attributes(0).ToString
                    'items(i).Name = items(i).Name & ": " & items(i).Attributes("Status").ToString
                End If
                i += 1
            End While
        End If
    End Sub

When items(i) is a FileItem I can see that the Attributes are there, but when I try to get them on the client they are not there.
Any clues on how to get the Attributes on the client?

[Fiko]

Hello Steve,

The Grid contains a flat structure of items but when you iterate through the TreeView's items, you need to take into account that the TreeView has a hierarchical structure. For your convenience I have attached a demo project that shows how to iterate through the FileExplorer's items when the control's EplorerMode="FileTree" is set. Could you please check it and let me know whether it fits your requirements?

I hope this helps.

Sincerely yours,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steve White]

Fiko -

Thanks but it doesn't cover what I'm looking to do.

I don't want to iterate through the TreeView because I'm responding to the ItemSelected event on the client. I can return the Text of the TreeView node when I click on it, I just can't get the Attribute from the node. So I know which node I want and I have access to it.

According to the docs I should be able to get the node Attributes like this:

var attributes = node.get_attributes();

I've tried this with this code:

var status = oExplorer.get_tree().get_selectedNodes()[0].get_attributes().getAttribute("Status");

This is returning 'undefined'.

How do I get to the node Attributes on the client in the FileExplorer TreeView?

thanks

[Fiko]

Hi Steve,

By design the custom attributes are preserved only on the Grid. The custom attribute support was added in order to allow custom columns in the Grid, and this feature does not work with the RadTreeView control embedded inside the RadFileExplorer.

Kind regards,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steve White]

Fiko -

Thanks for clearing this up. This is kind of a show-stopper for me. What would you suggest I do in this case?

I've tried the following to see if I can write Attributes serverside:

    Private Sub DocumentExplorer_ExplorerPopulated(ByVal sender As Object, ByVal e As RadFileExplorerPopulatedEventArgs)
        If e.ControlName = "tree" Then
            Dim items As List(Of Widgets.FileBrowserItem) = e.List
            Dim i As Integer = 0
            While i < items.Count
                If TypeOf items(i) Is Widgets.FileItem Then
                    Dim strStatus As String = ""
                    strStatus = items(i).Attributes(0).ToString
                    If strStatus = "" Then
                        items(i).Name = items(i).Name & "&nbsp;<span>free</span>"
                    End If
                    'itemName = items(i).Name & ": " & items(i).Attributes("Status").ToString
                    'items(i).Name = itemName
                End If
                i += 1
            End While
        End If
    End Sub

While this does render the 'free' text next to nodes where the Attribute of 'Status' is an empty string, it affects the icon of the file. In other words for all files listed in the tree, the icon doesn't now reflect the type of extension.

I really want to avoid hitting the server again on node click just to get an Attribute, it makes more sense to allow the Attributes on the nodes on the client in ExplorerMode=FileTree.

[Fiko]

Hi Steve,

In your case you need to add a  CSS class to the newly added span tag. For example, if you name the class  hiddenSpan, then your code should look like this:

items(i).Name = items(i).Name & "<span class='hiddenSpan'>FileAttribute</span>"

Implement the hiddenSpan class as shown bellow:

<style type="text/css">
    .hiddenSpan
    {
        display: none;
    }
</style>

After applying these steps, a hidden span will be generated as addition to the name of the items in the TreeView. Then you can implement your logic in order to get the value inside the span tag. For example, you can get the value of the hidden span tag by using this approach:

function OnClientItemSelected(oExplorer, args)

{

    var itemName = args.get_item().get_name();

    alert(getAttribute(itemName));

}

function getAttribute(nameWithAttribute)

{

    var spanElemeStart = "<span class='hiddenSpan'>";


    var matchIndex = nameWithAttribute.search(spanElemeStart);

    var itemHiddenValue = nameWithAttribute.substring(matchIndex + spanElemeStart.length).replace("</span>", "");

 

    return itemHiddenValue;

}

I hope this helps.

Greetings,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steve White]

Fiko -

I really appreciate you trying to resolve this.

I've done this and although I can now get the Attribute on the client, the file icon is corrupt as I said in my previous post. I think this is because the following HTML is rendered:

<li class="rtLI"><div class="rtMid">
                                        <span class="rtSp"></span><div class="rtIn">
                                            <div class="rtTemplate">
                                                <span class="rfeFileExtension  css&lt;span class='hiddenspanstatus'>&lt;/span>">&nbsp;</span><span>BernsForms.css<span class='hiddenSpanStatus'></span></span>
                                            </div>

                                        </div>
                                    </div></li><li class="rtLI"><div class="rtMid">
                                        <span class="rtSp"></span><div class="rtIn">
                                            <div class="rtTemplate">
                                                <span class="rfeFileExtension  txt&lt;span class='hiddenspanstatus'>locked&lt;/span>">&nbsp;</span><span>BFWS-Subscribers.txt<span class='hiddenSpanStatus'>Locked</span></span>
                                            </div>
                                        </div>
                                    </div></li>

Notice how the new string has been injected into the span class="rfeFileExtension section?

I've named my hidden class 'hiddenSpanStatus' because I'm trying to get > 1 Attributes listed.

Finally, supposing it does eventually work with the correct file icon, is there a way of setting the node text color to red if my hidden span value is 'Locked'? I need to show the user that this file is locked without them having to click on the node to find out.

many thanks,
Steve

[Fiko]

Hi Steve,

If you change the code as shown bellow then the icon will be show as expected:

For Each obj In e.List
    obj.Name = "<span class='hiddenSpan'>FileAttribute</span>" + obj.Name
Next obj

Please note that this is a customization of that behavior of the RadFileExplorer control that is beyond of our support and you need to handle the possible unexpected behavior yourself.

About the changing the span's color: You can add an additional CSS class to the page for the locked items. Then you can assign the class name to the span in the codebehind file depending on the item's state - locked or not.

I hope this helps.

Kind regards,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steve White]

Fiko -

Thanks for staying with me on this. I've managed to get get it all working now.

Just for reference, anything that is placed afterobj.Name doesn't render the file icon, because I think it's parsed internally to get the extension. Therefore I injected a locked icon in front of the Name which now appears on the UI for a 'Locked' file according to my business rules.