Controls to update all the filtered rows.

[Preity]

Hi There, 

I have 5 columns in my grid. I want to place 5 controls for those 5columns in a row, so that I can change the value of the filtered rows just by changing one value of that control. Is there any way to do this?

[Vignesh Natarajan]

Hi Preity,  

 

Thanks for contacting Syncfusion support.  

 

Query: “so that I can change the value of the filtered rows just by changing one value of that control. Is there any way to do this?” 

 

You can achieve your requirement by rendering a custom component in FilterBar Template. Refer our UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/grid/filtering/#filter-bar-template-with-custom-component 

Note: in above documentation, we have rendered FilterTemplate for only one column. Similarly you can render different component for other columns.  

If you are facing any issue while using above solution, kindly get back to us with more details.  

 

Regards, 

Vignesh Natarajan. 

[Preity]

Hi Vignesh,

I'm already doing it. But when I change the filter type to excel filter, it removes all the control which I have in FilterTemplate and that's why I want to place these controls somewhere else(in a separate row). I've like 7 controls(5 datepicker, 1 checkbox and 1 textbox). I don't want to put all these out side the grid, becuase it will look messy and it will just fill the screen and that's why I want to place these controls in a separate row in the grid. So that user will know which controls belong to which column.

I'm attaching screen shot of my screen. Here I'm using Filter template:

Attachment: gridFilter_9b8e8c1a.zip

[Vignesh Natarajan]

Hi Preity,  

 

Thanks for the update.  

 

Query: “But when I change the filter type to excel filter, it removes all the control which I have in FilterTemplate and that's why I want to place these controls somewhere else(in a separate row)” 

 

From your query we suspect that you want to render ExcelFilter as well as Filterbar in Grid at same time. Currently we have support to render any one filter mode at a time. But we can achieve your requirement  (Excel Filter as well as FilterBar template) in Grid with help of JavaScript interaction. (i.e.) we can render the FilterBar template as it is using FilterTemplate in Grid. For excel filter, we can render Filter icon in Grid header and upon clicking we can open a Excel dialog.  

 

This can be achieved using JavaScript interaction in Blazor for which we need to use IJSRuntime. So kindly confirm whether it is fine for you to achieve your requirement with help of JavaScript function. Based on your confirmation. We will prepare a sample and update you the details.   

 

If we misunderstood your requirement, kindly share more details about your requirement. 

 

Regards, 

Vignesh Natarajan. 

[Preity]

Hi Vignesh,

I want to go with javascript solution, but for that, I'll need some way to get the filtered data from the grid, so that I can update the filtered data with those bulk editing controls. But the getfilteredrecords method of the grid is not working at the moment. I've already opened a thread for this.  Is there any other way to get the filtered data from the grid? If there is a way to get the filtered data then only I can use the javascript solution otherwise I need to drop the idea of excel filter and put the filter controls and bulk editing control inside the filter template.

[Vignesh Natarajan]

Hi Preity,  

 

Thanks for the update.  

 

Query1: “I want to go with javascript solution, but for that, I'll need some way to get the filtered data from the grid” 

 

We have achieved your requirement by rendering a filter icon manually in Grid Column header using DataBound event of Grid. And on clicking the filter icon, we have opened the Excel Filter using openMenuByFiled method of ExcelDialog in JavaScript section. You can define the FilterTemplate as per your wish. In the sample you need to ensure the following suggestion to achieve this requirement.  

 

Kindly enable only the AllowFiltering property of the Grid. Do not specify the ExcelFilter type in GridFilterSettings. Instead define the Filter Type in GridColumn. You can define the FilterTemplate like below with your own components as it will be rendered in the default Filter bar.  

 

<EjsGrid @ref="@Grid" DataSource="@Orders" ShowColumnMenu="true" AllowFiltering="true" AllowPaging="true" Height="315"> 

    <GridEvents DataBound="OnCreated" TValue="Order"></GridEvents> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Filter="@(new{ type= "Excel" })" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Filter="@(new{ type= "Excel" })" Width="150"> 

            <FilterTemplate> 

. . . . . . . . ..  

            </FilterTemplate> 

        </GridColumn> 

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

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Filter="@(new{ type= "Excel" })" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

In the DataBound event to Grid, we have called a JavaScript function to render a Filter Icon in Column header. And its OnClick event we have called openMenuByField method to render the ExcelFilter.  

 

@inject IJSRuntime JSRuntime; <EjsGrid @ref="@Grid" DataSource="@Orders" ShowColumnMenu="true" AllowFiltering="true" AllowPaging="true" Height="315">    <GridEvents DataBound="OnCreated" TValue="Order"></GridEvents>. . . . . .. . . . . </EjsGrid> @*to show the dialog properly*@<style>    .e-grid .e-filter-popup.e-control.e-dialog.e-lib.e-popup.e-col-menu.e-popup-open.e-excelfilter {        visibility: visible !important;    }</style>@code{    EjsGrid<Order> Grid;    public void OnCreated()    {        JSRuntime.InvokeAsync<string>("renderfiltericon",Grid.ID);    }. . . . . .. . .. . . . . . }

 

 

[ExcelFilter.js] 

 

function renderfiltericon(id){        for (var i = 0; i < document.getElementsByClassName("e-headercell").length; i++) {        //create and bind clcikk event to filter icon        var node = document.createElement("div");        node.className = "e-filtermenudiv e-icons e-icon-filter";        node.onclick = openExcelDialog;        node.style.paddingRight = "10px";        //append the filter icon to column header        document.getElementsByClassName("e-headercell")[i].appendChild(node);    }        function openExcelDialog(args) {        //open the filter dialog manually by finding the column field       var targetuid = ej.grids.parentsUntil(args.target, "e-headercell").querySelector(".e-headercelldiv").getAttribute("e-mappinguid");        var ele = document.getElementsByClassName("e-grid")[0].ej2_instances[0];        ele.filterModule.openMenuByField(ele.getColumnByUid(targetuid).field);    }};

 

 

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/151772/ze/Filtered_Records415919635  

 

And regarding the filtered data. You can get the filtered records using GetFilteredRecords method of Grid. But currently we are facing some issue with that method. We have confirmed this as a defect and logged a defect report for the same “GetFilteredRecords methods returns null values”. 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 upcoming bi-weekly release which is expected to be rolled out on or before March 26, 2020.   

   

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.  

  

Feedback Link : https://www.syncfusion.com/feedback/12271/getfilteredrecords-methods-returns-null-values  

  

Till then you can get the filtered record using the below solution. On external button click we have obtained the filtered records.   

 

<EjsButton OnClick="FilterRecords">Filtered Records</EjsButton> 

  

<EjsGrid @ref="@Grid" DataSource="@Orders" ShowColumnMenu="true" AllowFiltering="true" AllowPaging="true" Height="315"> 

. . . . .. . . .  

</EjsGrid> 

@code{ 

    EjsGrid<Order> Grid; 

    public async void FilterRecords() 

    { 

        var filtered =  await JSRuntime.InvokeAsync<FilteredResult<Order>>("getfiltereddata", Orders, Grid.ID); // sent entire dataSource and Grid ID 

    } 

    public class FilteredResult<T> 

    { 

        [JsonProperty("result")] 

        public IEnumerable<T> Result { get; set; } 

        [JsonProperty("count")] 

        public int Count { get; set; }        

    } 

  

 

[getFiltereddata] 

 

function getfiltereddata(data,id) { 

    var ele = document.getElementById(id).ej2_instances[0]; 

    return ele.getDataModule().getData({}, ele.getDataModule().generateQuery(true)); 

} 

 

 

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan. 

 

[Preity]

Hi Vignesh, Thanks for the javascript solution. 

The code is working when I'm opening the page directly but when I'm opening the same page in a dialog from any other page, it is not showing controls under filter template and when using any filter, it is giving below error:

Uncaught TypeError: Cannot read property 'field' of undefined

    at HTMLDivElement.openExcelDialog (excelFilter.js:15)

I've attached the blazer app code. Index.razor is the main page where all the filters are defined and FetchData.razor is the page from where I'm opening Index.razor in a dialog.

Attachment: BlazorApp1_43194145.zip

[Vignesh Natarajan]

Hi Preity,  

 

Query: “when I'm opening the same page in a dialog from any other page, it is not showing controls under filter template” 

 

From your query we understand that you are facing issue with FilterTemplate while rendering it inside a Dialog. Since it is a known issue, we have fixed the reported issue and it was included in our 2020 Volume 1 Service Pack 1 release (18.1.0.52). So kindly upgrade to our latest version to resolve the reported issue. 

 

Kindly get back to us with video demo, if you are still facing the issue after upgrading to latest version.  

 

Query: “when using any filter, it is giving below error Uncaught TypeError: Cannot read property 'field' of undefined” 

 

We are able to reproduce the reported issue in the provided sample. we have modified the solution to overcome the reported issue. Please find the modified solution from below  

[excelfilter.js] 

var GridID;  

function renderfiltericon(id) { 

    GridID = id; 

    for (var i = 0; i < document.getElementsByClassName("e-headercell").length; i++) { 

        //create and bind clcikk event to filter icon 

. . . . . . . . .. . .  

    } 

    function openExcelDialog(args) { 

        //open the filter dialog manually by finding the column field 

        var targetuid = sf.grids.parentsUntil(args.target, "e-headercell").querySelector(".e-headercelldiv").getAttribute("e-mappinguid"); 

        var ele = document.getElementById(GridID).ej2_instances[0]; 

        ele.filterModule.openMenuByField(ele.getColumnByUid(targetuid).field); 

    } 

}; 

. . . . . 

  

Please find the modified sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/151772/ze/BlazorApp1-32405007  

 

Kindly get back to us if you have further queries  

 

Regards, 

Vignesh Natarajan