M

[Rykunov Alex]

Greetings.

I have the following grid:

<ej-grid id="Grid" [dataSource]="userFunctions" [allowSorting]="true"
        [editSettings]="{'allowEditing':'true', 'editMode':'batch'}" [allowPaging]="true">
        <e-columns>
            <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>
        </e-columns>
</ej-grid>

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:

dropCreate(){
    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]

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

[Prasanna Kumar Viswanathan]

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

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

    </e-columns> 

-------------------------------------------------- 

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 }); 

            } 

        } 

Sample: http://www.syncfusion.com/downloads/support/forum/128704/ze/Sample-626814583 

Regards, 

Prasanna Kumar N.S.V 

 

[Rykunov Alex]

Thank you, this solved the problem.

[Thavasianand Sankaranarayanan]

Hi Alex, 

 

Thanks for the update. Please let us know if you need further assistance. 

 

Regards, 

Thavasianand S.