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. Image for the cookie policy date
close icon

Date filter in grid

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> 
<script>   
    function load() { 
        this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; // Bind the custom date format 
    }  
</script> 
   
 
 
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 {

<script>

    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 {

<script>

    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> 
   
 
 
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> 
 
<script> 
 
    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> 
 
 
 
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

 
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. 
 
  1. Ensure the Sample Version
  2. Share the Issue reproduced replication steps through video demo.
  3. Share Grid code sample
 
 
 
Please get back to us, if you need further assistance. 
 
Regards,  
Pavithra S 


Loader.
Live Chat Icon For mobile
Up arrow icon