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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Thread ID:





128704 Feb 7,2017 06:22 AM UTC Feb 10,2017 10:52 AM UTC Angular 4
Tags: ejGrid
Rykunov Alex
Asked On February 7, 2017 06:22 AM UTC


I have the following grid:

<ej-grid id="Grid" [dataSource]="userFunctions" [allowSorting]="true"
        [editSettings]="{'allowEditing':'true', 'editMode':'batch'}" [allowPaging]="true">
            <e-column field="id" [width]="20" [isPrimaryKey]="true" headerText=" "></e-column>
            <e-column field="name" headerText="Name" ></e-column>
            <e-column field="status" [width]="160" [editType]="dropdownlist" [editParams]="{'showPopupOnLoad':true}" foreignKeyField="value" foreignKeyValue="text" [dataSource]="statusTitles" headerText="Status"
            [editTemplate]="{create:dropCreate, read:dropRead, write:replacedDropWrite}">></e-column>

The "status" field holds boolean value, the statusTitles datasource returns the string "label" for that boolean value. So, I need an editor for that field, and I user editTemplate. Here's the functions:

    return ("<input>")
  dropRead(args) {
    return args.ejDropDownList("getSelectedValue")
  replacedDropWrite(args) {
    let itemindex = args.rowdata.status == true ? 0 : 1;
    args.element.ejDropDownList({enableFilterSearch:"true", width: "100%", dataSource: args.column[2].dataSource, fields: { text: "text", value: "value" }, selectedItemIndex: itemindex });

The dropRead returns a string value, as it the string value, that "status" field gets from foreign key datasource. However, when the function is executed, the following error happens:

Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.saveCell (eval at module.exports (addScript.js:9), <anonymous>:10:2757383)
    at Object.endEdit (eval at module.exports (addScript.js:9), <anonymous>:10:2699888)
    at Object.selectRows (eval at module.exports (addScript.js:9), <anonymous>:10:2872544)
    at Object._moveCurrentCell (eval at module.exports (addScript.js:9), <anonymous>:10:2773550)
    at Object._keyPressed (eval at module.exports (addScript.js:9), <anonymous>:10:2620861)
    at Object.eval (eval at module.exports (addScript.js:9), <anonymous>:10:21455)
    at HTMLElement.eval (eval at module.exports (addScript.js:9), <anonymous>:10:25858)
    at HTMLElement.dispatch (eval at module.exports (addScript.js:9), <anonymous>:3:10315)
    at HTMLElement.q.handle (eval at module.exports (addScript.js:9), <anonymous>:3:8342)
    at ZoneDelegate.invokeTask (zone.js:265)

This error does not happen on editMode: normal, as it doesn't happen with boolean value type. 

Rykunov Alex
Replied On February 7, 2017 06:23 AM UTC

It seems i accidentally left incorrect thred name. If anyone can fix this, I would appreciate.

Prasanna Kumar Viswanathan [Syncfusion]
Replied On February 8, 2017 12:26 PM UTC

Hi Alex, 

Thanks for contacting Syncfusion support. 

We created a sample with your code example and we able to face the mentioned issue in our sample. When we use batch edit mode with ForeignKey column we have to return the DropDownList value as below code example in the read event. 

Find the code example and sample:  

        <e-column field="OrderID" headerText="Order ID" [isPrimaryKey]="true" width="75" textAlign="right" ></e-column>        
        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> 
        <e-column field="Verified" headerText="Verified" width="110" foreignKeyField="value" foreignKeyValue="text" [dataSource]="statusTitles" [editParams]="{'showPopupOnLoad':true}" [editTemplate]="editTemp"></e-column> 
this.editTemp = { 
            create: function () { 
                return "<input>"; 
            read: function (args) { 
                var value = args.ejDropDownList("getSelectedValue") == "false" ? false : true 
                return { text: args.ejDropDownList("getValue"), value: value }; 
            write: function (args) { 
                var itemindex = args.rowdata.Verified == true ? 0 : 1; 
                args.element.ejDropDownList({ enableFilterSearch: "true", width: "100%", dataSource: args.column[2].dataSource, fields: { text: "text", value: "value" }, selectedItemIndex: itemindex }); 

Prasanna Kumar N.S.V 

Rykunov Alex
Replied On February 9, 2017 06:20 AM UTC

Thank you, this solved the problem.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 10, 2017 10:52 AM UTC

Hi Alex, 
Thanks for the update. Please let us know if you need further assistance. 
Thavasianand S. 


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