web-dev-qa-db-fra.com

Tri par défaut de la colonne de source de données locale de la grille de l'interface utilisateur de Kendo

Essayer de définir une colonne de tri par défaut sur ma grille d'interface utilisateur de kendo à partir d'une source de données locale. J'ai lu partout que je devrais mettre:

sort: { field: "price", dir: "desc" }

sur la source de données. J'ai essayé cela et cela ne fonctionne toujours pas (voir en bas de l'exemple suivant).

Voici mon code dans son intégralité, où vais-je me tromper?

$('#grid').kendoGrid({
                dataSource: [
                    {
                        date: "Feb 13 2014",
                        price: 5,
                    },
                    {
                        date: "Feb 15 2014",
                        price: 7,
                    },
                    {
                        date: "Feb 12 2014",
                        price: 6,
                    }
                ],
                height:500,
                sortable: true,
                pageable: false,
                columns: [
                    {
                        field: "date",
                        title: "Date"
                    },
                    {
                        field: "price",
                        title: "Price",
                    }
                ],
                sort: {field: "price", dir: "desc"}
            });
kendo-grid
28
jonnow

Vous définissez la ligne sort au mauvais endroit. Vous le mettez comme l'une des propriétés de la grille, mais c'est (comme vous l'avez dit) l'une des propriétés de la source de données.

Mettez-le en tant qu'enfant de la propriété de source de données:

$('#grid').kendoGrid({
    dataSource: {
        data: [{
            date: "Feb 13 2014",
            price: 5,
        }, {
            date: "Feb 15 2014",
            price: 7,
        }, {
            date: "Feb 12 2014",
            price: 6,
        }],
        sort: {
            field: "price",
            dir: "desc"
        }
    },
    height: 500,
    sortable: true,
    pageable: false,
    columns: [{
        field: "date",
        title: "Date"
    }, {
        field: "price",
        title: "Price",
    }],
});

Si cela ne fonctionne toujours pas, je peux vous fournir un jsFiddle pour travailler avec.

48
gitsitgo

si vous utilisez Telerik MVC Control qui est finalement rendu à Kendo UI

.DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("City").Ascending()) // <-- initial sort expression
        .Read(read => read.Action("Index", "Home"))
    )
3
Iman Abidi