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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Date filter in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142129 Jan 21,2019 02:35 PM UTC Jan 24,2019 08:54 AM UTC ASP.NET Core - EJ 2 6
loading
Tags: DataGrid
Mini Dev
Asked On January 21, 2019 02:35 PM UTC

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

Mohammed Farook J [Syncfusion]
Replied On 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 


Mini Dev
Replied On 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...



Mini Dev
Replied On 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Mini Dev
Replied On 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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 


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

;