Data Grid Multiselect Item Template Not Working

[Kenney Phan]

Hi,

I have a Data Grid that displays a 'Group' which contains a nested Data Grid as a 'DetailTemplate' to display the 'Members' of each Group.

The 'Members' column in the 'DetailTemplate' displays each user's ID as an int.

I want to implement a Filter Template that displays a user's 'First Name' instead of their ID number. I know I have to use an 'ItemTemplate', but it is not working.

I have attached a video showing what end-product I want:

I want the 'Filter Template' to display each user's 'First Name' instead of their ID number just like how I have in my 'Edit Template'.

Thank you

Attachment: MultiSelect_ItemTemplate_88e4500d.zip

[Rahul Narayanasamy]

Hi Kenney, 

Greetings from Syncfusion. 

Query: I want the 'Filter Template' to display each user's 'First Name' instead of their ID number just like how I have in my 'Edit Template'. 

We have validated your query and you want to customize the values which are displayed in the Filter dialog. You can achieve your requirement by using FilterItemTemplate. Find the below code snippets, documentation and sample for your reference. 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/filtering/#filter-item-template 

 

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true"> 

    <GridFilterSettings Type="FilterType.Excel"></GridFilterSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="ID" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as Order); 

                    <span>@Employees.Where(x => x.EmployeeID == employee.EmployeeID).FirstOrDefault().FirstName</span> 

                } 

            </Template> 

            <FilterItemTemplate> 

                @{ 

                    var emp = (context as FilterItemTemplateContext); 

                    <div>@Employees.Where(x => x.EmployeeID == (int?)Convert.ToInt32(emp.Value)).FirstOrDefault().FirstName</div> 

                } 

            </FilterItemTemplate> 

 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

Sample: 

https://www.syncfusion.com/downloads/support/forum/167408/ze/DataGridSample-1413263591 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Kenney Phan]

Hi Rahul,

Thanks for your help.

I want to display only the user names as the filter options if they are a member of that group. For example, if there are no members in a group, then there will be no filter options. And if there are only 2 members in a group (eg: Bob & Steve), then the filter options will only contain Bob & Steve.

Currently, the filter will display all users even if they are not a member of that Group. I have tried to filter out the members in my 'FilterItemTemplate' code, but it displays an empty filter option for non-members.

I have attached a video demonstration the issue and a picture of the code.

Thank you

Attachment: MultiSelect_ItemTemplate02_f96a0bd2.zip

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for the update. 

We have checked your shared information and could you please share the below details before proceeding the query. It will be helpful to validate your case further and provide a better solution.  

• Share a simple reproduceable sample if possible.
• Full Grid code snippets with details about how you are binding the data for both Grids.

Regards, 

Rahul 

 

[Cody Nguyen]

Hello, my name is Cody. I am Kenny's Coworker and I will be overlooking this thread until he returns next week. 

I have attached snippets of Code that I believe are related. From my understanding of the problem, and from the testing I have done, it appears that "FilterItemTemplate" will iterate through each possible member, and the code will output the correct <div> when the user is supposed to be in the group. However, when the <div> is not returned, the checkbox will instead render but be blank. Perhaps there is a way for FilterItemTemplate to skip members that are not in the group?

Apologies for my limited understanding of the problem, but I will do my best to see the problem through and provide the information you requested. 

Attachment: Group_Member_Filter_9a7de3fd.zip

[Kenney Phan]

Hi Rahul,

I have attached a sample project that reproduces the issue. In the attachment, there is also a video showing the empty filter items.

For example, if I wanted to display filter items for Employee IDs greater than 45, the filter will display empty filter values for Employee IDs less than 45, and non-empty filter values for IDs greater than 45.

I want it so the empty values do not appear at all.

Thank you

Attachment: EmptyFilterItems_4425742b.zip

[Rahul Narayanasamy]

Hi Cody / Kenney, 

Thanks for sharing the details. 

We are currently checking the reported case at our end and we will update the further details in two business days. Until then we appreciate your patience. 

Regards, 

Rahul 

[Rahul Narayanasamy]

Hi Cody / Kenney,  

 

We are facing some complexities while checking the reported case at our end. Currently we are checking this with high priority at our end and we will update the further detail by today shortly. Until then we appreciate your patience.  

 

Regards,  

Rahul  

[Kenney Phan]

Thank you for the update, Rahul.

[Rahul Narayanasamy]

Hi Cody / Kenney, 

Thanks for your patience and sorry for the delay in getting back to you. 

We checked your reported case and we suggest you to achieve your requirement by using below way. You want to render the check box with values which has the EmployeeID values greater than 45 in filter dialog. Here, we have achieved your requirement by making interop call. We have made an interop call in OnActionComplete event with RequestType as FilterAfterOpen and get all the checkbox items in the filter dialog and hide the checkbox which is not required to render in the Filter dialog. Find the below code snippets and sample for your reference. 

[Index.razor] 

@inject IJSRuntime Runtime 

 

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true"> 

    <GridEvents OnActionComplete="ActionCompletedHandler" TValue="Order"></GridEvents> 

    <GridFilterSettings Type="FilterType.Excel"></GridFilterSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="ID" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as Order); 

                    <span>@Employees.Where(x => x.EmployeeID == employee.EmployeeID).FirstOrDefault().FirstName</span> 

                } 

            </Template> 

            <FilterItemTemplate> 

                @{ 

                    var emp = (context as FilterItemTemplateContext); 

                    if ((int?)Convert.ToInt32(emp.Value) > 45) 

                    { 

                        <div>@Employees.Where(x => x.EmployeeID == (int?)Convert.ToInt32(emp.Value)).FirstOrDefault().FirstName</div> 

                    }  

                } 

            </FilterItemTemplate> 

 

        </GridColumn> 

. . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    public List<Order> Orders { get; set; } 

    . . . 

    public async Task ActionCompletedHandler(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.FilterAfterOpen) && args.ColumnName == "EmployeeID") 

        { 

            await Runtime.InvokeVoidAsync("hideCheckBox");   

        } 

    } 

} 

[Interop.js] 

function hideCheckBox() { 

    var chk = document.querySelectorAll(".e-ftrchk"); 

    for (var i = 0; i < chk.length; i++) { 

        if (i != 0 && i < 46) 

        { 

            chk[i].style.display = "none"; 

        } 

    } 

} 

 

[_Host.cshtml] 

<head> 

    . . . 

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />   

    <script src="~/Interop.js"></script> 

</head> 

Sample: https://www.syncfusion.com/downloads/support/forum/167408/ze/DataGridSample1715052862  

 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Kenney Phan]

Hi Rahul,

This solution works fine for integer columns, but my current problem in within' my string column. I have modified the sample project to demonstrate the problem.

In the sample project, I am displaying only filter values that contain the string "Andrew". To do this, I attached a class of "empty-val" to filter values that do not contain "Andrew". I have also modified the interop function to extract the 'great grand parent' elements of the empty filter values and applied an attribute id to hide those elements.

Initially, the filter values populate correctly. However, if I use the filter search bar, the empty filter values will pop up again.

Please note that this is just a simple demonstration for the real problem that I am facing in my own project. In my project, I am querying members of a group, so I want to hide the non-members from the filter list. I have a similar problem as the attached sample project when I use the filter search bar. So please, do not give me a solution that uses the Interop call to check if the element contains the value "Andrew" as that will not help me.

EDIT:

I would like to add on my discovery:

It seems that when I search for the last item (of the filter list without using 'FilterItemTemplate') in the Filter list for the FilterItemTemplate, it is able to do so correctly.

My assumption is that the filter items are being popped off when using the filter search bar, and therefore the correct filter results contains elements with the class "empty-val" because it was previously applied to elements above it with empty filter values. 

That is why searching for the last item will not show the problem because it is the last item of the stack and cannot be applied the "empty-val" class accidentally.

Thank you

Attachment: StringEmptyVal_e6be9eb0.zip

[Kenney Phan]

Hi,

Is there any update on this ticket?

Thank you

[Rahul Narayanasamy]

Hi Kenney, 

 

Thanks for your patience. 

 

We have validated your requirement further and considered this requirement as an usability improvement feature and logged the improvement report for the same. Thank you for taking the time to request this improvement “Need to provide support for providing custom datasource for Checkbox/Excel filter list datasource” and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the improvement feature in our upcoming Volume 3, release 2021. Until then we appreciate your patience.  

  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    

 

https://www.syncfusion.com/feedback/27653/need-to-provide-support-for-providing-custom-datasource-for-checkbox-excel-filter 

 

Regards, 

Rahul 

[Kenney Phan]

Hi Rahul,

When will this improvement feature be pushed out? I have a release for my project coming up that relies on this fix.

Thanks,

Kenney

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for the update. 

We would like to inform you that the Volume 3, 2021 release will be rolled on by the end of September, 2021. Until then we appreciate your patience. 

Regards, 

Rahul 

[Kenney Phan]

Hi Rahul,

That is a long way to go as my project deadline is proposed the end of August. Is there any way possible to accel the solution to this ticket earlier?

Thank you for your cooperation,

Kenney

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for the update. 

Based on your request, we will expedite the process for the improvement “Need to provide support for providing custom datasource for Checkbox/Excel filter list datasource”. We will include this improvement in our upcoming patch release which is expected to be rolled out on or before end of August, 2021.   

Until then we appreciate your patience. 

Regards, 

Rahul 

 

[Kenney Phan]

Hi Rahul,

I know you guys are working hard, and I appreciate the expedited accommodation. I am always trying to make Syncfusion better, so I am glad I'm able to help you with these innovative improvements.

Thank you,

Kenney

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for the update. 

We will update you once the improvement is included in our release and rolled out successfully. Until then we appreciate your patience. 

Regards, 

Rahul 

[Kenney Phan]

Hi Rahul,

Hope you guys are doing well over there at Syncfusion. I was wondering if you could give me an update on the release such as a definitive release date? I would like to be able to report to my upper management on the status of this ticket!

Thank you,

Kenney

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for the update. 

As we said in our last update, the improvement will be included in our upcoming patch release which will be expected to be rolled out on or before end of August(August 31/ September 01), 2021. We will update you once the improvement is included in our release and rolled out successfully. Until then we appreciate your patience. 

 

Regards, 

Rahul 

[Kenney Phan]

Hi Rahul,

I know you guys are working hard and are busy, and I appreciate the work you are doing. 

However, it is the end of the month, and I need to report a status update to my management.

I was curious to know if the upcoming path release is done? 

Thank you,

Kenney

[Rahul Narayanasamy]

Hi Kenney,    

    

Sorry for the inconvenience. 

   

Due to some unforeseen circumstances, we are not able to include the usability improvement “Need to provide support for providing custom datasource for Checkbox/Excel filter list datasource” in our mentioned patch release as promised. We have planned to include this improvement in our upcoming patch release which is expected to be rolled out on or before mid of September, 2021. 

     

We will update you once the improvement is included in our release and rolled out successfully. Until then we appreciate your patience. 

 

Regards,   

Rahul  

[Kenney Phan]

Hi Rahul,

I appreciate your honesty and apology. I know there are a lot bugs and work you guys are juggling around right now, so I understand the delay.

However, sometimes my managers may not understand the situation like how I do. It is because to them, they understood that an update was to be rolled out end of August as promised. But now, I have no excuses for them as it is now mid-September.

Our company has been using Syncfusion for some time now and I really enjoy the vast components you guys have developed. I want to keep supporting Syncfusion, but it will be difficult to give my managers a reason if there are delays like these. Therefore, in order for us to keep supporting Syncfusion, I hope you can roll out an update by mid-September as originally promised.

Thank you,

Kenney

[Jeevakanth Palaniappan]

  

Hi Kenney, 

 

We understand your situation but we are extremely sorry for the delay. Due to volume 3 release feature and bug fixes, we are unable to include the improvement as promised. 

 

We have prioritized this improvement(Need to provide support for providing custom datasource for Checkbox/Excel filter list datasource) and we will include it in the next patch release which is expected to be rolled our by next week(September 21, 2021). Until then we appreciate your patience. 

 

Regards, 

Jeevakanth SP. 

[Kenney Phan]

Hi Jeevakanth,

Has the next patch been released yet?

Thank you,

Kenney

[Rahul Narayanasamy]

Hi Kenney, 

Sorry for the inconvenience. 

Due to Volume 3 release, we have postponed our weekly patch release. The mentioned improvement is included in our internal source. The improvement feature will be included in our upcoming Volume 3 release which will be rolled out by end of this month(September) 2021. Until then we appreciate your patience. 

Regards, 

Rahul 

[Kenney Phan]

Hi Rahul,

Where is the internal source?

[Rahul Narayanasamy]

Hi Kenney, 

We have maintained the Blazor Grid component source code internally in Gitlab which was a private branch. In this branch we have included the improvement feature. It will be rolled out by end of September. Until then we appreciate your patience. 

Please let us know if you have any concerns. 

Regards, 

Rahul 

 

[Rahul Narayanasamy]

Hi Kenney, 

 

We are glad to announce that our 2021 Volume 3 release v19.3.0.43  is rolled out.  

https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download 

 

We have included the improvement “Need to provide support for providing custom datasource for Checkbox/Excel filter list” in our latest releases. So please upgrade to our latest version for latest fixes and features. 

 

Release notes : https://blazor.syncfusion.com/documentation/release-notes/19.3.43?type=all 

 

Please find the below code snippet and the sample for your reference below. 

@using Syncfusion.Blazor.Grids 

 

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="375"> 

    <GridEvents OnActionBegin="ActionBegin" TValue="Order"></GridEvents> 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

    public void ActionBegin(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.FilterBeforeOpen) && args.ColumnName.Equals("CustomerID")) 

        { 

//You can set the customized datasource here 

            args.CheckboxListData = Orders.Take(5); 

        } 

    } 

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-588038024 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Regards, 

Rahul 

[Kenney Phan]

Hi Rahul,

Thank you for getting back to me.

However, your solution does not work for columns of type integers. For example, if applied CheckboxListData to the column "OrderID", if you perform a search in the filter, the filter items will re-populate the original list of data and not the custom CheckboxListData. This method works fine for strings though.

I have attached the modified sample project and a video demonstrating the issue.

Attachment: CheckboxListData_for_Int_65306f49.zip

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for the update. 

We are currently checking the reported query with the provided details and we will update the further details in two business days. Until then we appreciate your patience. 

Regards, 

Rahul 

[Rahul Narayanasamy]

Hi Kenney, 

Thanks for your patience. 

We have validated your query and checked the reported problem in the provided sample. We need to handle the search in the provided CheckBoxListData and assign the searched result to args.CheckboxListData. We have modified the sample based on the reported case. Find the below code snippets and sample for your reference. 

 

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="375"> 

    <GridEvents OnActionBegin="ActionBegin" TValue="Order"></GridEvents> 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings> 

    <GridColumns> 

        . ..  

    </GridColumns> 

</SfGrid> 

 

@code{ 

    public List<Order> Orders { get; set; } 

 

               . ..  

               public void ActionBegin(ActionEventArgs<Order> args) 

               { 

                              . . . 

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.FilterSearchBegin) 

        { 

            if (string.Equals(FilterCol, "CustomerID", StringComparison.Ordinal)) 

            { 

                .. .  

            } 

            if (string.Equals(FilterCol, "OrderID", StringComparison.Ordinal)) 

            { 

                //pass the searchstring to custommethod and return the data 

                if(args.SearchString != "") 

                { 

                    var lists = GetSearchedListOrd(args.SearchString); 

                //bind resultant list to CheckboxListData. 

                args.CheckboxListData = lists; 

                } else 

                { 

                    args.CheckboxListData = Orders.Take(5); 

                } 

            } 

        } 

               } 

               . .  

 

         public List<Order> GetSearchedListOrd(string key) 

        { 

             //you need to handle the search and return the search result 

             var empdata = Orders.Take(5).Where(fil => fil.OrderID.ToString().StartsWith(key.ToLower()) || fil.OrderID.ToString().StartsWith(key.ToLower())).Select(x=>x.OrderID).ToList(); 

 

             var data = new List<Order>(); 

             foreach (var emp in empdata) 

             { 

                 data.Add(Orders.Where(x => x.OrderID.Equals(emp)).FirstOrDefault()); 

             } 

             //perform your custom action and return 

             return data; 

         } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/167408/ze/SampleMod-988620287  

Please let us know if you have any concerns. 

Regards, 

Rahul