Change/update/edit data programmatically

[William Morgenweck]

Since I am moving over from another company products I have the need to read the grid row by row, take the value that is in a cell add that value to a web api call to a totally different company, get the results back as a JSON object and parse it to take out the elements that I need and write it back to the same row but a different cell.  The other grid I was using allowed me to 

                    for (let i = 0; i < rowscount; i++) {                    

                    var data = $('#myGrid').Grid('getrowdata', i); 

the row data would be the array of the row cells. then I would put the data into a cell using 

                    $("#myGrid").Grid('setcellvalue', i, "Pending", pmids);

and move to the next row.  The value would show up in the cell so the enduser could see the progress.

How would I do this with Syncfusion's Vue Grid?  Would I read the datasource and make changes there? If so would the changes show up immeditly? 

I looked at the Grids API but could not figure out what needs to be done.  

I need to read each row in the grid and get the person's ID number.  Send that to a Web API and get back the comma separated Article ID's that that person has written and put then into a cell and move to the next.  Normally I can do 100 rows in about 10 seconds.

Thanks for the help.

[Pavithra Subramaniyam]

Hi William, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement. We suggest you to use the “currentViewData” property of Grid, to get all the currently viewing Grid row’s data. And use the setCellValue() method of Grid to set the value for a cell in Grid. We have prepared a sample in which we will be having two buttons. One button will fetch the currently viewing grid row’s data, and the other will change a cell value in Grid. Please refer the sample from the link below, 

Sample : https://plnkr.co/edit/yJ9uUKx3uE2R4oKvnleE?p=preview 

 

Documentation :  

https://ej2.syncfusion.com/vue/documentation/api/grid/#currentviewdata 

https://ej2.syncfusion.com/vue/documentation/api/grid/#setcellvalue 

 

  methods:{ 

    GetRows:function(){ 

      alert('The row data count is : '+ this.$refs.grid.$el.ej2_instances[0].currentViewData.length); 

    }, 

    Setcell:function(){ 

      this.$refs.grid.$el.ej2_instances[0].setCellValue(this.$refs.grid.$el.ej2_instances[0].currentViewData[0].OrderID,'CustomerID','Changed value'); 

      alert("changed the first row's second cell value"); 

    } 

  } 

 

We would also like to suggest you to refer to the following general Vue documentations for Grid. 

Online Demos : https://ej2.syncfusion.com/vue/demos/#/material/grid/grid-overview.html 

UG Docs            : https://ej2.syncfusion.com/vue/documentation/grid/ 

API Docs           : https://ej2.syncfusion.com/vue/documentation/api/grid/ 

 

Please get back to us if you need further assistance. 

Regards, 

Pavithra S. 

[William Morgenweck]

Thank you for the sample and I make a few changes and saved it at https://next.plnkr.co/edit/WrLOKIofeTDN2gow I added paging and it seems that I can only get and set to visible rows- is that correct?   I tried to read more documentation on paging at https://ej2.syncfusion.com/vue/documentation/api/grid/#pagesettings-pagesettingsmodel but that seems to be a bad page  -- How would I read the current page settings (in a function) then set the items per page to All-  then I'd run the process-- and after the process is done reset the items per page to the way it was?

Are there any samples for the API? I went to all three of the links you included and even after going over them again I still could nor figure how to set a cells value without your example.  If I search for it in the API documentation I get 

Vue Grid | API | Syncfusion Documentation

https://ej2.syncfusion.com/vue/documentation/api/grid/

setCellValue. Updates particular cell value based on the given primary key value. Primary key column must be specified using columns.isPrimaryKey property.

Search for setcellvalue on Google

and searching at Google is a waste of time since most of the Vue components are so new. 

When it takes  this.$refs.grid.$el.ej2_instances[0].setCellValue(this.$refs.grid.$el.ej2_instances[0].currentViewData[4].OrderID,'CustomerID','Changed value');

to set the value you can see how useless the documentation is.

[Pavithra Subramaniyam]

Hi William, 

 

Query : I added paging and it seems that I can only get and set to visible rows- is that correct?  

Yes, you can get only the currently visible records only. We have analyzed your requirement, you can enable or disable paging in Grid programmatically by setting the value for “allowPaging” property of Grid. We have modified the sample, in which in a button click we will be dynamically enable/disable the pagination for Grid. 

Sample : https://next.plnkr.co/edit/rkvM3h5rxotiCsQg 

 

 

    paging:function(args){ 

      if(this.$refs.grid.$el.ej2_instances[0].allowPaging){ 

       this.$refs.grid.$el.ej2_instances[0].allowPaging = false; 

      } 

      else{ 

        this.$refs.grid.$el.ej2_instances[0].allowPaging = true; 

      } 

    }, 

 

 

We would like to suggest you to refer to the following documentation links for more details on paging, 

Documentations :  

https://ej2.syncfusion.com/vue/documentation/grid/paging/ 

https://ej2.syncfusion.com/vue/demos/#/material/grid/paging.html 

 

We would also like to inform you that, the API documentations have included only definition of the API available for Grid. But, we have considered your suggestion and we have logged a API documentation improvement task based on your suggestion. We will complete this and will refresh it online in any of our upcoming releases. Until then we appreciate your patience. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.