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.
Unfortunately, activation email could not send to your email. Please try again.

How to bid data to a dropdown in the grid

Thread ID:

Created:

Updated:

Platform:

Replies:

130908 Jun 9,2017 10:33 AM Jun 29,2017 03:09 AM Angular 9
loading
Tags: ejGrid
Dave Monks
Asked On June 9, 2017 10:33 AM

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 [Syncfusion]
Replied On June 12, 2017 08:25 AM

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. 

Also refer the documentation link. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


Dave Monks
Replied On June 23, 2017 10:01 AM

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 [Syncfusion]
Replied On June 26, 2017 03:37 AM

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. 


    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
Replied On June 26, 2017 11:20 AM

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 [Syncfusion]
Replied On June 27, 2017 08:31 AM

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. 
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
Replied On June 27, 2017 11:35 AM

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 [Syncfusion]
Replied On June 28, 2017 08:39 AM

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. 
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. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Dave Monks
Replied On June 28, 2017 11:09 AM

Manisanka,

Thank you that has fixed it.

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

Dave


Mani Sankar Durai [Syncfusion]
Replied On June 29, 2017 03:09 AM

HI Dave, 

We are happy to hear that your problem has been solved. 
 
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. 


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.

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.

;