Datagrid drill down

[svenbaus]

Hello,

I would like to use Datagrid for drill down on data, because of filtering, easy use and almost no coding. But I'm currently having issues with a data collection like this:

Toplevel:

- Changeset
           - List<WorkItem>
                          - List<WorkItemChild>

Is it possible to bind a sublist to a DataGridColumn?

[David-Moreira]

Hello,
Can you provide a more concrete example?

If I understand correctly you want to handle lists within lists inside your complex object with DataGrid.
You should override the DisplayTemplate / EditTemplate / FilterTemplate as needed and create the components that handle these.

Pseudo-code

<Column>
    <Select /> => Handle List1 (context.List1)
    <Select /> => Handle List2 (selectedValueFromFirstSelect.List2)
</Column>

[svenbaus]

Overriding Display Template seems to be a good idea, I will research in this direction :). Some more code details:

Razor page:

<DataGrid TItem="Changeset" Data="changesets" Filterable Responsive PageSize="20" ShowPager Resizable FixedHeader>
    <DataGridColumn Field="@nameof(Changeset.Id)" Caption="#" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.CreatedDateTime)" Caption="CreatedDateTime" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.Author)" Caption="Author" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.Comment)" Caption="Comment" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.Url)" Caption="Url" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.WorkItems)" Caption="WorkItems" Readonly/>
</DataGrid>

Code:

public class Changeset
    {
        private readonly List<WorkItem> _workItems = new List<WorkItem>();
        private readonly List<WorkItemChild> _workItemChildren = new List<WorkItemChild>();
        public Changeset(int id, string url, string author, string comment, DateTime createdDateTime)
        {
            Id = id;
            Url = url;
            Author = author;
            Comment = comment;
            CreatedDateTime = createdDateTime;
        }

        public int Id { get; }
        public string Url { get; }
        public string Author { get; }
        public string Comment { get; }
        public DateTime CreatedDateTime { get; }
        public IReadOnlyCollection<WorkItem> WorkItems { get { return _workItems.AsReadOnly(); } }
        public IReadOnlyCollection<WorkItemChild> WorkItemChildren { get { return _workItemChildren.AsReadOnly(); } }
        public void AddWorkItem(WorkItem workItem)
        {
            _workItems.Add(workItem);
            workItem.Changesets.Add(this);
        }
        public void AddWorkItemChild(WorkItemChild workItemChild)
        {
            _workItemChildren.Add(workItemChild);
            workItemChild.Changesets.Add(this);
        }
    }

public class WorkItem : IWorkItem
    {
        public WorkItem(int id, string? url, string? title, string? state, string? assignedTo, string? workItemType)
        {
            Id = id;
            Url = url;
            Title = title;
            State = state;
            AssignedTo = assignedTo;
            WorkItemType = workItemType;
        }

        public int Id { get; }
        public string? Url { get; }
        public string? Title { get; }
        public string? State { get; }
        public string? AssignedTo { get; }
        public string? WorkItemType { get; }
        public List<Changeset> Changesets { get; } = new List<Changeset>();
        public List<WorkItemChild> Children { get; } = new List<WorkItemChild>();
    }

public class WorkItemChildIdEqualityComparer : IEqualityComparer<WorkItemChild>
    {
        public bool Equals(WorkItemChild x, WorkItemChild y)
        {
            return x.Id == y.Id;
        }

        public int GetHashCode(WorkItemChild obj)
        {
            return obj.Id.GetHashCode();
        }
    }

    public class WorkItemChild : IWorkItem
    {
        public WorkItemChild(int id, string? url, string? title, string? state, string? assignedTo, string? workItemType)
        {
            Id = id;
            Url = url;
            Title = title;
            State = state;
            AssignedTo = assignedTo;
            WorkItemType = workItemType;
        }

        public int Id { get; }
        public string? Url { get; }
        public string? Title { get; }
        public string? State { get; }
        public string? AssignedTo { get; }
        public string? WorkItemType { get; }
        public List<Changeset> Changesets { get; } = new List<Changeset>();
    }

[svenbaus]

So I played around a little and got this working:

<DataGrid TItem="Changeset" Data="changesets" Filterable Responsive PageSize="20" ShowPager Resizable FixedHeader>
    <DataGridColumn Field="@nameof(Changeset.Id)" Caption="#" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.CreatedDateTime)" Caption="CreatedDateTime" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.Author)" Caption="Author" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.Comment)" Caption="Comment" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.Url)" Caption="Url" Readonly/>
    <DataGridColumn Field="@nameof(Changeset.WorkItems)" Caption="WorkItems" Readonly>
        <DisplayTemplate>
            @{
                var workitems = context?.WorkItems;
                if (workitems != null)
                {
                    @(String.Join("<br />", workitems.Select(x => x.Id)));
                }
            }
        </DisplayTemplate>
    </DataGridColumn>

</DataGrid>

But I would like to add more fields like WorkItem.Title, etc. and have them seperate as filterable field (its basically a live report). How can I achieve this?

[David-Moreira]

I think you can remove the field parameter as it is doing nothing on that column I believe.

For the other fields just do the same as you did there, more columns which display the different fields.

If the report is filterable then you might also need to override filter template and handle accordingly.

[svenbaus]

Well I found my logic issue. I think the best idea is, to have 3 seperate DataGrids, which react on selection of each other. This way I can filter/sort/etc. each part seperatly but also make shure that the displayed data correspond correctly. Thanks for your support anyway :)