Использование метода извлечения внутри Kendo UI grid.template - PullRequest
0 голосов
/ 24 августа 2018

Как вернуть значение из .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: Весь мой код, где я хочу использовать 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 DataSources - assignUsersDataSource:

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

JSON DataSources - 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"}]
    });

1 Ответ

0 голосов
/ 24 августа 2018

Таким образом, чтобы избежать беспорядка в комментариях, здесь возможный ответ на вашу проблему:

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

Если вы сейчас выбираете элемент из выпадающего списка, он меняет идентификатор так, как онсохраняет последний выбранный элемент в выборе, когда вы входите и выходите из него.Причина, по которой имя остается прежним, проста.Он ищет неправильное место для отображения значения.

Вы просто делаете следующее:

Просмотрите все значения в хранилище allusers, а затем, если я получу совпадение идентификаторов, просто покажите значение в значении логина модели, а не значениеэто было найдено в элементе данных в логине.

Итак, вы сейчас проходите цикл потребностей.вы буквально могли бы изменить свой шаблон на:

template: "#=data.Login#" вместо того, чтобы зацикливаться.

то, что вы, по-видимому, хотите сделать, - это иметь один столбец, который является объектом пользователя или определен как идентификатор, в любом случае будет работать, как вы можете видеть в моих новых примерах.

первая сетка связывает свойство UserID с сеткой и затем представляет значение из источника данных раскрывающегося списка (необходимо убедиться, что для свойства valuePrimitive установлено значение true, чтобы оно связывало только значение, а не объект.

вторая сетка связывает весь объект, и просто чтобы вы увидели, что связано, я жалею объект и помещаю его в сетку.

...