Kendo grille date colonne pas formatage

Question

Kendo grille date colonne pas formatage

J'ai un KendoGrid comme ci-dessous et quand je lance l'application, je n'obtiens pas le format attendu pour la colonne 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}" 
        }
    ]
});

Quand je lance ceci, je reçois "2013-07-02T00:00:00Z " dans la colonne DOJ. Pourquoi ce n'est pas le formatage? Une idée?

58

date kendo-grid kendo-ui

demandé sur GibboK 2013-07-10 11:36:52

7 réponses

score 106 · Answer 1

J'ai trouvé cette information et l'ai fait fonctionner correctement. Les données qui m'ont été données étaient au format string, donc j'avais besoin d'analyser la chaîne en utilisant kendo.parseDate avant de la formater avec 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') #"
    },
...

Référence:

score 37 · Answer 2

Il suffit de mettre le type de données de la colonne dans la source de données

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

, puis votre colonne de déclaration:

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

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

score 10 · Answer 3

Essayez de formater la date dans la grille de kendo comme:

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

score 10 · Answer 4

Voici comment vous le faites en utilisant 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 })))
            )

score 5 · Answer 5

L'option que j'utilise est la suivante:

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

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

    return formatedOrderDate;
}

score 3 · Answer 6

Pour autant que je sache, pour formater une valeur de date, vous devez la gérer dans 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
                    },

Si vous suivez l'exemple ci-dessus et que vous renommez simplement des objets comme 'StartDate', cela devrait fonctionner (ignorer ' data: refreshGridParams,')

Pour plus de détails, consultez le lien ci-dessous ou recherchez simplement kendo grid parameterMap et voyez ce que les autres ont fait.

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

score -1 · Answer 7

Cela pourrait être utile:

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

Las etiquetas más populares

Kendo grille date colonne pas formatage

7 réponses