DevExtreme icon indicating copy to clipboard operation
DevExtreme copied to clipboard

DataSource: fix OData filters behavior using Dates

Open dmalykh-devexpress opened this issue 2 months ago • 0 comments

fixes 1204

1.1) set default behavior deserializeDates to false (before it was undefined but it was counted as true) 1.2) if fieldType for field is not specified - then it will be automatically solved for date 2.2) It was achived by adding additional regexp check/statement to serialize func 3) to verify you can use that example 'paste the following code to playground'

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DevExtreme jQuery Example</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript">
        const currentThemeId = localStorage.getItem("currentThemeId") || "light";

        const link = document.createElement("link");
        link.href = `../artifacts/css/dx.${currentThemeId}.css`;
        link.type = "text/css";
        link.rel = "stylesheet";

        document.getElementsByTagName("head")[0].appendChild(link);
    </script>

    <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
    <!-- HtmlEditor -->
    <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->

    <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
    <script type="text/javascript" src="../artifacts/js/cldr/event.js"></script>
    <script type="text/javascript" src="../artifacts/js/cldr/supplemental.js"></script>
    <script type="text/javascript" src="../artifacts/js/cldr/unresolved.js"></script>
    <script type="text/javascript" src="../artifacts/js/globalize.js"></script>
    <script type="text/javascript" src="../artifacts/js/globalize/message.js"></script>
    <script type="text/javascript" src="../artifacts/js/globalize/number.js"></script>
    <script type="text/javascript" src="../artifacts/js/globalize/currency.js"></script>
    <script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>-->

    <!--
    <script type="text/javascript" src="../artifacts/js/dx-exceljs-fork.min.js"></script>
    <script type="text/javascript" src="../artifacts/js/FileSaver.min.js"></script>
    <script type="text/javascript" src="../artifacts/js/jszip.min.js"></script>
    <script type="text/javascript" src="../artifacts/js/jspdf.umd.min.js"></script>
    <script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
    -->

    <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
    <script type="text/javascript" src="./themeSelector.js"></script>
    <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
</head>
<body class="dx-surface">
    <div role="main">
        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>

  
        <div class="dx-viewport demo-container">
            <div id="gridContainer"></div>
        </div>
    
        <script>
$(function(){
   
    $(function(){
   $("#gridContainer").dxDataGrid({
       showBorders: true,
    //    dateSerializationFormat: null,
       dataSource: {
           store: {
               type: "odata",
               url: "https://services.odata.org/Experimental/Northwind/Northwind.svc/Orders",
               version: 4,
                // deserializeDates: true,
               fieldTypes: {
                   ShippedDate: 'String'
               }
           },
       },
        filterRow: {
           visible: true
       },
       columns: [
           { dataField: "ShippedDate", dataType: "datetime"}
       ]
       
   });
});
});
        </script>
    </div>
</body>
</html>

dmalykh-devexpress avatar Oct 30 '25 10:10 dmalykh-devexpress