Faceted Search UI

[horacioj]

Hi,

Using Syncfusion controls, Is there any way to build a 'faceted search' UI similar to e.g. https://www.amazon.com/s?k=organ?

I mean something like this:

Thanks!

[Joshna Lingala Uthama Reddy Lingala]

Hi Horacioj,

Greetings from Syncfusion.

You can achieve the UI using Syncfusion ListView Control. For more details, please refer the below links

Documentation: https://blazor.syncfusion.com/documentation/listview/getting-started

Demos: https://blazor.syncfusion.com/demos/listview/default-functionalities?theme=fluent

Kindly try with the above information and get back to us if you have any queries.

Regards,

Joshna L

[horacioj]

Thank you for getting back to me so quickly.

I think it looks more like a tree (with some tweaks, e.g. to accomplish the "See all XX items") than a ListView. I don't see how to make a ListView look and behave like this.

[Joshna Lingala Uthama Reddy Lingala]

Hi Horacioj,

Thanks for the update.

We have checked the requirement and suggest using Syncfusion TreeView control to achieve your requirement. For more details, please refer the below link

https://blazor.syncfusion.com/documentation/treeview/getting-started

Please get back to us if you have any queries.

Regards,

Joshna L

[horacioj]

Thank you. I also have already reviewed the TreeView, and I cannot figure out (same as with the ListView) how to  limit the display to XX items and implement the "See all XX items" to expand/see all the items.

[Sivakumar ShunmugaSundaram]

Hi Horacioj,

As per the shared details, we have understood that you want to limit the display item and implement the "See all XX items" to see all the items. We would like to let you know that, currently, we do not have direct support to achieve your exact requirement with our Syncfusion TreeView component.

But we have achieved your exact requirement in a workaround way. To achieve your requirement, we have created a span element to show the see all items tag in the UI and, based on that element click, we have added a data source in TreeView. We have attached the prepared sample for your reference.

Refer to the below code snippet.

[Index.razor],

 

<SfTreeView TValue="MailItem">

    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder1" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>

</SfTreeView>

<span @onclick="GetAllData">@content</span>

 

@code{

    public string content = "See All";

    public bool isFirstClick = false;

...

protected override void OnInitialized()

    {

        base.OnInitialized();

        ...

        MyFolder1=MyFolder;

    }

    public void GetAllData()

    {

        List<MailItem> MyFolder2 = new List<MailItem>();

        if (!isFirstClick)

        {

            ...

 

            MyFolder1 = MyFolder2;

            isFirstClick = true;

            content = "See less";

        }

        else

        {

            MyFolder1 = MyFolder;

            content = "See All";

            isFirstClick = false;

        }

    }

}

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

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Sivakumar S

[horacioj]

I was trying to make an implementation using a DataManager and a Query, I couldn't make it work. I always get the first 5 items despite chaning the query to return all the items.

I trying adding "StateHasChanged();" and/or "TreeViewRef.Refresh();", which changes anything. 

What am I doing wrong? 

This is the content of [Index.razor], updated from the provided "BlazorApp11352758965.zip":

@page "/"

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Data

<SfTreeView TValue="MailItem" @ref="TreeViewRef">

    <TreeViewFieldsSettings TValue="MailItem" Id="Id"

        Text="FolderName" ParentID="ParentId"

        HasChildren="HasSubFolders" Expanded="Expanded"

        Query="@DataQuery">

        <SfDataManager @ref="DataManagerRef"

                       AdaptorInstance="@typeof(CustomAdaptor)"

                       Adaptor="Adaptors.CustomAdaptor">

        </SfDataManager>

    </TreeViewFieldsSettings>

    @*DataSource="@MyItems"*@

</SfTreeView>

<span @onclick="ExpandCollapse">@ExpandCollapseText</span>

@code{

    public class MailItem

    {

        public string? Id { get; set; }

        public string? ParentId { get; set; }

        public string? FolderName { get; set; }

        public bool Expanded { get; set; }

        public bool HasSubFolders { get; set; }

    }

    public SfDataManager DataManagerRef { get; set; }

    public SfTreeView<MailItem> TreeViewRef { get; set; }

    public Query DataQuery;

    private static List<MailItem> MyItems = new List<MailItem>();

    private string? ExpandCollapseText;

    private bool isExpanded;

    protected override async Task OnInitializedAsync()

    {

        base.OnInitialized();

        MyItems = GetItemsFromSomeWhere(); // e.g. get all the items from a web service or whatever

        isExpanded = false;

        //DataQuery = new Query().Take(3);

        await ExpandCollapse();

    }

    public async Task ExpandCollapse()

    {

        if (isExpanded)

        {

            DataQuery = new Query().Take(MyItems?.Count ?? 0);

            ExpandCollapseText = "Show less";

        }

        else

        {

            DataQuery = new Query().Take(5);

            ExpandCollapseText = $"See all {MyItems?.Count} items";

        }

        isExpanded = !isExpanded;

        if (DataManagerRef != null)

            await DataManagerRef?.ExecuteQueryAsync<MailItem>(DataQuery);

        //if (TreeViewRef != null)

        // TreeViewRef.Refresh();

        //StateHasChanged();

    }

    public class CustomAdaptor : DataAdaptor

    {

        // Performs data Read operation

        public override object Read(DataManagerRequest dm, string key = null)

        {

            IEnumerable<MailItem> DataSource = MyItems; // ?? new List<MailItem>();

            int count = DataSource.Cast<MailItem>().Count();

            DataSource = DataOperations.Execute<MailItem>(DataSource, dm);

            if (dm.RequiresCounts)

                return new DataResult() { Result = DataSource, Count = count };

            else

                return (object)DataSource;

        }

    }

    private List<MailItem> GetItemsFromSomeWhere()

    {

        var items = new List<MailItem>();

        items.Add(new MailItem

            {

                Id = "1",

                FolderName = "Inbox",

            });

        items.Add(new MailItem

            {

                Id = "2",

                FolderName = "Categories",

            });

        items.Add(new MailItem

            {

                Id = "3",

                FolderName = "Primary"

            });

        items.Add(new MailItem

            {

                Id = "4",

                FolderName = "Social"

            });

        items.Add(new MailItem

            {

                Id = "5",

                FolderName = "Promotions"

            });

        items.Add(new MailItem

            {

                Id = "6",

                FolderName = "Additional details_01",

            });

        items.Add(new MailItem

            {

                Id = "7",

                FolderName = "Additonal details_02",

            });

        items.Add(new MailItem

            {

                Id = "8",

                FolderName = "Additional details_03"

            });

        items.Add(new MailItem

            {

                Id = "9",

                FolderName = "Additional details_04"

            });

        items.Add(new MailItem

            {

                Id = "10",

                FolderName = "Additional details_05"

            });

        items.Add(new MailItem

            {

                Id = "11",

                FolderName = "Additional details_06"

            });

        return items;

    }

}

[Sivakumar ShunmugaSundaram]

Hi horacioj,

We have already considered the reported issue in the TreeView component and resolved it in our patch release (V20.3.48). To access this fix, we suggest you update the package to 20.3.48 or the latest version.

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

Feedback: https://www.syncfusion.com/feedback/37633/dynamically-binding-custom-adaptor-data-using-query-property-will-not-update-the

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/20.3.48?type=all#treeview

Please let us know if you need any further assistance.

Regards,

Sivakumar S