1. Home
  2. Forum
  3. Blazor
  4. Filter Item template not able to search from int to string

Filter Item template not able to search from int to string

Hi, I want to be able to use the search bar in the filter to search the string items from Filter Item Template.

Currently, it will only let me search 'int' values and not 'string' for people's names.

How do I use the filter search bar to search the string values from the Filter Item Template? Thank you.

'.razor' pt.1


'.razor' pt.2


Attachment: Filter_template_6b111164.zip

9 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team June 2, 2021 11:41 AM UTC

Hi Kenney,  
 
Thanks for contacting Syncfusion support.  
 
Query: “How do I use the filter search bar to search the string values from the Filter Item Template? Thank you.” 
 
We have analyzed your query and we would like to inform you that using FilterItemTemplate feature, any value can be placed inside the CheckBox filter. So it is not possible to search the values displayed using FilterItemTemplate. To overcome this scenario, we have provided support to send the filtered data in OnActionBegin event using CheckBoxListData property to display that values in checkbox filter.  
 
 In CheckBoxListData, we need to send the filtered data which is externally filtered based on the searched text. Refer the below code example.  
 
<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="375"> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></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.EmployeeID) HeaderText="Bio" Width="150"> 
            <Template> 
                @{ 
                    var filterContext = (context as Order); 
                    var itemTemplateValue = Employees.Find(x => x.EmployeeID == filterContext.EmployeeID); 
                } 
                @itemTemplateValue.FirstName - @itemTemplateValue.LastName 
            </Template> 
            <FilterItemTemplate> 
                @{ 
                    var filterContext = (context as FilterItemTemplateContext); 
                    var itemTemplateValue = Employees.Find(x => x.EmployeeID.ToString() == filterContext.Value.ToString()); 
                } 
                @itemTemplateValue.FirstName - @itemTemplateValue.LastName 
            </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> 
  
@code{ 
    public List<Order> Orders { get; set; } 
    public string FilterCol { get; set; } 
    public List<Employee> Employees { get; set; } 
  
    public void ActionBeginHandler(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen) 
        { 
            //to find the current filtering column name 
            FilterCol = Args.ColumnName; 
        } 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterSearchBegin) 
        { 
            if (string.Equals(FilterCol, "EmployeeID", StringComparison.Ordinal)) 
            { 
                //pass the searchstring to custommethod and return the data 
               var lists = GetSearchedList(Args.SearchString); 
                //bind resultant list to CheckboxListData. 
                Args.CheckboxListData = lists; 
            } 
        } 
    } 
    public List<Order> GetSearchedList(string key) 
    { 
        var empdata = Employees.Where(fil => fil.FirstName.ToLower().ToString().StartsWith(key.ToLower()) || fil.FirstName.ToLower().ToString().StartsWith(key.ToLower())).Select(x=>x.EmployeeID).ToList(); 
  
        var data = new List<Order>(); 
        foreach (var emp in empdata) 
        { 
            data.Add(Orders.Where(x => x.EmployeeID.Equals(emp)).FirstOrDefault()); 
        } 
        //perform your custom action. 
        return data; 
    } 
 
 
In above example, we performed the search action externally using the search text and sent the filtered data to Grid to display in search text. But currently we are facing one issue with string value being displayed in integer column. We have confirmed the reported query as a bug and logged the defect report “Search operation in Excel/Checkbox filter with FilterItemTemplate is not working for integer column for the same. Thank you for taking the time to report this issue 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 defect fix in our weekly release which is expected to be rolled out by mid of July 2021. We will update you once the release is rolled out.     
        
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.        
 
 
Till then we appreciate your patience. Once the reported issue is fixed, you can search the values using CheckBoxListData property.   
 
Regards, 
Vignesh Natarajan 


Marked as answer
KP Kenney Phan June 2, 2021 05:14 PM UTC

Hi, how does CheckboxListData know what column to provide the custom data source to?

RN Rahul Narayanasamy Syncfusion Team June 3, 2021 02:06 PM UTC

Hi Kenney, 

Thanks for the update. 

Query: how does CheckboxListData know what column to provide the custom data source to? 

We have validated your query and you need to check the ColumnName in OnActionBegin event to provide the CustomDataSource to particular column. In the previously shared code snippets, we have checked the ColumnName while opening FilterDialog in OnActionBegin event and provided custom data to the CheckBoxListData. Find the below code snippets for your reference. 

public void ActionBeginHandler(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen) 
        { 
            //to find the current filtering column name 
            FilterCol = Args.ColumnName; 
        } 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterSearchBegin) 
        { 
            if (string.Equals(FilterCol, "EmployeeID", StringComparison.Ordinal))   //checked the Column before providing data 
            { 
                //pass the searchstring to custommethod and return the data 
               var lists = GetSearchedList(Args.SearchString); 
                //bind resultant list to CheckboxListData. 
                Args.CheckboxListData = lists; 
            } 
        } 
    } 


Please let us know if you have any concerns. 

Regards, 
Rahul 


KP Kenney Phan June 3, 2021 09:20 PM UTC

I don't think CheckboxListData does anything because even if I set 'Args.CheckboxListData = null', the filter list still has data.

How do you correctly use 'CheckboxListData'? There is no documentation on it.

RN Rahul Narayanasamy Syncfusion Team June 4, 2021 01:44 PM UTC

Hi Kenney, 

Thanks for the update. 

We have validated query and the provided CheckBoxList data will be shown while performing search in Excel filter dialog. But we are facing the problem while performing search operation(in filter dialog) in integer columns. So the provided custom data is not shown while searching. For this we have considered this as an issue(Search operation in Excel/Checkbox filter with FilterItemTemplate is not working for integer column) from our end. 

Once the issue is fixed and included, then you can able to see the provided custom data while performing searching operation filter dialog. 

Please let us know if you have any concerns. 

Regards, 
Rahul 


KP Kenney Phan October 5, 2021 05:17 PM UTC

Hi Rahul,


Are there any updates on this ticket? 


Thanks,

Kenney


RN Rahul Narayanasamy Syncfusion Team October 6, 2021 03:54 PM UTC

Hi Kenney,    
  
We are glad to announce that our latest release(19.2.0.56) has been successfully rolled out. We have included the fix for this issue “Search operation in Excel/Checkbox filter with FilterItemTemplate is not working for integer column” in our latest version release. So please upgrade to our 19.2.0.56 or latest version 19.3.0.43 version to resolve the problem. 
 
  
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 


KP Kenney Phan October 6, 2021 05:05 PM UTC

Hi Rahul,


The search operation for Checkbox filter with FilterItemTemplate is still not working for integer column even in v19.2.0.56.


 I have attached a video demonstrating the same issue and the razor code.


Thanks,

Kenney



Attachment: FilterItemTemplate_Search_for_Int_not_working_c0db08e.zip

RN Rahul Narayanasamy Syncfusion Team October 8, 2021 03:42 AM UTC

Hi Kenney, 

Thanks for the update. 

We have validated your query and checked the reported case at our end. We could not able to reproduce the problem. While performing search in filter dialog, the search result is properly returned. You need to handle the searching operation in OnActionBegin and assign the search result in CheckboxListData. Find the below code snippets and sample for your reference. 
 
 
<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="375"> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings> 
    <GridColumns> 
        . ..  
        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Bio" Width="150"> 
            <Template> 
                @{ 
                    var filterContext = (context as Order); 
                    var itemTemplateValue = Employees.Find(x => x.EmployeeID == filterContext.EmployeeID); 
                } 
                @itemTemplateValue.FirstName - @itemTemplateValue.LastName 
            </Template> 
            <FilterItemTemplate> 
                @{ 
                    var filterContext = (context as FilterItemTemplateContext); 
                    var itemTemplateValue = Employees.Find(x => x.EmployeeID.ToString() == filterContext.Value.ToString()); 
                } 
                @itemTemplateValue.FirstName ( @itemTemplateValue.LastName) 
            </FilterItemTemplate> 
        </GridColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
    public string FilterCol { get; set; } 
    public List<Employee> Employees { get; set; } 
 
    public void ActionBeginHandler(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen) 
        { 
            //to find the current filtering column name 
            FilterCol = Args.ColumnName; 
        } 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterSearchBegin) 
        { 
            if (string.Equals(FilterCol, "EmployeeID", StringComparison.Ordinal)) 
            { 
                //pass the searchstring to custommethod and return the data 
               var lists = GetSearchedList(Args.SearchString); 
                //bind resultant list to CheckboxListData. 
                Args.CheckboxListData = lists; 
            } 
        } 
    } 
    public List<Order> GetSearchedList(string key) 
   { 
        //you need to handle the search and return the search result 
        var empdata = Employees.Where(fil => fil.FirstName.ToLower().ToString().StartsWith(key.ToLower()) || fil.FirstName.ToLower().ToString().StartsWith(key.ToLower())).Select(x=>x.EmployeeID).ToList(); 
 
        var data = new List<Order>(); 
        foreach (var emp in empdata) 
        { 
            data.Add(Orders.Where(x => x.EmployeeID.Equals(emp)).FirstOrDefault()); 
        } 
        //perform your custom action and return 
        return data; 
    } 
 
    . . . 
} 



Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon