Inline Edit DataSource is not Working

[Sridhar]

Hai Team,

            We are using EJ1 components for Angular 4 Project.I have a problem on dropdownlist while inline edit and its not binding the data.  Please Send your input ASAP.

Our typescript code:

   for (let i = 2010; i <= this.runningYear; i++) {

            this.FiscalYearValues.push(i);

            }

           

            this.fiscalyearfieldvalues = { dataSource: this.FiscalYearValues, text: "fiscalyear", value: "fiscalyear" };

HTML Code:

   <ej-grid id="Grid" [dataSource]="gridData" (actionComplete)="onComplete($event)" [allowSearching]="true" [toolbarSettings]="toolbarItems" allowPaging="true" [pageSettings]="pageSettings" [allowSorting]="true" [allowFiltering]="true" [filterSettings]="filterType" [editSettings]="editSettings" width="150%">

            <e-columns>

                <e-column [visible]=false field="safetyHoursID" [isPrimaryKey]="true" headerText="SafetyHoursID"></e-column>

                <e-column [allowEditing]="false" field="locationDesc" headerText="Location"></e-column>

                <e-column field="fiscalYear" headerText="Fiscal Year"  ej-dropdownlist editType="dropdownedit" [dataSource]="FiscalYearValues"></e-column>

                <e-column field="fiscalMonth" headerText="Fiscal Month"  ej-dropdownlist editType="dropdownedit" [dataSource]="fiscalMonth"></e-column>

                <e-column field="employeeHours" headerText="Employee Hours"></e-column>

                <e-column field="contractHours" headerText="Contract Hours"></e-column>

          </e-columns>

        </ej-grid>

Regards,
Sridhar

[Thavasianand Sankaranarayanan]

Hi Sridhar, 

Thanks for contacting Syncfusion support. 

From the given code example we found that in the column definition you have given ej-dropdownlist which is wrong declaration. So we suggest you to remove the ej-dropdownlist in the column definition. Also for the dropdownlist we need to give the dataSource in the form of text and value pairs. 

Please refer the below code example. 

[html] 

<ej-grid id="Grid" [dataSource]="gridData" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" > 

  <e-columns> 

      <e-column field="OrderID" headerText="OrderID" [isPrimaryKey]="true"></e-column> 

      <e-column field="EmployeeID" headerText="EmployeeID" editType="dropdownedit" [dataSource]="year"></e-column> 

      <e-column field="Freight" headerText="Freight"></e-column> 

      <e-column field="ShipCountry" headerText="ShipCountry" ></e-column> 

  </e-columns> 

</ej-grid> 

 

[ts] 

export class GridComponent { 

    public gridData; 

    public editSettings; 

    public toolbarItems; 

    public year = []; 

    constructor() { 

            this.gridData = (window as any).gridData; 

            this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true}; 

            this.toolbarItems={ showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]}; 

 

            for(let i=3010;i<=3018;i++){ 

                this.year.push({text:i,value:i}); 

            } 

    }   

} 

 

We have prepared a sample for your reference. Please refer the below link for the sample. 

Sample : http://www.syncfusion.com/downloads/support/forum/140283/7z/Grid-881764044.7z  

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-edittype 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-datasource 

If you need any further assistance please get back to us. 

Regards, 

Thavasianand S.