web-dev-qa-db-fra.com

Comment lier des données à une grille kendoui à partir d'une requête ajax?

J'ai un datepicker et une grille sur une page. Je veux que la grille soit remplie en fonction de la date dans le sélecteur de date. J'ai fait cela avec une grille Telerik mvc utilisant grid.dataBind.

var grid = $('#Grid').data('tGrid');
var pDate = document.getElementById('DatePicker').value;
$.ajax(
{
  type: 'POST',
  url: '/Home/AccountSummary/',
  dataType: 'json',
  data: { date: pDate },
  success: function (result) {
    grid.dataBind(result);
  }
});

Maintenant, je veux faire la même chose sauf avec la grille de Kendoui. Je sais que je dois obtenir la grille en utilisant $('#Grid').data('kendoGrid'). Mais comment lier mon résultat à la grille?

jquerytelerikkendo-ui
12
Daniel

En supposant que la variable de résultat contienne un tableau d'objets javascript et qu'elle contienne des données pour le même nombre de colonnes que la marque d'origine.

c'est à dire. result = [{"AccountId":1,"Name":"AAA"},{"AccountId":2,"Name":"BBB"}];

Essayez ce qui suit:

$.ajax(
{
    type: 'POST',
    url: '/Home/AccountSummary/',
    dataType: 'json',
    data: { date: pDate },
    success: function (result) {
        $("#Grid").data("kendoGrid").dataSource.data(result);
    }
});
20
Igorrious

Vous pouvez aussi le faire de cette façon:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function(options) {
            $.ajax({
                type: "POST",
                url: "Controller/Handler",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({key: "value"}),
                success: function(data) {
                    options.success(data);
                }
            });
        }
    }
});

Ensuite, liez-le à la grille:

var grid = $("#grid").kendoGrid({
    dataSource: dataSource
}

De cette façon, vous pouvez ajouter le reste des actions CRUD à votre transport et vous aurez tout votre code au même endroit.

10
phyrisrose

Vous pouvez lier les résultats Json à la grille. Et aussi vous pouvez passer Model si vous en avez besoin. Voir l'extrait de code ci-dessous, par exemple.

Voir ici pour plus de détails.

$('#FindBtn').click(function (e) {
    e.preventDefault();
    var UserDetails =
    {
        "FirstName": document.getElementById('FirstName').value,
        "LastName": document.getElementById('LastName').value,
    };
    $.ajax({
        url: "SearchJsonRequest",
        type: 'POST',
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(UserDetails),
        dataType: "json",
        success: function (data) {
            var grid = $('#AssociateSearch').getKendoGrid();
            grid.dataSource.data(data);
            grid.refresh();
        }
    });
    return false;
});
3
Kiran

Etendre Igorrious ... Cette réponse exacte ne m'a pas aidé mais m'a amené à une réponse.

Ce qui a fonctionné pour moi:

$.ajax(
  {
    type: 'POST',
    url: '/Controller/Action',
    data: {
      paramKey: paramValue
    },
    success: function (result) {
      $("#my-grid").data("tGrid").dataBind(result);
    }
});

Si cela ne vous aide pas, effectuez un débogage JavaScript pour savoir pourquoi certains éléments de la chaîne [$("#my-grid")] . [data("tGrid")] . [dataBind] ont value == 'undefined'.

0
ancajic