This is a migrated thread and some comments may be shown as answers.
DataSource of Grid not reacting to changes of its dropdown cell in Kendo UI
3 Answers 16 Views
This is a migrated thread and some comments may be shown as answers.
Bartlomiej
Top achievements
Rank 1
Bartlomiej asked on 30 Aug 2018, 01:17 PM

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.

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 03 Sep 2018, 08:08 AM
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.
0
Bartlomiej
Top achievements
Rank 1
answered on 05 Sep 2018, 04:40 PM
I can't implement this in my project. Could You use two datasources for both grid and dropdown?
0
Alex Hajigeorgieva
Telerik team
answered on 07 Sep 2018, 02:03 PM
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.
Tags
Grid
Asked by
Bartlomiej
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Bartlomiej
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or