How to bid data to a dropdown in the grid

[Dave Monks]

I'm trying to bind some simple data to a dropdown when editing a row in the grid, but I can't seem to get it to work.

Here is the component.html part

<ej-grid [allowPaging]="true" [pageSettings]="pageSettings" [allowSelection]="true"
         [allowGrouping]="true" [allowSorting]="true" [allowFiltering]="true" [allowResizing]="true" [allowReordering]="true" [allowSearching]="true"
         [allowMultipleExporting]="true" [showColumnChooser]="true"
         [toolbarSettings]="toolbarItems" [editSettings]="editSettings"
         [filterSettings]="filterType" [groupSettings.groupedColumns]="groupedColumns" [dataSource]="gridData">
  <e-columns>
    <e-column field="ID" [isPrimaryKey]="true" editType="numericedit" headerText="ID" width="10" textAlign="right"></e-column>
    <e-column field="Firstname" headerText="First Name" width="40"></e-column>
    <e-column field="Surname" headerText="Surname" width="40"></e-column>
    <e-column field="Gender" editType="dropdownedit" [editParams] ="{enableAnimation: true}" dataSource="genderData" headerText="Gender" width="10"></e-column>
    <e-column field="DateOfBirth" editType="datepicker" format="{0:dd/MM/yyyy}" headerText="Date of Birth" width="20"></e-column>
  </e-columns>
</ej-grid>


So, I'm trying to bind the Gender dropdown to a genderData data source.

This is the component.ts part

import { Component } from '@angular/core';
import { TheGang, TheGangService } from '../service/thegang.service';
import { Gender, GenderService } from '../service/gender.service';

@Component({
selector: 'app-editgrid3',
templateUrl: './editgrid3.component.html',
styleUrls: ['./editgrid3.component.scss'],
providers: [TheGangService, GenderService]
})
export class EditGrid3Component {
public gridData: any;
public genderData: any;
public groupedColumns: Array;
public filterType;
public pageSettings;
public editSettings;
public toolbarItems;

gangmembers: TheGang[]
genders: Gender[]

constructor(theGangService: TheGangService, GenderService: GenderService) {
this.gangmembers = theGangService.getTheGang();
this.genders = GenderService.getGenders();

this.filterType = { filterType: 'menu' };
this.pageSettings = { pageSize: 5 };
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "dialog", showDeleteConfirmDialog:true };
this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel", "search"] };

this.genderData = this.genders;
this.gridData = this.gangmembers;
}
}

However, when it all runs my dropdown is empty.

Any ideas where I am going wrong?

Dave

[Mani Sankar Durai]

Hi Dave, 

Thanks for contacting Syncfusion support. 

We have analyzed your code example and to bind the datasource for the dropdown column we have pass the data as text and value pair. Please refer the code example. 

 

<h2>Syncfusion Javascript Angular 2 Component</h2> 

<ej-grid #grid [dataSource]="gridData" [allowPaging]="true" [pageSettings]="pageSettings" [allowSelection]="true" 

         ... (actionComplete)="onComplete($event)" > 

     <e-columns> 

... 

        <e-column field="EmployeeID"  editType="dropdownedit" headerText="EmployeeID" [dataSource]="foreignData"  width="75" textAlign="right"></e-column> 

                 </e-columns> 

 

</ej-grid> 

 

[app.component.ts] 

 

export class AppComponent { 

    public groupedColumns: Array; 

... 

    public toolbarItems = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }; 

    public editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "dialog" }; 

 

     

    public gridData = window.gridData; 

    onComplete(event: any) { 

        if (event.requestType == "beginedit") { 

            $("#ejControl_0EmployeeID").ejDropDownList({ dataSource: event.model.columns[2].dataSource, fields: { text: "EmployeeID", value: "EmployeeID" } }).ejDropDownList("setSelectedValue", event.row.children().eq(2).text());   

 

//bind the data for the dropdown with text and value pair 

//setSelectedValue is to shown current value for the row 

        } 

    } 

  ... 

    

From the above code example we have achieved your requirement using actionComplete event in grid. 

We have also prepared a sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/130908/ze/ejGrid_exporting-1702501987 

Also refer the documentation link. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai 

[Dave Monks]

Manisankar,

Thanks for the reply.  Unfortunately I still can't get it to work, it still is not showing any data in the drop down.  I've attempted to follow the example and have now got the following code:

app.component.ts

import { Component } from '@angular/core';

import { TheGang, TheGangService } from '../service/thegang.service';
import { Gender, GenderService } from '../service/gender.service';

@Component({
    selector: 'app-editgrid3',
    templateUrl: './editgrid3.component.html',
    styleUrls: ['./editgrid3.component.scss'],
    providers: [TheGangService, GenderService]
})
export class EditGrid3Component {
    public gridData: any;
    public genderData: any;
    public groupedColumns: Array<string>;
    public filterType;
    public pageSettings;
    public editSettings;
    public toolbarItems;

    gangmembers: TheGang[]
    genders: Gender[]

    constructor(theGangService: TheGangService, GenderService: GenderService) {
        this.gangmembers = theGangService.getTheGang();
        this.genders = GenderService.getGenders();

        this.filterType = { filterType: 'menu' };
        this.pageSettings = { pageSize: 5 };
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "dialog", showDeleteConfirmDialog:true };
        this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel", "search"] };

        this.genderData = this.genders;
        this.gridData = this.gangmembers;
    }

    onComplete(event: any) {
        if (event.requestType == "beginedit") {
            $("#ejControl_0Gender").ejDropDownList({ dataSource: event.model.columns[2].dataSource, fields: { text: "Text", value: "Value" } }).ejDropDownList("setSelectedValue", event.row.children().eq(2).text());
        }
    }
}

app.component.html

<h1>Edit Grid 3</h1>
<p>Edit with a modal popup diaog</p>
<ej-grid [allowPaging]="true" [pageSettings]="pageSettings" [allowSelection]="true"
         [allowGrouping]="true" [allowSorting]="true" [allowFiltering]="true" [allowResizing]="true" [allowReordering]="true" [allowSearching]="true"
         [allowMultipleExporting]="true" [showColumnChooser]="true"
         [toolbarSettings]="toolbarItems" [editSettings]="editSettings"
         [filterSettings]="filterType" [groupSettings.groupedColumns]="groupedColumns" [dataSource]="gridData"
         (actionComplete)="onComplete($event)" >
  <e-columns>
    <e-column field="ID" [isPrimaryKey]="true" editType="numericedit" headerText="ID" width="10" textAlign="right"></e-column>
    <e-column field="Firstname" headerText="First Name" width="40"></e-column>
    <e-column field="Surname" headerText="Surname" width="40"></e-column>
    <e-column field="Gender" editType="dropdownedit" [editParams] ="{enableAnimation: true}" dataSource="genderData" headerText="Gender" width="10"></e-column>
    <e-column field="DateOfBirth" editType="datepicker" format="{0:dd/MM/yyyy}" headerText="Date of Birth" width="20"></e-column>
  </e-columns>
</ej-grid>

Any idea why this is still not working for me?

Dave

[Jayaprakash Kamaraj]

Hi Dave, 

We have analysed your code example and found that you have used dropdown column index is 2 in actionComplete event of ejGrid but Gender column index as 3 . This is the cause of issue. So, we suggest you to use getColumnIndexByField method to find index of dropdown column and then apply that index to get dropdown dataSource. Please refer to the below help document and code example. 

https://help.syncfusion.com/api/angular/grid#methods:getcolumnindexbyfield 

    onComplete(event: any) {  

        if (event.requestType == "beginedit") {  

             

               $("#ejControl_0EmployeeID").ejDropDownList({ dataSource: event.model.columns[this.Grid.widget.getColumnIndexByField("EmployeeID")].dataSource, fields: { text: "EmployeeID", value: "EmployeeID" } }).ejDropDownList("setSelectedValue", event.row.children().eq(2).text());    

  

            //bind the data for the dropdown with text and value pair  

            //setSelectedValue is to shown current value for the row  

        }  

    } 

Regards, 

Jayaprakash K. 

[Dave Monks]

Jayaprakas,

Thanks for the reply.

I have simply changed the 2 to a 3, but it is still not working.  When the edit dialog opens when you click the dropdown it just has "undefined".

Dave

[Mani Sankar Durai]

Hi Dave, 

We have checked based on your query and we are not able to reproduce the reported issue. We have also prepared a sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/130908/ze/ejGrid_exporting-1914884082 

Also we suspect that there is a problem in binding the data for the dropdown. Here text and value must be as the column values that are bound the column dataSource. So please provide the following details. 

1.       Share the screenshot or video of the issue that you have faced 

2.       Share the datasource that you have bound for the dropdown. 

3.       Does the datasource for the dropdown contains as Text and Value as fields? 

4.       If possible please reproduce the issue in the above attached sample. 

The provide information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Dave Monks]

Manisanka,

I've cut back on the code and removed the previous datasource and replaced it with a simple array:

    public genderData = [{ Gender: "M" }, { Gender: "F" }];

I've then modifed the code to set both the Value and Text to "Gender"

            $("#ejControl_0Gender").ejDropDownList({ dataSource: event.model.columns[3].dataSource, fields: { text: "Gender", value: "Gender" } }).ejDropDownList("setSelectedValue", event.row.children().eq(3).text());

However, I'm still getting the dropdown saying undefined.

I've attached a zip file containing the code and a screenshot.

Dave

Attachment: Problem_95e9aeab.zip

[Mani Sankar Durai]

Hi Dave, 

We have analyzed your query and we are able to reproduce the reported issue. The cause of the issue is due to dataSource property mentioned in column with incorrect syntax.  

We suggest you to set as [dataSource] instead of dataSource in column. 

Refer the code example. 

<ej-grid [allowPaging]="true" [pageSettings]="pageSettings" [allowSelection]="true" 

... 

 [dataSource]="gridData" 

         (actionComplete)="onComplete($event)" > 

  <e-columns> 

... 

    <e-column field="Gender" editType="dropdownedit" [editParams] ="{enableAnimation: true}" [dataSource]="genderData" headerText="Gender" width="10"></e-column>    

//dataSource must be mentioned as [dataSource]. 

... 

  </e-columns> 

</ej-grid> 

Refer the screenshot below. 

 

Refer the documentation link. 

Link: https://help.syncfusion.com/api/angular/grid#members:columns-datasource 

In the code example you have declared the data for the columns in component file. So we have to mention the dataSource inside the [] bracket. 

Refer the link: https://help.syncfusion.com/angular/overview#property-binding 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Dave Monks]

Manisanka,

Thank you that has fixed it.

Can't believe it was something as innocuous as not having square brackets.

Dave

[Mani Sankar Durai]

HI Dave, 

We are happy to hear that your problem has been solved. 

 

Refer the link: https://help.syncfusion.com/angular/overview#property-binding  

The above link explains the necessary when and where to apply the square brackets for the properties.  

 

Please let us know if you need further assistance. 

 

Regards, 

Manisankar Durai.