Kendo Grille - Dynamique aggregrate modèle de pied de page de la valeur

Je suis en train de construire une grille qui a besoin d'avoir une somme dans le pied de page, mais le bâti de la somme globale n'est pas tout à fait à mes besoins.

Comme un exemple, dire que je suis la construction d'une grille avec une liste de produits que je vends. J'ai aussi un domaine qui dit "Éligibles à l'escompte". Je veux afficher une somme des prix des produits, mais seulement pour les éléments qui sont admissibles à des rabais.

Idéalement, j'aimerais être en mesure de passer dans une fonction comme ci-dessous, mais je ne pense pas que le Kendo grille prend en charge.

function(seed, model){
  if(model.EligibleForDiscount === true){
      return seed.Price + model.Price;
  }

  return seed.Price;
}

Il devra également être automatiquement actualisé lors de mises à jour de la grille.

Est la seule façon de le faire manuellement gérer les événements sur la grille et l'utilisation de l'aide de jQuery pour mettre à jour le modèle de pied de page?

InformationsquelleAutor Makotosan | 2013-09-09

kendo-grid kendo-ui

Essayez L'Exemple Ci-Dessous:

$("#SearchDetails").kendoGrid({
        scrollable: true,
        resizable: true,
        sortable: true,
        pageable: false,
        navigatable: true,
        filterable: false,
        groupable: true,
        selectable: "row",
        schema: {
            fields: {
                Duration: { type: "number" }
            }                      
        },
        columns: [
                { title: ' Name', field: 'CustName'},
                { title: ' Event Name', field: 'ServiceName'},
                { title: 'Resource Name', field: 'ResourceName', footerTemplate: '<span style=\'float:right;\'>Total</span>' },
                { title: 'Duration(Min)', field: 'Duration', template: '<span style=\'float:right;\'>#=Duration#</span>', aggregates: 'sum', footerTemplate: '<span id=\'footerPlaceholder\' style=\'float:right;font-weight: bold;\'>#=calc(sum)#</span>' },
                { title: 'Total Amount (' + currencySymbol + ')', field: 'TotalAmount', template: '<span style=\'float:right;\'>#=TotalAmount#</span>', aggregates: 'sum', footerTemplate: '<span style=\'float:right;font-weight: bold;\'>#=kendo.toString(sum,\'n\')#</span>' }
        ],
        dataSource: {
            data: viewModel.AppintDetails(),
            aggregate: [{ field: 'Duration', aggregate: 'sum', format: 'n' }, { field: 'TotalAmount', aggregate: 'sum', format: 'n' }]
        }
    });

Ci-dessous qui nous ont permis de créer une fonction dans la section html

<script type="text/javascript">
    function calc(val) {
        var hour = Math.floor(val /60);
        var min = val % 60;
        val = hour + ":" + min + " hrs";
        return val;
    }
</script>

je suis juste en utilisant pour afficher la Durée totale dans le bon Format de date.Ce code fonctionne pour moi...
Ci-dessous la Grille de Montrer ce...détail
Kendo Grille - Dynamique aggregrate modèle de pied de page de la valeur

InformationsquelleAutor Sankar

1

Malheureusement, le Kendo DataSource n'offre pas un moyen d'ajouter des fonction d'agrégation, mais vous pourriez probablement accomplir cela en utilisant simplement une colonne personnalisée footerTemplate comme:
```
var gridDataSource = new kendo.data.DataSource({...});

window.calculatePriceAggregate = function () {
    var data = gridDataSource.data();
    var total = 0;
    for(var i = 0; i < data.length; i++) {
        if (data[i].EligibleForDiscount === true) {
            total += data[i].Price;
        }
    }
    return total;
};

$("#grid").kendoGrid({
    data: gridDataSource,
    ...
    columns: [
        {
            field: 'Price',
            footerTemplate: '#=window.calculatePriceAggregate()#'
        }

    ]
});
```
- Cela ne fonctionne que pour le courant de chargement de la page, un résumé de toutes les pages?
- .data() serait de renvoyer les données de toutes les pages si serverPaging est éteint. Si vous faites du serveur de pagination côté, alors le client ne peut pas faire le total. Vous devez calculer sur le serveur, puis le retourner au client. Vous pouvez utiliser le DataSource.schema.data fonction de tirer toutes les agrégats personnalisés à partir d'un serveur de réponse.
InformationsquelleAutor CodingWithSpike

Ou d'autre utilisation, comme ce code...

 $("#grid").kendoGrid({

        scrollable: true,
        sortable: true,
        pageable: true,
        navigatable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        dataSource: {
            data: viewModel.UserWithoutGUID(),
        },
        groupable: false,
        selectable: "row",
        columns: [
               { title: "ID", field: "ResourceID", template: '<span>#= ResourceID #</span> <input type="hidden" value="#= ResourceID #"/>', width: 40 },
               { title: "Photo", filterable: false, field: "Image", template: '<span class="image"><img id="#=ResourceID #" height="50" width="50" src="#=Image#" onerror="#=LoadDefaultImage()#"/></span>', width: 40 },
               { title: "Name", field: "Name", width: 100 },
               { title: "Email", field: "Email", width: 100 },
               { title: "Mobile", field: "Mobile", width: 100 }
        ]

    });

LoadDefaultImage = function () {
    return "null";
}

je suis ici, le chargement d'une image via la liaison de modèle par l'appel de cette fonction.

InformationsquelleAutor Sankar

Bonjour, je suis en retard, mais si ça peut aider quelqu'un.

J'ai été confronté au même problème une fois et j'ai mis en place une solution qui peut vous aider à utiliser des fonction d'agrégation dans groupFooterTemplate.

Lien vers le projet ici

JS:

function myAggregate(data){
 //Data here is a list of data by group (brilliant right! :-) )
 //Do anything here and return result string
}

var grid = $('#grid').kendoGrid({
  ...
  columns: [
    { field: '', title: '', groupFooterTemplate: myAggregate
  ]
  ...
});

HTML:

<!DOCTYPE html>
<html>
  <head>
    <!-- YOUR CSS HERE -->
  </head>
  <body>
    ...
    <div id="#grid"></div>
    ...
    <script>//jQuery here </script>
    <script>//kendo.all.min.js here </script>
    <script src="kendo.aggregate.helper.js"></script>
  </body>
</html>

InformationsquelleAutor user3190297

Vous devez vous connecter pour publier un commentaire.