17.1 の enableUTCDates オプションの移行

17.1 以後の igGrid、igHierarchicalGrid および igTreeGrid の日付処理

17.1 バージョン以後、グリッドは enableUTCDates および dateDisplayType の 2 つのオプションで日付を処理します。

enableUTCDates - このオプションは igDateEditor および igDatePicker のオプションと同様です。日付の表示と関係ありません。日付のシリアル化のみを指定します。日付が UTC ISO 8061 文字列またはローカル時間およびタイムゾーン値でシリアル化されるかどうかを指定します。たとえば、GMT の前の 5 時のローカルオフセットを持つクライアントからの「10:00」は、「2016-11-11T10:00:00+05:00」としてシリアル化されます。オプションのデフォルトの 'false' 値の場合です。それ以外の場合、日付は ISO UTC 形式を使用します: "2016-11-11T05:00:00Z"。
dateDisplayType – このオプションは columns 定義の部分で、日付列で使用できます。"local" (デフォルト値) に設定される場合、グリッドは日付をローカルタイムゾーンで描画します。utc" に設定される場合、グリッドは日付を UTC で描画します。デフォルトの Ignite UI for MVC Grid のシナリオを処理するもう 1 つの動作がそのオプションで実装されます。タイムゾーンオフセットのメタデータを持つデータソースが必要です。日付は追加されたオフセット (UTC) で描画されます。これはサーバーで表示される日付をユーザーに表示するためです。dateDisplayType オプションは日付型以外の列に影響せず、無視されます。

注: Ignite UI for MVC Grid が初期化された場合、enableUTCDates がデフォルトで true に設定されます。Ignite UI for jQuery Grid が初期化された場合、オプションがデフォルトで false に設定されます。たとえば、enableUTCDates がデフォルト動作を使用し、Ignite UI for MVC が使用される場合、日付が ISO UTC 形式 ("2016-11-11T05:00:00Z") でシリアル化されます。MVC 以外のシナリオで enableUTCDates を指定しない場合は日付をローカル時間およびゾーン値 ("2016-11-11T10:00:00+05:00") にシリアル化します。

日付の処理を理解するには、日付の保存方法および保存場所が重要です。すべてのレコードおよび (日付などの) 値は igDataSource で保存されます。日付を保存する前に、まだ Date オブジェクトではない場合、igDataSource はそれを Date オブジェクトに変換します。保存された後、グリッドセルに表示されます。この表示は $.ig.formatter によって実行されます。formatter は dateDisplayType オプションに基づいて日付を描画します。

もうひとつの動作変更は、トランザクションログがシリアル化された日付を含みません。すべての日付は Date オブジェクトとして保存し、シリアル化が saveChanges が呼び出したときに渡されたパラメーターのみに適用されます。enableUTCDates オプションはシリアル化の方法を示します。

17.1 以後で、Ignite UI for MVC は以下の形式で日付を送信します。

{
    "testData": {
        "Records": [
            {
                "ProjectId": 0,
                "Name": "Some project",
                "ExpirationDate": "2010-03-13T08:10:10.000Z"
            },
            "..."
        ],
        "Metadata": {
            "timezoneOffset": 7200000,
            "timezoneOffsets": {
                "0": {
                    "ExpirationDate": 10800000
                },
                "..."
            }
        }
    }
}

igGrid、igHierarchicalGrid および igTreeGrid で 16.2 以前の日付処理

enableUTCDates オプションは、グリッドが日付を表示してセルで使用する方法を決定します。

有効な場合、グリッドはクライアントオフセットを無視して UTC 時間を表示します。たとえば、値が 2009-02-15T04:00:00Z の場合、クライアントで GMT+02:00 オフセットされます。その場合、グリッドは 04:00 を使用します。また、並べ替えおよびフィルター機能はこの値を比較操作で使用します。
無効な場合、グリッドはクライアントオフセットを適用してローカル時間を使用します。たとえば、データソースの値が 2009-02-15T04:00:00Z で、クライアントオフセットが GMT+02:00 です。この場合、グリッドは 06:00 を使用します。

注: Ignite UI for MVC Grid が使用された場合、デフォルトで enableUTCDates オプションは有効にされます。それ以外の場合、オプションはデフォルトで無効されます。

注: Ignite UI for MVC がデータソースの処理で使用されたか、データソースがリモートで GridDataSource 属性が使用された場合、タイムゾーンオフセットを持つメタデータが生成されます。

"Metadata": {
    "timezoneOffset": 7200000,
    "timezoneOffsets": {
        "0": {
            "ExpirationDate": 7200000
        },
        "1": {
            "ExpirationDate": 7200000
        },
        ...
        }

各日付に指定のオフセットがあります。タイムゾーンオフセットのメタデータがある場合のデータソース。データソースにサーバータイムゾーンオフセットに関する情報が含まれる場合、igDataSource はオフセットを使用して変換されたデータを生成します。

{
    "testData": {
        "Records": [
            {
                "ProjectId": 0,
                "Name": "Some project",
                "ExpirationDate": "/Date(1268467810000)/"
            },
            "..."
        ],
        "Metadata": {
            "timezoneOffset": 7200000,
            "timezoneOffsets": {
                "0": {
                    "ExpirationDate": 10800000
                },
                "..."
            }
        }
    }
}

データソースはオブジェクトを ExpirationDate のチックおよびこの日付のオフセットのチックの合計として保存します。以下はデータソースでの日付値の表現です:

new Date(1268467810000 + 10800000)

allTransactions() API メソッドから返されたトランザクションはすぐにシリアル化されます。日付がデータソースで更新または追加された場合、トランザクションの値は次の形式になります: /Date(1485881423759)/。 pendingChanges() API メソッドはシリアル化されていない日付オブジェクトを返します。 saveChanges() API メソッドはシリアル化されたトランザクションをサーバーに送信します。

注: 16.2 バージョンで、MVC ラッパーが Microsoft 日付形式 (/Date(1485881423759)/) で日付を送信します。

igGrid、igHierarchicalGrid または igTreeGrid を 16.2 から 17.1 以後へ移行

17.1 以後、igDataSource は Microsoft 日付形式をサポートしません: /Date(1234656000000)/。提供されたデータソースがそのようなデータを含む場合、ISO UTC 形式 "2009-02-15T00:00:00Z" に変更する必要があります。 Ignite UI for MVC が使用される場合、ユーザーによる構成が必要な項目はありません。Ignite UI for MVC は内部で Microsoft 形式を使用していましたが、17.1 以後では ISO UTC 形式で日付を送信します。 17.1 以後のバージョンで UTC 時間を表示:

$('#Grid1').igGrid({
    dataSource: 'http://localhost:3000/testData',
    dataSourceType: 'json',
    responseDataKey: 'Records',
    columns: [
        { key: 'ProjectId', dataType: 'number', headerText: 'Project ID', width: '100px' },
        { key: 'Name', dataType: 'string', headerText: 'Name', width: '150px' },
        { key: 'IsPostponed', dataType: 'bool', headerText: 'Is Postponed?', width: '100px' },
        { key: 'StartDate', dataType: 'date', headerText: 'Start Date', width: '190px', format: 'dateTime', dateDisplayType: 'utc' },
        { key: 'EndDate', dataType: 'date', headerText: 'End Date', width: '200px', format: 'dateTime', dateDisplayType: 'utc' }
    ]
});

16.2 と同じ構成:

$('#Grid1').igGrid({
    dataSource: 'http://localhost:3000/testData',
    dataSourceType: 'json',
    responseDataKey: 'Records',
    enableUTCDates: true,
    columns: [
        { key: 'ProjectId', dataType: 'number', headerText: 'Project ID', width: '100px' },
        { key: 'Name', dataType: 'string', headerText: 'Name', width: '150px' },
        { key: 'IsPostponed', dataType: 'bool', headerText: 'Is Postponed?', width: '100px' },
        { key: 'StartDate', dataType: 'date', headerText: 'Start Date', width: '190px', format: 'dateTime' },
        { key: 'EndDate', dataType: 'date', headerText: 'End Date', width: '200px', format: 'dateTime' }
    ]
});

Ignite UI for MVC 17.1 以後:

@(Html.Infragistics().Grid(Model)
    .ID("Grid1")
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .Columns(column =>
    {
        column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("100px");
        column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px");
        column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("100px");
        column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("150px").DateDisplayType(DateDisplayType.UTC);
        column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("150px").DateDisplayType(DateDisplayType.UTC);
    }
    )
    .PrimaryKey("ProjectId")
    .DataSourceUrl(Url.Action("GetData"))
    .Render()
)

Ignite UI for MVC 16.2 以前:

@(Html.Infragistics().Grid(Model)
    .ID("Grid1")
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .EnableUTCDates(true)
    .Columns(column =>
    {
        column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("100px");
        column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px");
        column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("100px");
        column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("150px");
        column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("150px");
    }
    )
    .PrimaryKey("ProjectId")
    .DataSourceUrl(Url.Action("GetData"))
    .Render()
)

17.1 グリッドでローカル時間を表示:

$('#Grid1').igGrid({
    dataSource: 'http://localhost:3000/testData',
    dataSourceType: 'json',
    responseDataKey: 'Records',
    columns: [
        { key: 'ProjectId', dataType: 'number', headerText: 'Project ID', width: '100px' },
        { key: 'Name', dataType: 'string', headerText: 'Name', width: '150px' },
        { key: 'IsPostponed', dataType: 'bool', headerText: 'Is Postponed?', width: '100px' },
        { key: 'StartDate', dataType: 'date', headerText: 'Start Date', width: '190px', format: 'dateTime', dateDisplayType: 'local' },
        { key: 'EndDate', dataType: 'date', headerText: 'End Date', width: '200px', format: 'dateTime', dateDisplayType: 'local' }
    ]
});

16.2 と同じ構成:

$('#Grid1').igGrid({
    dataSource: 'http://localhost:3000/testData',
    dataSourceType: 'json',
    responseDataKey: 'Records',
    enableUTCDates: false,
    columns: [
        { key: 'ProjectId', dataType: 'number', headerText: 'Project ID', width: '100px' },
        { key: 'Name', dataType: 'string', headerText: 'Name', width: '150px' },
        { key: 'IsPostponed', dataType: 'bool', headerText: 'Is Postponed?', width: '100px' },
        { key: 'StartDate', dataType: 'date', headerText: 'Start Date', width: '190px', format: 'dateTime' },
        { key: 'EndDate', dataType: 'date', headerText: 'End Date', width: '200px', format: 'dateTime' }
    ]
});

Ignite UI for MVC 17.1 以後:

    .ID("Grid1")
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .Columns(column =>
    {
        column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("100px");
        column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px");
        column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("100px");
        column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("150px").DateDisplayType(DateDisplayType.Local);
        column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("150px").DateDisplayType(DateDisplayType.Local);
    }
    )
    .PrimaryKey("ProjectId")
    .DataSourceUrl(Url.Action("GetData"))
    .Render()
)

Ignite UI for MVC 16.2 以前:

@(Html.Infragistics().Grid(Model)
    .ID("Grid1")
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .EnableUTCDates(false)
    .Columns(column =>
    {
        column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("100px");
        column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px");
        column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("100px");
        column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("150px");
        column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("150px");
    }
    )
    .PrimaryKey("ProjectId")
    .DataSourceUrl(Url.Action("GetData"))
    .Render()
)

注: デフォルトの Ignite UI for MVC Grid がサーバー形式で日付を表示します。初期化が Ignite UI for MVC で実行されない場合、デフォルト動作でローカル時間を表示します。

クライアント日付を表示する方法の詳細については、Ignite UI for jQuery コントロールを別のタイムゾーンで使用トピックの「サーバー日付を無視してクライアント側の日付を表示」セクションを参照してください。

オンラインで表示: GitHub

Ignite UI | ヘルプ トピック

17.1 の enableUTCDates オプションの移行

17.1 以後の igGrid、igHierarchicalGrid および igTreeGrid の日付処理

igGrid、igHierarchicalGrid および igTreeGrid で 16.2 以前の日付処理

igGrid、igHierarchicalGrid または igTreeGrid を 16.2 から 17.1 以後へ移行

Ignite UI | ヘルプトピック