如何在Kendo UI Grid中更改Grid数据后如何强制唤起DataSource.parameterMap?

时间:2018-08-28 17:10:47

标签: kendo-ui telerik kendo-grid

在我的示例中,我在Grid单元中使用了DropdownList。

我可以从下拉菜单中选择项目,对其进行编辑,然后我可以删除行,但是在所有更改之后,DataSource.parameterMap处于休眠状态,并且服务器与DataSource之间没有传输。

当不使用toolbar: ["create", "save"]选项但仅使用toolbar: ["create"]配置网格时,会出现此问题。我想实时发送更改。

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

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

  var assignedUsersDataSource = new kendo.data.DataSource({
    transport: {
      read:{
        url: API+"nk/getassignedusers/"+documentId,
        dataType: "json"
      },
      create: {
        type: "POST",
        url: API+"nk/addusertodocument",
        dataType: "json"
      },
      update: {
        type: "POST",
        url: API+"nk/editusertodocument",
        dataType: "json"
      },
      destroy:{
        type: "POST",
        url: API+"nk/removeuserdocument",
        dataType: "json"
      },
      parameterMap: function(data, operation) {
        console.log ("parameterMap");
        if (operation === "destroy" ) {
          console.log("!!!!!!!!!!!!!!!destroy", data.models)
        }

        if (operation === "create" && data.UserID) {
          console.log("!!!!!!kendo.stringify(data.models)", kendo.stringify(data.models))
          console.log ("parameterMap: data.models: ",data.models);
          console.log("parameterMap: data.UserID: ", data.UserID)
          console.log("parameterMap: documentId: ", documentId)
          return {
            models: kendo.stringify(data.models),
            user_id: data.UserID,
            document_id: documentId,
            api_key: '1aa53f75-55c8-41a7-8554-25e094c71b47',
            user: user
          };
        }
      }
    },
    change: function(e) {
      console.log("!!!!!!change: e.action:: " + e.action);
      console.log("!!!!!!change: e.action:: ", e);
      console.log("!!!!!!change: e.action:: ", e.models);
      console.log("!!!!!!change: e.action:: ", e.UserID);
    },
    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 },
        }
      }
    }
  });

  var _grid = $("\#grid-single-user-groups").kendoGrid({
    dataSource: assignedUsersDataSource,
    filterable: true,
    scrollable: false,
    // toolbar: ["create", "save"],
    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 allUsers[idx].Login;
            }
          }
        }
      },
      { command: [ "destroy"], title: "&nbsp;", width: "250px" }
    ],
    editable: {mode: "incell"},
    save: function(e) {

      if (e.values.UserID !== "") {
        if (e.values.UserID !== e.model.UserID) {
          console.log("!!!UserID is modified");
        }
      } else {
        e.preventDefault();
        console.log("UserID cannot be empty");
      }

      if (e.values.UserName !== "") {
        if (e.values.UserName !== e.model.UserName) {
          console.log("!!!UserName is modified");
        }
      } else {
        e.preventDefault();
        console.log("UserName cannot be empty");

      }


    },
    saveChanges: function(e) {
      if (!confirm("Are you sure you want to save all changes?")) {
        e.preventDefault();
      }else{
        console.log("!!!!confirmeddddddd", documentId)

        $.ajax({
          url: API+"nk/removeuserdocument",
          type: 'POST',
          dataType: "json",
          data: {
            api_key: '1aa53f75-55c8-41a7-8554-25e094c71b47',
            user: user,
            documentId: documentId
          },
          success : function(response) {
            console.log("Pomyslnie usunięto wszystkich użytkowników.", response)
          },
          error: function(xhr, status, error) {
            alert(xhr.responseText);
            var err = eval("(" + xhr.responseText + ")");
            console.log("NIE usunięto użytkowników.", err.Message)
          }
        });
      }
    },
    remove: function(e) {
      console.log("!!!!!Removing", e.model.UserID);
    },

    cellClose: function(e){
      console.log('Closing Cell Edit e::', e);
      console.log('Closing Cell Edit e.type::', e.type);
      console.log('Closing Cell Edit e.container::', e.container);
      console.log('Closing Cell Edit e.model::', e.model);
      console.log('!!!! Closing Cell Edit e.model.UserID::', e.model.UserID);
      console.log('Closing Cell Edit e.model.isNew()::', e.model.isNew());
      console.log('Closing Cell Edit e.sender ::', e.sender );
      e.container.find("input[name=id]")
    }
  });

  function userDropDownEditor(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
      dataTextField: "Login",
      dataValueField: "UserNameID",
      filter: "contains",
      dataSource: allUsersDataSource,
      valuePrimitive:true,
      select: function(e) {
        if (e.item) {
          var dataItem = this.dataItem(e.item);
          console.log("event :: select (" + dataItem.Login + " : " + dataItem.UserNameID + ")");
        } else {
          console.log("nie jest dobrze");
        }
      }
    })
  }

如果为网格配置了选项保存:toolbar: ["create", "save"],并显示“保存更改”(针对网格中的所有更改),则单击此按钮将为网格中的每一行调用parameterMap,但我遇到了新问题:现在我需要删除与此网格相关的数据库数据并再次创建所有数据,这将导致一个问题:(在删除与网格相关的所有数据库数据之后),用于创建新行时,它向服务器(对于每个网格行)发送多个发布请求一方面,服务器在持久存储此新数据方面存在问题;例如,在具有3行的相同网格中,一次保存保存更改可保存1行,其他时间保存2行,另一时间保存3或0行。

0 个答案:

没有答案