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

[Bartlomiej]

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.

[Tsvetina]

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

[Bartlomiej]

I can't implement this in my project. Could You use two datasources for both grid and dropdown?

[Alex Hajigeorgieva]

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