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. Image for the cookie policy date



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. 

4 Replies

RA Rykunov Alex February 7, 2017 06:23 AM UTC

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

PK Prasanna Kumar Viswanathan Syncfusion Team 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 

RA Rykunov Alex February 9, 2017 06:20 AM UTC

Thank you, this solved the problem.

TS Thavasianand Sankaranarayanan Syncfusion Team February 10, 2017 10:52 AM UTC

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

Live Chat Icon For mobile
Up arrow icon