We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Initial filtering in EJS Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

145132 Jun 7,2019 08:53 PM UTC Jun 14,2019 09:52 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
Ting Zhou
Asked On June 7, 2019 08:53 PM UTC

I would like to add some initial filtering on a Date column when the grid is rendered for the first time. Following is the section of my code:

@{
    List<object> filterColumns = new List<object>();
    filterColumns.Add(new { field = "TestDate", @operator = "equal", value = "11/3/1995" });
}

<ejs-grid id="SearchResultsGrid".. ..
allowFiltering="true">
.        <e-grid-filtersettings Type="Excel" columns="filterColumns"/>
        <e-grid-columns>
            <e-grid-column field="TestDate" headerText="Test Date" ormat="yMd" width="140"></e-grid-column>
        </e-grid-columns>
</ejs-grid>

However, it doesn't return any record even though we have some record that is dated on 11/3/1995. Please advise!

Thanks!

Hariharan J V [Syncfusion]
Replied On June 10, 2019 10:58 AM UTC

Hi Ting, 
 
Greetings from Syncfusion. 
 
Query: I would like to add some initial filtering on a Date column when the grid is rendered for the first time. Following is the section of my code: However, it doesn't return any record even though we have some record that is dated on 11/3/1995. Please advise! 
 
We have validated your query and you want to apply the initial filter for date column. You can achieve your requirement by using below way and also we have prepared a sample based on your requirement. Please find the below code example and sample for your reference. 
 
[code example] 
 
@{ 
    List<object> filterColumns = new List<object>(); 
    filterColumns.Add(new { field = "OrderDate", matchCase = false, @operator = "equal", predicate = "and", value = "4/4/1990" }); 
} 
 
<ejs-grid id="GridOverview" allowFiltering="true" allowPaging="true"> 
    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-pagesettings pageSize="4"></e-grid-pagesettings> 
    <e-grid-filterSettings columns="filterColumns"></e-grid-filterSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 
        <e-grid-column field="OrderDate" headerText=" Order Date" format="yMd" width="130"></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
 
 

Please get back to us if you need further assistance. 

Regards, 
Hariharan 


Ting Zhou
Replied On June 10, 2019 04:11 PM UTC

Thanks for your code sample!

However, if I modify it to use the ViewBag.DataSource as the dataSource for the grid. The initial filtering will stop working. 

In the Controller:
public IActionResult Index()
        {
            IEnumerable DataSource = OrdersDetails.GetAllRecords();
            ViewBag.DataSource = DataSource;
            return View();
        }

In the view:
@{
    List<object> filterColumns = new List<object>();
    filterColumns.Add(new { field = "OrderDate", matchCase = false, @operator = "equal", predicate = "and", value = "4/4/1990" });
}

<ejs-grid id="GridOverview" dataSource="ViewBag.DataSource" allowFiltering="true" allowPaging="true">
    <e-grid-pagesettings pageSize="4"></e-grid-pagesettings>
    <e-grid-filterSettings Type="Excel" columns="filterColumns"></e-grid-filterSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText=" Order Date" format="yMd" width="130"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

Result:


Please advise!

Thanks!

Hariharan J V [Syncfusion]
Replied On June 12, 2019 10:02 AM UTC

Hi Ting, 
 
Query: Thanks for your code sample! However, if I modify it to use the ViewBag.DataSource as the dataSource for the grid. The initial filtering will stop working.  
 
We have validated your query and you want perform initial filtering for date column in local dataource. You can also achieve this by using below way. Please find the below code example and sample for your reference. 
 
[code example] 
 
<ejs-grid id="GridOverview" dataSource="ViewBag.DataSource" load="load" allowFiltering="true" allowPaging="true"> 
    <e-grid-pagesettings pageSize="4"></e-grid-pagesettings> 
    <e-grid-filterSettings  type="Excel"></e-grid-filterSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 
        <e-grid-column field="OrderDate" headerText=" Order Date" type="date" format="yMd" width="130"></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
 
<script> 
    function load(e) { 
        
        this.filterSettings.columns = [{ field : "OrderDate", matchCase : false, operator : "equal", predicate : "and", value :new Date("4/4/1990") }] 
    } 
</script> 



Please get back to us if you need further assistance. 

Regards, 
Hariharan 


Ting Zhou
Replied On June 13, 2019 08:47 PM UTC

It works perfectly! Thanks for help!

Hariharan J V [Syncfusion]
Replied On June 14, 2019 09:52 AM UTC

Hi Ting,

Thanks for your update.

We are happy to hear that your requirement has been achieved.

Regards,
Hariharan

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon