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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DataGrid changing types of objects in its datasource

Thread ID:

Created:

Updated:

Platform:

Replies:

146139 Jul 22,2019 01:35 PM UTC Aug 20,2019 01:57 PM UTC Angular - EJ 2 6
loading
Tags: Grid
Marko Bezjak
Asked On July 22, 2019 01:35 PM UTC

Hello,

response on git is a bit slow so I'm posting my problems on this forum as well.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 25, 2019 01:27 PM UTC

Hi Marko, 

Thanks for contacting Syncfusion support. 

we have validated your reported scenario.  The columns defined in Grid model will not be changed unless if we change the type manually. 
Please find the sample and screenshots for more information. 


Screenshots:  
Before editing: 

 

After Editing:  

 

If you still faced the issue, please get back to us with the following details that will help us to provide the better solution as soon as possible. 

1)Share the complete Grid code 
2)share the data model which is bound to Grid 
3)Please try to reproduce the scenario, in above sample, If possible. 


Regards, 
Thavasianand S. 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 25, 2019 01:40 PM UTC

Hi Marko, 

Please ignore the previous update. 

we have validated your reported scenario.  By default Grid columns value will not be removed while editing. Also we are not able to reproduce the reported issue. 

Please find the sample and screenshots for more information. 


Screenshots:  
Before editing: 

 

After Editing:  

 

To validate further, please get back to us with the following details that will help us to provide the better solution as soon as possible. 

              1) Have you used any adaptors or foreignKey columns 
2)Share the complete Grid code 
3)share the data model which is bound to Grid 
4)Please try to reproduce the scenario, in above sample, If possible. 

Regards, 
Thavasianand S. 


Marko Bezjak
Replied On July 26, 2019 09:56 AM UTC

Hello,

your example doesn't really show anything of what I was saying in my issue. I update your example: https://stackblitz.com/edit/angular-146139-dropdown-6hpf9j?file=app.component.html to show where my problem lies.
To reproduce:
1.) Open Console
2.) As you can see dataSource is now an array of Objects that are of Type Test ([{Test},.... and not [{...},...)
3.) As we start to edit one of the items by double clicking we get ActionComplete log with rowData of type Test which is OK.
4.) after we finish editing by pressing ENTER we get another console.log and if check this.gridObj.currentViewData we can see that the edited object is not of type Test anymore
5.) So when we edit the item again the actionComplete event has rowData of just Object {...}...

Its not consistent and the Object Types Are lost!

I hope my example shows where my problem is. 

Best regards, Marko.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 29, 2019 09:41 AM UTC

Hi Marko, 

Thanks for your update and sharing the sample.  

We are able to understand the issue and reproduce the mentioned case from your given sample. While editing the Grid will not be refreshed. Currentview data will be only extended. So the reference is lost while saving the data. This is the default behavior of Grid. If you want to maintain the type after editing you can refresh the Grid in actionComplete event of the Grid based on requestType as save.   

Please find the below code snippet and sample for more information. 

App.component.ts 
    actionComplete(args) { 
      console.log('actionComplete', args, this.gridObj); 
      if (args.requestType === 'save') { 
        this.gridObj.refresh(); 
      } 
    } 


Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 


Marko Bezjak
Replied On August 13, 2019 01:31 PM UTC

Hello,

I found out where the problem lies that I was talking about. The problem is because you are assigning objects in typeScript which objects are prototype based. And Object.assing does not copy getters and setters... which is logical since the cloned object doesn't have a prototype above it.

for example: 
class myType {
   private _name: string;
   get() { return this._name; }
   set(val: string) {
        this._name = val;
   }

will look like this if console logged:   myObj = myType{ name: "bla bla", _name: "bla bla" }

now if you do this: const dummyObj = {...myObj} and console.log it: dummyObj = { _name: "bla bla"}

which in my case is a big problem since the grid column is bind to a field name and not to _name since it is private...

As you can see if you edit the "Something" column.. the value in edit stage is just not set. since there is no getter in the Object... and the data that was previously inside is lost.

If we cannot resolve this then please provide me with workaround or tell the correct way to deal with Grid component.

Thanks in advance. Marko.
                           

Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 20, 2019 01:57 PM UTC

Hi Marko, 

Thanks for your update. 

By default, when we do CRUD operation we have manipulate the values from the form elements and we will assign it to the dataSource model class then we will change it for that certain rowData. But in your case when using object.assign it will change the references so, that we have not use the object.assign in our end. 

We can achieve your requirement using the below code example. In this we have extend the args.rowdata (which has Test class) into args.data in the beforeDataBound event. 

[app.component.html] 

<ejs-grid #gridObj [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' [allowRowDragAndDrop]="true" (beforeDataBound)="beforeDataBound($event)" > 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 
            <e-column field='CustomerName' headerText='Customer Name' width='120' [validationRules]='customeridrules'></e-column> 
        </e-columns> 
    </ejs-grid> 
------------------------------------------------------------------------------------------------------------------- 
[app.component.ts] 

beforeDataBound(args) { 
 
        if (args.requestType === 'save' && this.gridObj.isEdit) { 
            args.data = extend(args.rowData, args.data) 
        } 
    } 

  
We have prepared  a sample in the following link. 


Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon