Date filter in grid

6 Replies
3 Participants

Created by
MD Mini Dev

Platform
ASP.NET Core - EJ 2

Platform
ASP.NET Core - EJ 2

Control
DataGrid

Created On
Jan 21, 2019 02:35 PM UTC

Last Activity On
Jan 24, 2019 08:54 AM UTC

Want to subscribe?
SIGN IN

Hi,

I have my grid with filter.

I insert my input in grid date column: 31/12/2040 but an error is generated on js console:

Uncaught TypeError: Cannot read property 'toString' of null

at e.setFormatForFlColumn (constants.js:78)

at e.updateFilterMsg (constants.js:78)

at e.onTimerTick (constants.js:78)

at constants.js:78

<e-grid-column field="EndDate" headerText="End" format="yMd" isPrimaryKey="true" width="150"></e-grid-column>

I received DataManagerRequest

public IActionResult GetList([FromBody]DataManagerRequest dm)

and then I created my sql query where statement on based DataManagerRequest dm.

Why is the error is Cannot read property 'toString' of null generated?

Thanks in advance

6 Replies

MF Mohammed Farook J Syncfusion Team January 22, 2019 12:47 PM UTC

Hi Mini,

Greetings from Syncfusion,

We have validated your query with given codes. You have set “yMd” for Date column (as your sample ‘EndDate’ field). So Grid has set the format for “yMD” for the corresponding Date column. So if you need filter the date as same format. This is default behavior. It will be script error thrown when given invalid date or month.

But we can show the customize format for date column by set the custom format in ‘load’ event of Grid. We have prepared the sample to show the date format as “dd/MM/yyyy”. Please find the code example and sample for your reference.

[Index.cshtml]

<div>

<ejs-grid id="GridLemma" locale="it-IT" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" gridLines="Both" allowPaging="true" allowFiltering="true" load="load">

<e-data-manager url="/Home/EmployeeDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager>

<e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings>

<e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

<e-grid-columns>

. . . .

<e-grid-column field="OrdDate" headerText="Order Date" isPrimaryKey="false" format="yMd" width="170"></e-grid-column>

</e-grid-columns>

</ejs-grid>

function load() {

this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; // Bind the custom date format

}

</script>

Sample link: http://www.syncfusion.com/downloads/support/forum/142129/ze/TestSample1852823420.zip

Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/#load

Please get back to us, if you need further assistance.

Regards,

J Mohammed Farook

MD Mini Dev January 22, 2019 02:47 PM UTC

This is was my code

<ejs-grid id="MyGrid" locale="it" load="changeDateFormat" allowFiltering="true">

<e-data-manager url="/api/get/all" adaptor="UrlAdaptor"></e-data-manager>

<e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" mode="Dialog"></e-grid-editSettings>

<e-grid-columns>

...

<e-grid-column field="EndDate" headerText="Date" format="yMd" isPrimaryKey="true" width="150"></e-grid-column>

</e-grid-columns>

</ejs-grid>

@section PreScripts {

function loadCultureFiles(name) {

var files = ['currencies.json', 'numbers.json', 'ca-gregorian.json', 'timeZoneNames.json'];

var loader = ej.base.loadCldr;

var loadCulture = function () {

var val, ajax;

console.log(files[prop]);

ajax = new ej.base.Ajax('/scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);

ajax.onSuccess = function (value) {

val = value;

};

ajax.send();

loader(JSON.parse(val));

ej.base.setCulture('it');

};

for (var prop = 0; prop < files.length; prop++) {

loadCulture();

}

function changeDateFormat(args) {

this.columns[6].format = { type: 'date', format: 'dd/MM/yyyy' };

}

</script>

}

@section Scripts {

loadCultureFiles('it');

</script>

}

but i always in front of that error...

MD Mini Dev replied to Mohammed Farook J January 22, 2019 03:54 PM UTC

Hi Mini,

Greetings from Syncfusion,

We have validated your query with given codes. You have set “yMd” for Date column (as your sample ‘EndDate’ field). So Grid has set the format for “yMD” for the corresponding Date column. So if you need filter the date as same format. This is default behavior. It will be script error thrown when given invalid date or month.

But we can show the customize format for date column by set the custom format in ‘load’ event of Grid. We have prepared the sample to show the date format as “dd/MM/yyyy”. Please find the code example and sample for your reference.

[Index.cshtml]

<div>

    <ejs-grid id="GridLemma" locale="it-IT" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" gridLines="Both" allowPaging="true" allowFiltering="true" load="load">

        <e-data-manager url="/Home/EmployeeDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager>

        <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings>

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

        <e-grid-columns>

            .   .    .    .

           <e-grid-column field="OrdDate" headerText="Order Date" isPrimaryKey="false" format="yMd" width="170"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

<script>

    function load() {

        this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; // Bind the custom date format

    }

</script>



Sample link: http://www.syncfusion.com/downloads/support/forum/142129/ze/TestSample1852823420.zip

Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/#load

Please get back to us, if you need further assistance.

Regards,

J Mohammed Farook

Anyway I tried your solution but the error is still present.

see attachments

Attachment: Capture_e5a91854.zip

PS Pavithra Subramaniyam Syncfusion Team January 23, 2019 11:32 AM UTC

Hi Mini,

Greetings from Syncfusion,

We have created sample for your reference, in the below sample we have enabled filterBar with “it” locale in the EJ2 Grid in ASP .Net Core platform. You can customize the date column in load event of EJ2 Grid which is shown the “dd/MM/yyyy” format. Please refer the below code example and sample for more information.

[Index.cshtml]

<div>

<ejs-grid id="Grid" locale="it" dataSource="ViewBag.DataSource" allowPaging="true" load="changeDateFormat" allowGrouping="true" allowFiltering="true">

<e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings>

<e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings>

<e-grid-columns>

. . . .

<e-grid-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="10%"></e-grid-column>

<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>

</e-grid-columns>

</ejs-grid>

</div>

function changeDateFormat() {

this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; // Here, custom date format to "OrderDate" column

}

function loadCultureFiles(name) {

ej.base.setCulture(name);

var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];

if (name === 'it') {

files.push('numberingSystems.json');

}

var loader = ej.base.loadCldr;

var loadCulture = function (prop) {

var val, ajax;

if (name === 'it' && prop === files.length - 1) {

ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false);

} else {

ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);

}

ajax.onSuccess = function (value) {

val = value;

};

ajax.send();

loader(JSON.parse(val));

};

for (var prop = 0; prop < files.length; prop++) {

loadCulture(prop);

}

document.addEventListener('DOMContentLoaded', function () {

loadCultureFiles('it');

});

</script>

Sample link: http://www.syncfusion.com/downloads/support/forum/142129/ze/EJ2-dotnet-core-locale-filtering-1518617941.zip

Help Documentation: https://ej2.syncfusion.com/documentation/grid/global-local/#localization

Please get back to us, if you need any further assistance.

Regards,

Pavithra S.

MD Mini Dev January 23, 2019 01:32 PM UTC

I run your sample but it does not work.

It could be a syncfusion bug?

see Attachment: Capture_e5a91854.zip in previous message

PS Pavithra Subramaniyam Syncfusion Team January 24, 2019 08:54 AM UTC

Hi Mini,

Greetings from Syncfusion.

We have validated the sample which is sent from us. But, the provided sample is working properly at our end and the reported date format issue also resolved in that sample. Hence we have shared the sample and video demo for your reference. If you have get the same error please share the below details for better assistance.