We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Modify base grid and upload status/ui only modified row

Hi,

I was looking this thread

https://www.syncfusion.com/forums/124717/how-to-view-imageie-trueicon-png-falseicon-png-for-boolean-values

And based on that example, I created a grid with that kind of columns.

That grid is the base, for load a second grid on double click over a specific item.

What I did in the example that I have attached. The problem I encountered is, how to modify one specific row value in the base grid. I want to upload that row from the second grid and force a repaint on that row only.

I tried to call the row in the base grid from the second one and I got the error:

this. getRowByIndex is not a function. Even if that method is used to change the style in the second row on selectRow.

  1. How can I modify the values of one row in the datasource assigned to the grid?
  2. If I modify the values, the grid will automatically take the changes in the UI?
  3. I don't want to reload all the base grid because until that point the values modified will be in memory. I expect the user to select an update button to store the values in the base grid. 
In the example, the value symbol should change to 4 and subsequently the value in the column symbol on the base grid should be modified too.

Please let me know, how can I achieve this.

Kind regards,

Juan Acosta

P.s: I also attached some pictures for reference.


Attachment: SyncfusionMvcApplication14_3dd6319c.7z

8 Replies

MF Mohammed Farook J Syncfusion Team October 4, 2016 12:59 PM UTC

Hi Juan, 

Thanks for contacting Syncfusion Supports. 


We have validated your reported issue and your provided sample  and we suspect that using Grid instance as in correct.  Please find the screen shot 


 

‘This’ indicates markOriginRow method is not Grid instance. So we suggest to create grid instance when accessing grid methods and properties in outside of grid . please find the code example. 



    function markOriginRow(args) { 
        if (!ej.isNullOrUndefined(rowIndex)) { 
            var gridObj = $("#FlatGrid").ejGrid("instance"); 
            //this.selectRows(rowIndex); 
            //get selected row and assign Symbol value to args and reload that row only to show change. Do not reload the entire grid. 
            gridObj.getRowByIndex(rowIndex[0]).css("color", "red");//error in calling  
        } 
    } 



For your convenience please find the sample: 



Regards, 
J.Mohammed Farook 



JA Juan Acosta October 4, 2016 11:53 PM UTC

Hi Mohammed,

Thank you for your reply. You resolve part of my issue. However, I still need to access and modify the object in the base grid, besides changing his style.

The proper functionality should change the value of the Symbol column to the number 4 and force a reload over that cell so the Symbol change to edit one.

I was trying to access to the object assigned to the datasource of the page. But, I have issues too. I was trying to do this

gridObj.getDataByIndex(rowIndex[0])
then
gridObj.getDataByIndex(rowIndex[0]).Symbol = 4

But, only the initial method show me an error of

ej.web.all.min.js:10 Uncaught TypeError: Cannot read property '3' of null(…)
  getDataByIndex @ ej.web.all.min.js:10
  (anonymous function) @ VM384:1
   markOriginRow @ GridFeatures:135
   rowSelectVersion @ GridFeatures:79
   _trigger @ ej.web.all.min.js:10
   _recorddblClickHandler @ ej.web.all.min.js:10
   (anonymous function) @ ej.web.all.min.js:10
   dispatch @ jquery-1.10.2.min.js:22
    l @ ej.web.all.min.js:10
    e @ ej.web.all.min.js:10
    dispatch @ jquery-1.10.2.min.js:22
    v.handle @ jquery-1.10.2.min.js:22


How can I modify the one of the object in the datasource and reload the changes?
The items in the datasource are connected to observables instances? 
 Because one of the issues is the user needs to mark stuff over the grid and change some properties. Then with a save all button, if he wants persists all the changes. If he decided to avoid the changes, the reload of the screen will clean all the temporal changes.

That's the total functionality. So, I only need to access the underline object connected to the datasource and force a refresh over the grid.

Could you give a hint to achieve this?

Kind regards,

Juan




MF Mohammed Farook J Syncfusion Team October 5, 2016 12:33 PM UTC

Hi Juan, 

We have validated your reported issue, please find the response. 

Query 
Response 

ej.web.all.min.js:10 Uncaught TypeError: Cannot read property '3' of null(…)
  
getDataByIndex @ ej.web.all.min.js:10
  (anonymous function) @ VM384:1 
   markOriginRow @ GridFeatures:135
   rowSelectVersion @ GridFeatures:79
   _trigger @ ej.web.all.min.js:10
   _recorddblClickHandler @ ej.web.all.min.js:10
   (anonymous function) @ ej.web.all.min.js:10
   dispatch @ jquery-1.10.2.min.js:22
    l @ ej.web.all.min.js:10
    e @ ej.web.all.min.js:10
    dispatch @ jquery-1.10.2.min.js:22
    v.handle @ jquery-1.10.2.min.js:22
 

 We cannot reproduce the issue at our end . could you please update replication procedure. Please share the sample if it is possible. 

   
How can I modify the one of the object in the datasource and reload the changes? 
The items in the datasource are connected to observables instances?  
 Because one of the issues is the user needs to mark stuff over the grid and change some properties. Then with a save all button, if he wants persists all the changes. If he decided to avoid the changes, the reload of the screen will clean all the temporal changes. 
 
Grid already support this features through “Batch” editing . please find the online demo link. 




Note : 

This is not meet your requirement , please share the more details about your information. 


  1.Which type of editing used in your sample 



Regards, 
J.Mohammed Farook 



JA Juan Acosta October 6, 2016 12:07 AM UTC

Hi Mohammed,

I was looking the demo for batch editing and it is something I will use for another screen for sure. However, this is not what I need to achieve.

My main problem, it is how to access to the information contained in the grid data source.

In the load of the grid, I have bound the data source with some property in the viewBag:

Grid<SyncfusionMvcApplication14.Models.VisualGridDocument>("FlatGrid")
            .Datasource((IEnumerable<SyncfusionMvcApplication14.Models.VisualGridDocument>)ViewBag.datasource)

Also, I know it is possible to reload the information attached to the datasource in the grid.

Something like this code for instance:

 function GetDocumentHistoryResults(idParent) {
        var obj = $("#GridDocumentDetailsHistory").ejGrid("instance");
        $.ajax({
            type: "GET",
            url: "/DocumentDetails/GetDocumentHistoryResults?IdParent=" + idParent,
            success: function (data) {
                //console.log('Received data ' + data);
                obj.dataSource(data);
            },
            error: function (error) {
                console.log('Received History Error ' + error.responseText);
            }
        });
    }

My point is:

When I double click the second grid in my example, I want to call the main grid then
- Change the main grid row colour (done , txs)
- Change one property of that row that it is the symbol, so the row updates and change is an image in my example.
I tried to get the row information once I recovered the grid reference.
I found one method named getDataByIndex() that I think it will get the data for the specific row.

I have updated the example with the code.

I was thinking some work around and there are not so many. Becuase, the problem is I need to modify the data that is temporally bound to the grid.
If I make a reload and I pass that new parameter, the temp status will be permanent.

But, If you think it is not possible to modify the data in the grid data source once bound. I will make it the other way reloading completely the grid and passing the new symbol value in the controller call.

Kind regards,

Juan



Attachment: SyncfusionMvcApplication14_13faa546.7z


JA Juan Acosta October 6, 2016 01:37 AM UTC

Hi Mohammed,

I also found this thread

https://www.syncfusion.com/forums/124858/template-refresh-for-the-boolean-checkbox-in-batch-edit

that it is kind of similar to what I'm trying to do.

I changed the code inside the function markOriginRow

function markOriginRow(args) {
        if (!ej.isNullOrUndefined(rowIndex)) {
            console.log('args ' + args);
            var gridObj = $("#FlatGrid").ejGrid("instance");           
            gridObj.getRowByIndex(rowIndex[0]).css("color", "red");
            gridObj.setCellValue(rowIndex[0], "Verified", true);
            gridObj.setCellValue(rowIndex[0], "Symbol", args);
            gridObj.setCellValue(rowIndex[0], "Symbol", 4);
            for (var i = 0; i < gridObj.model.currentViewData.length; i++) {
                gridObj.setCellValue(i, "Symbol", 4);//updating each cell of Status to true
            }
            gridObj.getDataByIndex(rowIndex[0]);//error in calling
            gridObj.getDataByIndex(rowIndex[0]).Symbol = args;
            //this.selectRows(rowIndex);
            //get selected row and assign Symbol value to args and reload that row only to show change. Do not reload the entire grid.
        }
    }

Because I think maybe the issue is in the method. However, this method does not work also. I can apply the new value to Symbol in all the cells and it is not changed in the base grid. 

I'll be waiting for you answer.

Kind regards,

Juan Acosta




MF Mohammed Farook J Syncfusion Team October 6, 2016 07:19 AM UTC

Hi Juan, 


We have validated your provided code example, please find the solution . 

We can get the parent Grid data through “getCurrentViewData” method of Grid. Please find the code example. 


    function markOriginRow(args) { 
        if (!ej.isNullOrUndefined(rowIndex)) { 
            console.log('args ' + args); 
            var gridObj = $("#FlatGrid").ejGrid("instance"); 
            gridObj.getRowByIndex(rowIndex[0]).css("color", "red"); 
            undo = $.extend(true, [], gridObj.model.dataSource) 
            gridObj.getCurrentViewData()[rowIndex[0]].Verified = true; 
            gridObj.getCurrentViewData()[rowIndex[0]].Symbol = 4;    
            gridObj.getCurrentViewData()[rowIndex[0]]//get parent Data 
            gridObj.getCurrentViewData()[rowIndex[0]].Symbol = args; 
            
            //this.selectRows(rowIndex); 
            //get selected row and assign Symbol value to args and reload that row only to show change. Do not reload the entire grid. 
        } 
    } 


Note : “getDataByIndex” and “setCellValue” method is only use for when enable batch editing in Grid.  


We have achieved your requirement as “parent grid can save the changes based on its confirmation”. Please find the code example. 


[create button] 
@(Html.EJ().Button("btn").Text("Save").ClientSideEvents(eve => eve.Click("ConfirmSaveAction"))) 
 
[copy the old data in before performing] 

    function markOriginRow(args) { 
        if (!ej.isNullOrUndefined(rowIndex)) { 
            console.log('args ' + args); 
            var gridObj = $("#FlatGrid").ejGrid("instance"); 
            gridObj.getRowByIndex(rowIndex[0]).css("color", "red"); 
            undo = $.extend(true, [], gridObj.model.dataSource) //copy the parent Grid data in before performing  
        } 
    } 

[Save confirmation] 


    function ConfirmSaveAction() { 
        var gridObj = $("#FlatGrid").ejGrid("instance"); 
        var confirmation = window.confirm("Do you want to save"); 
        if (confirmation) 
            gridObj.refreshContent(); 
        else 
            gridObj.dataSource(undo); 
 
    } 


For your reference. Please find the sample and UG: 




Regards, 
J.Mohammed Farook  



JA Juan Acosta October 6, 2016 09:55 AM UTC

Hi Mohammed,

Thanks for your help. I will integrate the changes in code in the main application and I will let you know if I have problems.

However, the demo is doing exactly what I need to do.

Kind regards,

Juan 


MF Mohammed Farook J Syncfusion Team October 7, 2016 07:33 AM UTC

Hi Juan, 
 
Thanks for you update. 
 
Please let us know if you have any queries. 
 
Regards, 
J.Mohammed Farook  


Loader.
Up arrow icon