Make AllowFiltering-search row popup/popdown

[Soren M]

Hi - What would be the easiest way to add a search-icon to the columnheader text and an event that shows the searchrow for AllowFiltering= true?

and disable/remove the searchrow on next click 

I have already 

[Renjith Singh Rajendran]

Hi Soren, 

Thanks for contacting Syncfusion support. 

Query 1 : What would be the easiest way to add a search-icon to the columnheader text 

We suggest you to use the “HeaderTemplate support for Grid”. Please refer the below documentation for more details regarding this, 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/columns/?no-cache=1#header-template 

Query 2 : an event that shows the searchrow for AllowFiltering= true? and disable/remove the searchrow on next click 

We suspect that, you would like to enable the filtering dynamically when click on the search icon in the Grid header. And on the next click of the search icon, you would like to disable the filterbar(search row input) for the column. If so, then we suggest you to achieve this requirement, by binding a click event for the search icon. And in that handler we suggest you to change the property values for AllowFiltering. We have prepared a sample based on this, please download the sample from the link below, 

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

 

Please refer the codes below,  

 

<EjsGrid @ref="DefaultGrid" DataSource="@Employees" AllowPaging="true" Height="315" AllowFiltering="@GridFilterEnable"> 

    <GridColumns> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Right" Width="120" AllowFiltering=@EmployeeIDFilter> 

            <HeaderTemplate> 

                <div> 

                    Product Key <span class="e-search-icon e-icons" @onclick="onclick"></span> 

                </div> 

            </HeaderTemplate> 

        </GridColumn> 

        ... 

   </GridColumns> 

</EjsGrid> 

 

 

@code{ 

    EjsGrid<EmployeeData> DefaultGrid; 

    public bool EmployeeIDFilter = true; 

    public bool GridFilterEnable = false; 

    public List<EmployeeData> Employees { get; set; } 

    public void onclick() 

    { 

        if(DefaultGrid.AllowFiltering) 

            EmployeeIDFilter = false;       //Change the property value for GridColumn's AllowFiltering property 

        GridFilterEnable = true;            //Change the property value for Grid's AllowFiltering property     

    } 

    ... 

} 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/filtering/ 

 

If we have misunderstood your query, then we suggest you to get back to us with a detailed explanation or a pictorial representation explaining your complete requirement. 

Regards, 

Renjith Singh Rajendran. 

[Soren M]

Thank you Renjith .

It works as I wanted it to, with the grids property like : 

    public void ToggleSearchBar()

    {

        if (DefaultGrid.AllowFiltering)

        {

            GridFilterEnable = false;       //Change the property value for GridColumn's AllowFiltering property

        }

        else

        {

            GridFilterEnable = true;            //Change the property value for Grid's AllowFiltering property

        }

    }

[Renjith Singh Rajendran]

Hi Soren, 

Thanks for your update. 

We are glad to hear that our suggestion helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.