Development Tip

Kendo 그리드 날짜 열이 형식화되지 않음

yourdevel 2020. 11. 6. 20:44
반응형

Kendo 그리드 날짜 열이 형식화되지 않음


나는이 KendoGrid아래와 같이 내가 응용 프로그램을 실행할 때, 나는의 예상 형식받지 못했습니다 date열을.

$("#empGrid").kendoGrid({
    dataSource: {
        data: empModel.Value,
        pageSize: 10
    },

    columns: [
        {
            field: "Name",
            width: 90,
            title: "Name"
        },

        {
            field: "DOJ",
            width: 90,
            title: "DOJ",
            type: "date",
            format:"{0:MM-dd-yyyy}" 
        }
    ]
});

이것을 실행하면 2013-07-02T00:00:00ZDOJ 열에 " "이 표시됩니다. 왜 포맷이되지 않습니까? 어떤 생각?


이 정보를 찾아서 올바르게 작동하도록했습니다. 나에게 주어진 데이터는 문자열 형식이므로 .txt 형식으로 kendo.parseDate지정하기 전에 사용하여 문자열을 구문 분석 해야했습니다 kendo.toString.

columns: [
    {
        field: "FirstName",
        title: "FIRST NAME"
    },
    {
        field: "LastName",
        title: "LAST NAME"
    },
    {
        field: "DateOfBirth",
        title: "DATE OF BIRTH",
        template: "#= kendo.toString(kendo.parseDate(DateOfBirth, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
    },
...


참조 :

  1. 표 형식 날짜
  2. jsfiddle
  3. 검도 UI 날짜 형식

데이터 소스에 열의 데이터 유형을 넣어야합니다.

dataSource: {
      data: empModel.Value,
      pageSize: 10,
      schema:  {
                model: {
                    fields: {
                        DOJ: { type: "date" }
                            }
                       }
               }  
           }

그리고 당신의 진술 열 :

 columns: [
    {
        field: "Name",
        width: 90,
        title: "Name"
    },

    {
        field: "DOJ",
        width: 90,
        title: "DOJ",
        type: "date",
        format:"{0:MM-dd-yyyy}" 
    }
]

검도 그리드의 날짜 형식을 다음과 같이 지정하십시오.

columns.Bound(x => x.LastUpdateDate).ClientTemplate("#= kendo.toString(LastUpdateDate, \"MM/dd/yyyy hh:mm tt\") #");

다음은 ASP.NET을 사용하여 수행하는 방법입니다.

add .Format("{0:dd/MM/yyyy HH:mm:ss}"); 

    @(Html.Kendo().Grid<AlphaStatic.Domain.ViewModels.AttributeHistoryViewModel>()
            .Name("grid")
            .Columns(columns =>
            {

                columns.Bound(c => c.AttributeName);
                columns.Bound(c => c.UpdatedDate).Format("{0:dd/MM/yyyy HH:mm:ss}");   
            })
            .HtmlAttributes(new { @class = ".big-grid" })
            .Resizable(x => x.Columns(true))
            .Sortable()
            .Filterable()    
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                        .Model(model =>
                        {
                            model.Id(c => c.Id);
                        })       
               .Read(read => read.Action("Read_AttributeHistory", "Attribute",  new { attributeId = attributeId })))
            )

내가 사용하는 옵션은 다음과 같습니다.

columns.Bound(p => p.OrderDate).Format("{0:d}").ClientTemplate("#=formatDate(OrderDate)#");

function formatDate(OrderDate) {
    var formatedOrderDate = kendo.format("{0:d}", OrderDate);

    return formatedOrderDate;
}

As far as I'm aware in order to format a date value you have to handle it in parameterMap,

$('#listDiv').kendoGrid({
            dataSource: {
                type: 'json',
                serverPaging: true,
                pageSize: 10,
                transport: {
                    read: {
                        url: '@Url.Action("_ListMy", "Placement")',
                        data: refreshGridParams,
                        type: 'POST'
                    },
                    parameterMap: function (options, operation) {
                        if (operation != "read") {
                            var d = new Date(options.StartDate);
                            options.StartDate = kendo.toString(new Date(d), "dd/MM/yyyy");
                            return options;
                        }
                        else { return options; }

                    }
                },
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            Id: { type: 'number' },
                            StartDate: { type: 'date', format: 'dd/MM/yyyy' },
                            Area: { type: 'string' },
                            Length: { type: 'string' },
                            Display: { type: 'string' },
                            Status: { type: 'string' },
                            Edit: { type: 'string' }
                        }
                    },
                    data: "Data",
                    total: "Count"
                }
            },
            scrollable: false,
            columns:
                [
                    {
                        field: 'StartDate',
                        title: 'Start Date',
                        format: '{0:dd/MM/yyyy}',
                        width: 100
                    },

If you follow the above example and just renames objects like 'StartDate' then it should work (ignore 'data: refreshGridParams,')

For further details check out below link or just search for kendo grid parameterMap ans see what others have done.

http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap


This might be helpful:

columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");

참고URL : https://stackoverflow.com/questions/17564940/kendo-grid-date-column-not-formatting

반응형