Question

I want to display Text for my ForigenKey columns instead of numeric values. There are a lot of examples to retrieve TextMember by comparing ID but they are not working in my case. I just started to use Kendo ui so dont know much about it

Here is the 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" }],

                });


            });

Teacher DropDown DataSource

teacher = new kendo.data.DataSource({

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

    schema: {
    data : "Teacher"
         }

    }); 

// Teacher Editor

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

Different approaches i found and tried to Get Teacher Name

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;
            } 

It seems like dataSource (teacher) is not having any value.
PHP code is working perfectly.
Please Help if you have any idea whats wrong with my code.

Thanks !!

Answer 1

You are right, teacher DataSource does not have any data because you are defining how to get the data (that’s what you do with the DataSource) but you are not reading it.

Add:

teacher.read();

for manually forcing the data read.

NOTE: This is something that happens magically when you have a Grid, ListView,… because these widget do it for you but this time, for displaying your grid you need to read it in advance since it is invoked from a JavaScript function (KendoUI grid code doesn’t know anything about what you have in the function getTeacherName other than the name).