Using fetch method inside Kendo UI grid.template

Question

How to return value from .fetch() method inside grid.template ?

$("#grid-single-user-groups").kendoGrid({
        dataSource: assignedUsersDataSource,
        toolbar: ["create"],
        columns: [
          {
            field: "UserID", width: "100%",
            editor: userDropDownEditor,
            template: function(userID) {
              //here I can return everything, and its visible in grid cell
              //return "BAR"
              allUsersDataSource.fetch(function() {
                //Here everything is UNDEFINED
                return "FOO";
                var data = this.data();
                console.log(data.length);
                for (var idx = 0, length = data.length; idx < length; idx++) {
                  console.log(data.length); //show right length
                  console.log(data[idx].UserName);// //show right UserName
                  if (data[idx].UserNameID === userID.UserID) {
                    return userID.Login; //UNDEFINED
                    //return "foo"; //UNDEFINED
                  }



              })

edit:

allUsersDataSource is Kendo DataSource:

  var allUsersDataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: API_URL + "frank/getusers",
        dataType: "json"
      }
    },
  });

results JSON:

[{"UserNameID":"2","UserName":"foo","Surname":"foo2","Login":"foo3","GroupName":"admin"},]

edit2:

trying with read() function instead od fetch, with below code:

    template: function(userID) {
      allUsersDataSource.read().then(function() {
        var view = allUsersDataSource.view();
        console.log(view[0].Login)// displays right Login
        return view[0].Login; // displays "undefined" in grid cell
      });
    }

edit3: My entire code where I whant to use DropDown inside Grid cell:

  var allUsersDataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: API_URL + "frank/getusers",
        dataType: "json"
      }
    },
  });

  allUsersDataSource.fetch(function() {
    allUsers = allUsersDataSource.data();
  })

  var assignedUsersDataSource = new kendo.data.DataSource({
    transport: {
      read:{
        url: API_URL+"frank/getassignedusers/"+documentId,
        dataType: "json"
      },
      create: {
        type: "POST",
        url: API_URL+"frank/addusertodocument",
        dataType: "json"
      },
      destroy:{
        type: "POST",
        url: API_URL+"frank/removeuserdocument",
        dataType: "json"
      },
    },
    pageSize: 4,
    schema: {
      model: {
        fields: {
          UserName: { editable: false, nullable: true },
          Surname: { editable: false, nullable: true },
          UserID: { field: "UserID", defaultValue: 1 },
          GroupName: { editable: false, nullable: true },
        }
      }
    }
  });

  $("\#grid-single-user-groups").kendoGrid({
    dataSource: assignedUsersDataSource,
    filterable: true,
    scrollable: false,
    toolbar: ["create"],
    pageable: true,
    columns: [
      {
        field: "UserID", width: "100%",
        editor: userDropDownEditor,
        title: "Agent",
        template: function(userID) {
            for (var idx = 0, length = allUsers.length; idx < length; idx++) {
              if (allUsers[idx].UserNameID === userID.UserID) {
                return userID.Login;
              }
            }
        }
      },
      { command: "destroy" }
    ],
    editable: true,
    remove: function(e) {
      console.log("Removing", e.model.name);
    }
  });

  function userDropDownEditor(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
      dataTextField: "Login",
      dataValueField: "UserNameID",
      filter: "contains",
      dataSource: allUsersDataSource
    })
  }

JSON DataSources - assignedUsersDataSource:

[{"UserID":"198","UserName":"Paw","Surname":"yui","Login":"ddz","GroupName":"ddd"},...]

JSON DataSources - allUsersDataSource:

[{"UserNameID":"198","UserName":"Paw","Surname":"yui","Login":"ddz","GroupName":"ddd"},...]

edit4: corrected sample datasource:

   var assignedUsersDataSource = new kendo.data.DataSource({
      data: [{"UserID":"198","UserName":"Paw","Surname":"Mu","Login":"pc","GroupName":"ad"}]
    });

     var allUsers = new kendo.data.DataSource({
      data: [{"UserNameID":"198","UserName":"Paw","Surname":"Mu","Login":"pc","GroupName":"ad"},{"UserNameID":"199","UserName":"Jakub","Surname":"Ch","Login":"jc","GroupName":"ki"}]
    });

Answer 1

So to avoid cluttering up the comments here is a possible answer to your problem:

http://dojo.telerik.com/INukUVoT/4

If you now select the item from the dropdown it is changing the id as it retains the last selected item in the selection when you go in and out of it. The reason the name stays the same is a simple one. It's looking in the wrong place for the value to display.

You are simply doing the following:

Look at all the values in the allusers store and then if i get a match of id's just show the value in the model's Login value rather than the value that was found in the data item in the Login.

So you are currently going through a needs loop. you literally could change your template to:

template: "#=data.Login#" rather than having to loop around.

what you seemingly want to do is have one column which is a user object or defined as an id either way will work as you can see in my new examples.

the first grid is binding the UserID property to the grid and then presenting back the value from the dropdown's datasource (you need to ensure that you set the valuePrimitive property to true so it binds only the value and not the object.

the second grid binds the full object and just so you see what is being bound i am stingify'ing the object and putting that into the grid.