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.


Thread ID:





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


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 01:23 AM

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 07:26 AM

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 01:20 AM

Thank you, this solved the problem.

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

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.

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.