1. Home
  2. Forum
  3. Angular
  4. On dropdown (input) change, how do I programatically change the values in other columns for same row?

On dropdown (input) change, how do I programatically change the values in other columns for same row?

Hi,

I have a column in my grid, which looks like this ...

<e-column headerText="Arc Type" width="150">
<ng-template e-template let-data>
<input ej-dropdownlist [dataSource]="arcTypes" [fields]="arcTypeValues" [(value)]="data.arcType" />
</ng-template>
</e-column>

I would like to modify another field in that `data` object (ie. the data for the current record) when this dropdown value is changed by the user.

I've tried:
(valueChange)="onArcTypeChange(data, $event)"

Then editing `data` within the function - but that doesn't update the grid.

It seems like it should be a really simple thing, but I'm really struggling to get this to work.

Thank you for your help,
Kind Regards,
Dan


5 Replies
KM Kuralarasan Muthusamy Syncfusion Team April 5, 2018 04:51 PM UTC

Hi Dan, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we need more details to provide the solution early as possible, 

Please share the following details, 

  1. Share your exact requirement in Grid.
  2. When you change the value in dropdown list while Editing or any other actions of the grid.
  3. Share your Essential Studio version.
  4. Share complete grid code example.
  5. Share the graphical representation of your requirement.

Regards, 
Kuralarasan M. 


DC Dan Clarke April 12, 2018 09:36 AM UTC

Hi. Thank you for your reply.

My requirement is just that I have a drop-down list in my grid. When the drop-down value gets changed, a custom function is run. In that custom function, I would like to set the value for *a different* column in the same row programmatically. It doesn't matter if the row is in edit mode or not - it should change the other column's date regardless.

Thanks again,
Dan


KM Kuralarasan Muthusamy Syncfusion Team April 13, 2018 04:41 PM UTC

Hi Dan, 

We have analyzed your query and we have achieved your requirement by using dataBound event of the Grid and change event of the ejDropDownList and setCellText method of the Grid. We have prepared the sample with your requirement. 

Please refer following code example: 

Grid.component.html: 
 
<div id="Appconfigdata"  style="background-color: #F5F5F5"> 
<ej-grid id=grid [allowPaging]="true" [dataSource]="gridData"  (dataBound)="dataBound($event)"> 
    <e-columns> 
        <e-column field="OrderID" headerText="Order ID" [isPrimaryKey]="true" width="75" textAlign="right"></e-column> 
        <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column> 
        <e-column field="OrderDate" headerText="OrderDate" width="80"></e-column> 
        <e-column field="EmployeeID" headerText="Employee ID" width="75"  textAlign="left"></e-column>    
 
        <e-column headerText="Arc Type" width="150"> 
            <ng-template e-template let-data> 
                <input ej-dropdownlist [dataSource]="childData" fields="text" /> 
            </ng-template> 
        </e-column>         
                  
    </e-columns> 
</ej-grid> 
    </div> 
 
Grid.component.ts: 
 
export class GridComponent { 
    public gridData: any; 
 
 
    constructor() { 
 
 
          ... 
 
       dataBound(e){ 
              setTimeout(()=>{ 
                     $(".e-templatecell .e-dropdownlist").ejDropDownList({change: function(args){ 
                           var gridObj = $("#grid").data("ejGrid"); 
                           var inx = this.element.closest("tr").index(); 
                            gridObj.setCellText(inx,2,new Date()) 
              }) 
       } 
} 

Please refer the following link to sample: 


Please refer the following link to know about dataBound event and setCellText method of the Grid: 



Please refer the following link to know about change event of the ejDropDownList: 


Regards, 
Kuralarasan M. 


 


DC Dan Clarke April 27, 2018 04:08 PM UTC

This does change the value, however as soon as setCellText is called, a PUT request seems to be automatically sent to the server where the PUT body only contains the value that was changed. The completely breaks REST - it should be sending the entire model for that row. My API can't deal with not being sent with the entire model - as the json request gets deserialised into a .NET typed object. How do I stop it from doing this?

KM Kuralarasan Muthusamy Syncfusion Team May 1, 2018 10:46 AM UTC

Hi Dan, 

Sorry for the inconvenience caused. 

we need following details for further assistance to reproduce the reported issue at our end. 

  1. Share your full grid rendering code with server side.
  2. Share the screenshot for the response tab in developer tools and console error (if any).
  3. Share the type of adaptor you are using.
  4. If possible share the issue reproducible sample.

Regards, 
Kuralarasan M. 


Loader.
Up arrow icon