1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Filtering Datetime Columns (Native and Locallized)

Filtering Datetime Columns (Native and Locallized)

Hello.
I have some problems with the DateTime fields of Grid.
Model:
public class Foo
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime Somewhen { get; set; }
}

Controller:
public class FooController : Controller
{
public ActionResult Index()
{
var foos = new List<Foo>();
for (int i = 1; i <= 1000; i++)
{
foos.Add(new Foo
{
Id = i,
Name = $"Foo #{i}",
Somewhen = DateTime.Today.AddMonths(i)
});
}
return View(foos);
}

[HttpPost]
public ActionResult Create(Foo value)
{
return Json(value, JsonRequestBehavior.AllowGet);
}

[HttpPost]
public ActionResult Update(Foo value)
{
return Json(value, JsonRequestBehavior.AllowGet);
}

[HttpPost]
public ActionResult Delete(int key)
{
return Json(key, JsonRequestBehavior.AllowGet);
}
}

View:
@model IEnumerable<Foo>
@{
ViewBag.Title = "Index";
}

@(Html.EJS().Grid("Grid")
.DataSource(dataManager =>
{
dataManager.Json(Model.ToArray())
.InsertUrl("/Foo/Create")
.UpdateUrl("/Foo/Update")
.RemoveUrl("/Foo/Delete")
.Adaptor("RemoteSaveAdaptor");
})
.AllowSorting()
.AllowFiltering()
.Columns(col =>
{
col.Field("Name").HeaderText("Name").Width("150").Add();
col.Field("Somewhen").HeaderText("Somewhen").Type("date").Format("yMd").Width("150").Add();

})
.AllowPaging()
.FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); })
.EditSettings(edit =>
{
edit.AllowAdding(true)
.AllowEditing(true)
.AllowDeleting(true)
.ShowDeleteConfirmDialog(true)
.Mode(Syncfusion.EJ2.Grids.EditMode.Normal);
})
.Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })
//.Locale("ru-RU")
.Render())

@section scripts{
@*<script src="~/Scripts/ej2-conf.js"></script>*@
}

I can't apply a filter to the "Somewhen" column.
My OS has asetting Region as Russia, and JSON looks like as:
...
{
"Id": 1,
"Name": "Foo #1",
"Somewhen": "2018-04-30T00:00:00+03:00"
},
...

Eventually, I want to do localization for the grid. I have added a file ej2-conf.js to my project (see attachment).
I understand that DateTime and localization are the devil hole, but I can't resolve this some self. Help me, please.
Thank you very much.

Attachment: WebApplication2_cb2772f9.zip

3 Replies
RS Renjith Singh Rajendran Syncfusion Team April 3, 2018 01:14 PM UTC

Hi Kabanets, 

We have validated the issue we suspect that you pass the date values as string to the DataSource of the grid. The filtering in Grid will be performed by comparing the value to filter with the values in DataSource. Since the value to filter will be of date object type and the values in DataSource will be string type, then there will be mismatch in the values and hence filter operation will not be performed. This is why the “Somewhen” column in your Grid is not filtered. 
 
Please refer the screenshot below, 
 
 
In the above screenshot the “Somewhen” field is having string values, it should be a date object value for the filtering to work in that column. 
 
To avoid this issue please pass the date values as date object.  Please refer the code example below, 

public static List<OrdersDetails> GetAllRecords() 
        { 
            List<OrdersDetails> order = new List<OrdersDetails>(); 
            int code = 10000; 
            for (int i = 1; i < 10; i++) 
            { 
                order.Add(new OrdersDetails(code + 1, "ALFKI", new DateTime(1991, 05, 15), "Berlin", "Kirchgasse 6")); 
                order.Add(new OrdersDetails(code + 2, "ANATR", new DateTime(1990, 04, 04), "Madrid", "Avda. Azteca 123")); 
                order.Add(new OrdersDetails(code + 3, "ANTON", new DateTime(1957, 11, 30), "Cholchester", "Carrera 52 con")); 
                order.Add(new OrdersDetails(code + 4, "BLONP", new DateTime(1930, 10, 22), "Marseille", "Magazinweg 7")); 
               code += 5; 
            } 
            return order; 
        } 

Please let us know if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


KA Kabanets April 3, 2018 07:53 PM UTC

Hi Renjith Singh Rajendran.
Thank you for the answer, but see my code again.
My model contains the property  of type DateTime:
public DateTime Somewhen { get; set; }
Controller:
Somewhen = DateTime.Today.AddMonths(i) // DateTime
I use DateManager in your helper:
.DataSource(dataManager =>
{
dataManager.Json(Model.ToArray())
.InsertUrl("/Foo/Create")
.UpdateUrl("/Foo/Update")
.RemoveUrl("/Foo/Delete")
.Adaptor("RemoteSaveAdaptor");
})

It isn't work and I can't solve this problem.
Regards,
Andrey Kabanets.


RS Renjith Singh Rajendran Syncfusion Team April 4, 2018 01:12 PM UTC

Hi Kabnets, 

We are sorry for the inconvenience caused. 

We have analyzed the sample, we could see that the JSON data is not parsed while using the RemoteSaveAdaptor. We have confirmed this as a defect, and logged a defect report for the issue “Date Object is not parsed while using the RemoteSaveAdaptor”. 

This issue will be fixed and will be available in our upcoming patch release.  

Until then we suggest you to use the following workaround to overcome this issue. In the DataBound event of Grid. We have parsed the JSON data. Please refer the code example below, 

<div> 
    @Html.EJS().Grid("Grid").DataSource(dataManager =>{dataManager.Json(ViewBag.dataa).Adaptor("RemoteSaveAdaptor");}) 
    .AllowSorting().AllowFiltering() 
    ... 
    .AllowPaging().DataBound("bound").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Render() 
 
</div> 
<script type="text/javascript"> 
    function bound(args) { 
        this.dataSource.dataSource.json = ej.data.DataUtil.parse.isJson(this.dataSource.dataSource.json); 
    } 
</script> 

The highlighted codes from the above example will not be needed after the patch release is released. 

Until then we appreciate your patience. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon