Kendo UI Grid Appel de la source de données Javascript à l'action du contrôleur

Question

Je n'arrive pas à lier ma grille JavaScript kendo pour modéliser les données d'une méthode d'action. Tous les exemples que je vois sont pour la plupart des wrappers MVC et les exemples JavaScript sont tous différents et aucun ne semble fonctionner pour moi.

Voici où je suis ci-dessous. J'ai fait un test générique avec des données statiques qui fonctionne.

var dataSource_Test = new kendo.data.DataSource({ 
     data: [{ LeagueDetailGroupId: "15", GroupName: "Best Team 5"}] 
}); 

Voici l'objet DataSource im essayant de créer avec l'action du contrôleur:

var dataSource = new kendo.data.DataSource({ 
      transport: { 
       read: { 
        url: "@Url.Action("LeagueDetailGroup_Read", "Configuration")?_leagueTypeId=" + leagueTypeId, 
        // i have tried all kinds of variants here, and not sure what to put 
        // my action method is returning json using kendo's DataSourceResult method 
        //contentType: "application/json", 
        type: "POST" 
        //dataType: "odata" 
       }, 
       schema: { 
        data: "Data", // seen this in examples, dunno what it does 
        total: "Total", // seen this in examples, dunno what it does 
        model: { 
         id: "LeagueDetailGroupId", 
         fields: { 
          LeagueDetailGroupId: { editable: false, nullable: true }, 
          GroupName: { validation: { required: true } } 
         } 
        } 
       },   
       // i seen this is an example from telerik but dont understand the use case for it      
       parameterMap: function (data, operation) { 
        // this prints no data before i even start so its a moot point configuring it from products to my stuff at this moment 
        // but not sure what todo here of if i need this anyways 
        console.log(data);   
        if (operation != "read") { 
         // post the products so the ASP.NET DefaultModelBinder will understand them 
         var result = {}; 
         for (var i = 0; i < data.models.length; i++) { 
          var product = data.models[i]; 

          for (var member in product) { 
           result["products[" + i + "]." + member] = product[member]; 
          } 
         } 
         return result;         
        } else { 
         return JSON.stringify(data) 
        } 
       } 
      } 
     }); 

Voici la grille qui fonctionne bien avec l'objet datasouce statique générique.

var grid = $("#leagueEdit_ldg_grid").kendoGrid({ 
         dataSource: dataSource, 
         sortable: true, 
         pageable: true, 
         autobind: false, 
         //detailInit: leagueEdit_ldg_detailInit, 
         dataBound: function() { 
          this.expandRow(this.tbody.find("tr.k-master-row").first()); 
         }, 
         columns: [ 
          { 
           field: "LeagueDetailGroupId", 
           title: "Group Id", 
           width: "110px" 
          }, 
          { 
           field: "GroupName", 
           title: "Group Name", 
           width: "110px" 
          } 
         ] 
        });   

Lecture différée, autobind défini sur false.

dataSource.read(); 

Voici mon action de contrôleur simplifiée. Il fonctionne et obtient des données, et fonctionne très bien pour mes grilles de wrapper MVC.

[Route("LeagueDetailGroup_Read/{_leagueTypeId:int}")] 
    public ActionResult LeagueDetailGroup_Read([DataSourceRequest]DataSourceRequest request, int _leagueTypeId = -1) 
    { 
     DataSourceResult result = 
      _unitOfWork.FSMDataRepositories.LeagueDetailGroupRepository.Get(
       ld => ld.LeagueTypeId == _leagueTypeId 
       ) 
     .ToDataSourceResult(request, 
      ld => new LeagueDetailGroupViewModel 
     { 

      LeagueDetailGroupId = ld.LeagueDetailGroupId, 
      LeagueTypeId = ld.LeagueTypeId, 
      GroupName = ld.GroupName, 
      DateCreated = ld.DateCreated, 
      DateLastChanged = ld.DateLastChanged 
     } 
     ); 
     // data looks fine here 
     return Json(result, JsonRequestBehavior.AllowGet); 
    } 

Actuellement, je suis obtenir cette erreur:

Uncaught TypeError: e.slice is not a function 
    at init.success (kendo.all.js:6704) 
    at success (kendo.all.js:6637) 
    at Object.n.success (kendo.all.js:5616) 
    at i (jquery-3.1.1.min.js:2) 
    at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2) 
    at A (jquery-3.1.1.min.js:4) 
    at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4) 

Answer 1

Il est difficile de savoir sans test, mais laissez-moi savoir comment cela fonctionne.

Changez votre contrôleur de manière à ce que vous retourniez juste une chaîne JSON. Aussi, essayez de supprimer votre schéma et la carte des paramètres et définir votre dataType à json:

var dataSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "@Url.Action("LeagueDetailGroup_Read", "Configuration")?_leagueTypeId=" + leagueTypeId, 
       dataType: "json" 
      } 
     } 
}); 

Pour la grille, je trouve des données JSON simples ne pose généralement pas besoin d'un schéma/modèle défini. Kendo est super agaçant et difficile à déboguer. Dites-moi comment ça se passe.