Question

如何从.fetch()内部的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
                  }



              })

编辑：

allUsersDataSource是Kendo数据源：

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

结果为JSON：

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

edit2：

尝试使用read（）函数代替od fetch，并使用以下代码：

    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：我希望在Grid单元中使用DropDown的整个代码：

  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数据源-AssignedUsersDataSource：

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

JSON数据源-allUsersDataSource：

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

edit4：校正后的样本数据源：

   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

因此，为了避免在此处造成混乱，可以解决您的问题：

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

如果您现在从下拉列表中选择项目，则它正在更改ID，因为当您进出项目时，它会保留选择中的最后一个项目。名称保持不变的原因很简单。它在错误的位置寻找要显示的值。

您只需执行以下操作：

查看allusers存储中的所有值，然后如果我得到id的匹配项，则仅在模型的Login值中显示值，而不是在Login的数据项中找到值。

因此，您当前正在经历一个需求循环。您实际上可以将模板更改为：

template: "#=data.Login#"，而不必循环。

您似乎想要做的是有一列作为用户对象或定义为id，无论哪种方式都可以使用，如您在我的新示例中所见。

第一个网格将UserID属性绑定到网格，然后从下拉列表的数据源中显示值（您需要确保将valuePrimitive属性设置为true，以便它仅绑定值而不绑定对象。

第二个网格绑定了整个对象，就这样，您就看到要绑定的对象，这是我将对象束缚起来并将其放入网格中。

在Kendo UI grid.template中使用获取方法

1 个答案: