Grille de Kendo. Comment afficher dataTextField dans la cellule de Grid au lieu de dataValueField?

Question

Je veux afficher du texte pour mes colonnes ForigenKey au lieu de valeurs numériques. Il y a beaucoup d'exemples pour récupérer TextMember en comparant ID mais ils ne fonctionnent pas dans mon cas. Je viens de commencer à utiliser Kendo ui donc ne sais pas grand-chose

Voici le code:

$(document).ready(function() { 

dataSource1 = new kendo.data.DataSource({ 

     transport: { 
       read: { 
       url: "Data/AttendanceCode/GridSelect.php", 
       dataType: "json", 

          }, 

       update: { 
        url: "Data/AttendanceCode/GridUpdate.php", 
     dataType: "json", 
         type:"GET" 
      }, 

        destroy: { 
        url: "Data/AttendanceCode/GridDelete.php", 
         dataType: "json", 
      type:"POST" 
          }, 

        create: { 
         url: "Data/AttendanceCode/GridInsert.php", 
         dataType: "json", 
       type:"POST" 
          }, 

         }, 

        schema: { 
     data: "data", 

         model: { 
          id: "AttendenceID", 

          fields: { 
           AttendenceID : { editable: false, nullable: true }, 
           TeacherID: { field: "TeacherID", defaultValue: "EIIT0002" }, 
           } 
          } 
         }, 


        }); 



$("#grid").kendoGrid({ 
      dataSource: dataSource1, 

    pageSize: 10, 
      pageable: { 
       refresh: true, 
       pageSizes: true 
        }, 
        editable:{ mode : "popup" }, 
        height: 400, 
     filterable: true, 
        columnMenu: true, 
     sortable: true, 
        reorderable: true, 
        resizable: true, 
        toolbar: ["create"], 

        columns: [ 
         { field:"AttendenceID", title: "Attendence ID", width:"130px" }, 

         { field: "TeacherID", title:"Teacher", width: "100px" , editor: TeacherDropDownEditor, template: "#=getTeacherName(TeacherID)#" }, 

        { command: ["edit", "destroy"], title: "Action", width: "210px" }], 

       }); 


      }); 

Professeur DropDown DataSource

teacher = new kendo.data.DataSource({ 

     transport: { 
     read: { 
    url : "Data/Teacher.php", 
    dataType: "json" } 
       }, 

    schema: { 
    data : "Teacher" 
     } 

    }); 

// Enseignant Editeur

function TeacherDropDownEditor(container, options) { 
    $('<input data-bind="value:' + options.field + '"/>') 
.appendTo(container) 
    .kendoDropDownList({   
    dataTextField: "TeacherName", 
dataValueField: "Service_NO", 
dataSource: teacher 
    }); 
} 

Différentes approches j'ai trouvé et j'ai essayé d'obtenir le nom du professeur

1 -

function getTeacherName(value) { 

      var text = ""; 
    $.each(teacher, function() { 
      if (this.Service_NO == value) { 
      text = this.Name; 
      return false; 
      } 
     }); 
    return text; 
         } 

2 -

function getTeacherName(teacherID) { 

for (var idx = 0, length = teacher.length; idx < length; idx++) 
    { 
    if (teacher[idx].Service_NO === teacherID) 
     {t = teacher[idx].Name;} 
    }     
return t; 
    } 

3 -

function getTeacherName(teacherID) { 
     $.each(teacher, function(key, val) { 
     if(val.Service_NO == tID){ 
      t = val.Name; 
      } 
      }); 
      return t; 
      } 

Il semble que dataSource (maître), est de ne pas avoir une valeur quelconque. Le code PHP fonctionne parfaitement. S'il vous plaît Aidez si vous avez une idée de ce qui ne va pas avec mon code.

Merci!

Answer 1

Vous avez raison, teacher DataSource ne contient aucune donnée car vous définissez comment obtenir les données (c'est ce que vous faites avec DataSource) mais vous ne le lisez pas.

Ajouter:

teacher.read(); 

pour forcer manuellement les données lues.

NOTE: Ce est quelque chose qui arrive comme par magie lorsque vous avez une grille, ListView, ... parce que ce widget de le faire pour vous, mais cette fois-ci, pour l'affichage de votre grille vous devez lire à l'avance depuis il est invoqué à partir d'une fonction JavaScript (le code de grille KendoUI ne sait rien de ce que vous avez dans la fonction getTeacherName autre que le nom).

Answer 2

vous devez config votre champ:

{ field: "nu_status", title: 'Status', values: [ { text: "Active", value: 1 }, { text: "Inactive", value: 0 }]}, 

code