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

Grid with dropdown that contains fixed set of values but shows initial value from dataset

Thread ID:

Created:

Updated:

Platform:

Replies:

144271 Apr 28,2019 01:47 AM UTC Apr 30,2019 10:52 AM UTC Angular - EJ 2 4
loading
Tags: Grid
Deanna Delapasse
Asked On April 28, 2019 01:47 AM UTC

Using this grid I want the priority column to start with the "Priority" value from the dataset but then show the set of values defined in dropData.  This configuration almost works but it won't show the initial values of priority.  If I remove the ng-template, the starting value is shown correctly, but obviously then the dropdown doesn't work.  How can I have both?

<ejs-grid id="queueGrid" [dataSource]='queueList' [editSettings]='editSettings' height='515px'>
        <e-columns>
            <e-column field='priority' headerText='Priority' width=150>
                <ng-template #template let-data>
                    <div>                    
                        <ejs-dropdownlist id='ddlelement' [dataSource]='dropData' ></ejs-dropdownlist>
                    </div>
                </ng-template>
            </e-column>
        </e-columns>
 </ejs-grid>

    public dropData = ['Pri 1', 'Pri 2', 'Pri 3', 'Pri 4', 'Pri 5'];
    queueList: Object[] = [
        { id: "c:/a/b/c/file.txt", filename: "file.txt", size:  "1234", priority: 'Pri 1', tag: "blah blah", uploaded: '1233', filepath:"c:/a/b/c" },
        { id: "c:/a/bbb/c/myzip.zip", filename: "myzip.zip", size:  "233", priority: 'Pri 2', tag: "blah blah", uploaded: '0', h:"c:/a/bbb/c" },
        { id: "c:/a/b/cccc/myzip.zip", filename: "myzip.zip", size:  "456456", priority: 'Pri 5', tag: "blah blah", uploaded: '0', filepath:"c:/a/b/cccc" }
    ];

    ngOnInit(): void {
        this.editSettings = { allowEditing: true,  allowDeleting: true };
    }


Hariharan J V [Syncfusion]
Replied On April 29, 2019 09:15 AM UTC

Hi Deanna, 
 
Greetings from Syncfusion support. 
 
We have checked your query and you can achieve your requirement by using the below way. We have prepared a sample where the grid shows initial values of “CustomerID” column and dropdownlist for that column. 
Please refer the below code example and sample link. 
 
[app.component.ts] 
@Component({ 
  selector: 'app-root', 
  template: `  <ejs-grid [dataSource]='data' [editSettings]='editSettings'> 
  <e-columns> 
  <e-column field='CustomerID' headerText='Customer ID' width=150> 
  <ng-template #template let-data> 
  <span>{{data.CustomerID}}</span>        // you can show the initial value like this. 
  <div style='width: 150px'> 
  <ejs-dropdownlist id='ddlelement' [dataSource]='dropData' ></ejs-dropdownlist> 
  </div> 
      </ng-template> 
  </e-column> 
  </e-columns> 
</ejs-grid>`, 
  styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit { 
  public data: object[]; 
  public dropData: any; 
  public editSettings: EditSettingsModel; 
  ngOnInit(): void { 
      this.data = data; 
      this.dropData = ['VINET', 'TOMSP', 'HANAR', 'SUPRD', 'VICTE']; 
      this.editSettings = { allowEditing: true, allowDeleting: true }; 
  } 


Please get back to us for further assistance. 

Regards, 
Hariharan 


Deanna Delapasse
Replied On April 29, 2019 11:54 AM UTC

This solution shows BOTH the initial value and the dropdown's value at the same time.  I want the initial value of the dropdown to BE the initial value. 

This should be a very common pattern.  I feel like [value]={{data.CustomerID}} should work, but that doesn't work for me.



Deanna Delapasse
Replied On April 29, 2019 12:19 PM UTC

Figured it out!   Just needed to remove the {{}}

<e-column field='priority' headerText='Priority' width=150>
                <ng-template #template let-data>
                    <div>                    
                        <ejs-dropdownlist id='ddlelement' (change)="onChange($event)"  [(value)]='data.priority' 
                                          [dataSource]='dropData' (select)="priDDSelect()" ></ejs-dropdownlist>
                    </div>
                </ng-template>

            </e-column>

Hariharan J V [Syncfusion]
Replied On April 30, 2019 10:52 AM UTC

Hi Deanna, 
 
Thanks for your update.  
  
We are happy to hear that your issue has solved.  
   
Regards, 
Hariharan 


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