DataSource of Grid not reacting to changes of its dropdown cell in Kendo UI

4 posts, 0 answers
  1. Bartlomiej
    Bartlomiej avatar
    6 posts
    Member since:
    Feb 2016

    Posted 30 Aug 2018 Link to this post

    I'm using DropdownList inside Grid cell. After changes in Grid its DataSource.parameterMap and transport are not called (console.log not printing logs).

    allUsersDataSource.fetch(function() {
       allUsers = allUsersDataSource.data();
     })
     
     var assignedUsersDataSource = new kendo.data.DataSource({

        batch: true,

        // autoSync: true,

       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,
               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);

         // if(e.action === "add"){
           // assignedUsersDataSource.sync();
           //

    }

       },
       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: " ", 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:
               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");
           }
         }
       })
     }

    I want to send data in real time and not using save changes button to entire grid.

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 03 Sep 2018 Link to this post

    Hello Bartlomiej,

    If you want the Grid to save changes made to its cells immediately after closing the cells, then you need to set autoSync: true in the DataSource. I see you have currently disabled this option. Is there a reason for this?

    I tried enabling autoSync and using a DropDownList editor like yours in this Dojo and it works as expected:
    https://dojo.telerik.com/efaTADeN 

    There is a side effect with the data because I am editing the same data table that I am taking the dropdown values from, but this is not related to the Grid functionality.

    Is your Grid behaving differently from the example and could you explain in a bit more detail what is different.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Bartlomiej
    Bartlomiej avatar
    6 posts
    Member since:
    Feb 2016

    Posted 05 Sep 2018 Link to this post

    I can't implement this in my project. Could You use two datasources for both grid and dropdown?
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 07 Sep 2018 Link to this post

    Hi, Bartlomiej,

    Having a different data source for a Kendo UI DropDown Editor is actually the standard scenario and it works well. You can see an example in our official demos:

    https://demos.telerik.com/kendo-ui/grid/editing-custom

    I also modified the shared Dojo from Tsvetina so that you can see that with a separate data source and different dataValueField and dataTextField names, it still works well.

    https://dojo.telerik.com/@bubblemaster/aGijUfAG

    Could you modify the provided Dojo in such a way that it demonstrates the issue which you are experiencing in your application?

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top