What types are allowed in DataSource?

[Simon]

I'm using DynamicData from ReactiveUI and transformed a list into a tree and output a `ReadOnlyObservableCollection` which is used as `DataSource`. The `EjsTreeView` mapping is applied but doesn't show the text nor the arrows but renders the first root children (totally empty but `<li>`'s are visible). When I try to use `NodeTemplate` I get nulls on `@context`.

How complex can a type be in the `DataSource`?

FileTree.razor

```

<EjsTreeView TValue="FileInfoViewModel">
    <TreeViewFieldsSettings TValue="FileInfoViewModel"
                            DataSource="@FileInfoViewModels"
                            Id="Key"
                            Text="Name"
                            Child="@("Children")"
                            Selected="Selected"
                            Expanded="Expanded">
    </TreeViewFieldsSettings>
</EjsTreeView>
@code
{
    public ReadOnlyObservableCollection<FileInfoViewModel> FileInfoViewModels;

    private readonly CompositeDisposable cleanup = new CompositeDisposable();

    protected override void OnInitialized()
    {
        base.OnInitialized();

        var tree = FileSystemService.FileInfoTree;
        tree.Bind(out FileInfoViewModels)
            .DisposeMany()
            .Subscribe()
            .DisposeWith(cleanup);
    }

    public void Dispose()
    {
        cleanup.Dispose();
    }
}

```

FileInfoViewModel.cs

```

public class FileInfoViewModel : ReactiveObject, IDisposable
{
    private readonly CompositeDisposable cleanup = new CompositeDisposable();

    public string Key { get; }
    public string Name => FileInfo.Name;
    public Optional<FileInfoViewModel> Parent { get; }
    public VirtualFileInfo FileInfo { get; }

    [Reactive]
    public bool Expanded { get; set; }
    [Reactive]
    public bool Selected { get; set; }

    private ReadOnlyObservableCollection<FileInfoViewModel> children;
    public ReadOnlyObservableCollection<FileInfoViewModel> Children => children;

    internal FileInfoViewModel(Node<VirtualFileInfo, string> node, FileInfoViewModel parent = null)
    {
        Key = node.Key;
        Parent = parent;
        FileInfo = node.Item;

        var childrenLoader = new Lazy<IDisposable>(() => 
            node.Children
                .Connect()
                .Transform(e => new FileInfoViewModel(e, this))
                .Bind(out children)
                .DisposeMany()
                .Subscribe());

        var shouldExpand = node.IsRoot
            ? Observable.Return(true)
            : Parent.Value.WhenAnyValue(x => x.Expanded);
        
        shouldExpand
            .Where(isExpanded => isExpanded)
            .Take(1)
            .Subscribe(_ => childrenLoader.Value.DisposeWith(cleanup))
            .DisposeWith(cleanup);
    }

    public void Dispose()
    {
        cleanup.Dispose();
    }
}

```

FileSystemService (partial)

```

public IObservableCache<VirtualFileInfo, string> FileInfos => fileInfoSourceCache.AsObservableCache();

public IObservable<IChangeSet<FileInfoViewModel, string>> FileInfoTree =>
    FileInfos
        .Connect()
        .TransformToTree(fileInfo => Path.GetDirectoryName(fileInfo.VirtualPath),
            Observable.Return<Func<Node<VirtualFileInfo, string>, bool>>(node => node.IsRoot))
        .Transform(node => new FileInfoViewModel(node));

```

If you are asking why I don't use the `FileManager` because I don't want the `FileManager` communicate with Ajax and it cannot accept local datas.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Simon, 

 

Greetings from Syncfusion support. 

 

We have checked your attached code snippet. We suspect that the reported issue might have occurred due to the TreeView fields are not properly mapped in your application. Can you please ensure the data source contains the proper TreeView fields (Key, Name, Children, Selected, Expanded)?  

 

We have prepared a simple TreeView sample using observable collection. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Treeview1038284251.zip  

 

If the issue still persists in your end. Then, share additional details regarding your requirement?  

 

 

1.                Code snippet for returning data source structure. 

 

2.                If possible, reproduce the issue in attached sample. 

This information would help us to understand your requirement and to provide the prompt solution. 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Simon]

Figured out that all data applied to Items="@..." are de-/serialized as json and passing between javascript and blazor. That's why my models was showing as nulls because it was not a valid model for json serializers.

Please consider it on the documentations that all types are passing to Ejs{component} has to be like DTO types that can be de-/serialized as json.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Simon, 

  

We are validating your query with high priority. We will update the further validation details in one business day on 7th February 2020. 

  

We appreciate your patience until, then. 

  

Regards, 

Shameer Ali Baig S.