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

Grid column with edit template utilizing auto complete selects first row when using the mouse to move between columns.

I have a grid with 4 columns. The 2nd column (description) utilizes an edit template with an auto complete control that is populated remotely via an odata source. When you add a new row to the grid the first column of the new row is selected and you can provide a value. If you use the mouse to select the second column of the new row, the grid automatically clears the value of the 2nd column from the first row and sets focus to the control. This occurs for every new row you add. However if you use the tab key instead of the mouse it works fine.

See attached video.

 <script type="text/javascript">

        var grdProducts = document.getElementById("grdProducts");
        var companyId = document.getElementById("companyId");

        grdProducts.addEventListener("keydown", grdProducts_OnKeyDown)

        var autoComplete;

        function create () { // to create input element
            return document.createElement('input');

        function read () { // return edited value to update data source
            return autoComplete.value;

        function destroy () { // to destroy the custom component.

        function write (args) { // to show the value for custom component
            autoComplete = new ej.dropdowns.AutoComplete({
                dataSource:  new ej.data.DataManager({
                    url: '/odata/product',
                    adaptor: new ej.data.ODataV4Adaptor (),
                    crossDomain: true
                fields: { value: 'Name'}

            'en-US': {
                'grid': {
                    'EmptyRecord': 'Please add a new Item to this quote request to begin.'

        function grdProducts_OnBeforeBatchSave(e) {
                url: '/Company/Quote/BatchUpdate?companyId=' + companyId.value,
                type: "POST",
                data: JSON.stringify(e.batchChanges.addedRecords),
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    window.location.rel='nofollow' href = '/Company/Quote/?quoteId=' + data.id;

            e.cancel = true;

        function btnSave_OnClick() {

            var instance = grdProducts.ej2_instances[0];


            return true;

        function grdProducts_OnKeyDown(e) {
            if (e.keyCode === 13) {
                var instance = grdProducts.ej2_instances[0];

                <ejs-grid id="grdProducts" width="100%" beforeBatchSave="grdProducts_OnBeforeBatchSave" allowSorting="true" toolbar="@(new List<string>() { "Add" })">
                    <e-data-manager url="/Company/Quote/UrlDataSource" batchUrl="/Company/Quote/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager>
                    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" showConfirmDialog="false" showDeleteConfirmDialog="true" mode="Batch" newRowPosition="Bottom">
                        <e-grid-column field="quantity" type="integer" format="N0" headerText="Quantity" textAlign="Left" width="150" editType="numericedit" defaultValue="1" validationRules="@(new { required= true })"></e-grid-column>
                        <e-grid-column field="description" type="string" headerText="Description" textAlign="Left" editType="stringedit" foreignKeyField="Name" validationRules="@(new { required= true })" edit="@(new {create="create", read="read", destroy="destroy", write="write"})"></e-grid-column>
                        <e-grid-column field="partNumber" type="string" headerText="Part Number" width="200" textAlign="Left" editType="stringedit"></e-grid-column>
                        <e-grid-column headerText="" width="100" commands="commands"></e-grid-column>


Attachment: 20190618_185738_8189c3a8.7z

3 Replies

HJ Hariharan J V Syncfusion Team June 19, 2019 04:33 PM UTC

Hi Beau, 

Greetings from the Syncfusion support, 

We have analyzed your query provided code example and we have tried to reproduce the reported defect on our end but it is unsuccessful. we suspect that you does not defined primarykey property on EJ2 Grid column.it may be the cause of defect. Since you can use following help Documentation for resolve your defect. Please refer the below Documentation for more information. 



BB Beau Button June 19, 2019 09:27 PM UTC

Adding a hidden primary key column resolved my initial issue. However, when I attempt to edit a cell that was previously populated via the autocomplete, the cells contents are cleared completely. It appears that the "create" method is being invoked and simply replacing the contents with a new input control. How can I ensure that the cell's contents remain intact?

HJ Hariharan J V Syncfusion Team June 20, 2019 08:50 AM UTC

Hi Beau, 

We found that cause of defect is ForeignKeyField and dataSource are missed in the foreignKey column ( In your sample used Foreignkey column - “Description’). In below code example, we have defined the foreignKey column required properties in “ShipCity” column and edit template too. Please refer the below code example and sample for more information. 

    var datamng = ViewData["FNDataSource"]; 
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch" newRowPosition="Bottom"></e-grid-editsettings> 
    <e-data-manager url="/Index?handler=DataSource" batchUrl="/Index?handler=BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>         
        <e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" editType="stringedit" width="120" ></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" foreignKeyField="ShipCity" foreignKeyValue="FirstName" dataSource=datamng textAlign="Right" width="120" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> 
    var elem; 
    var autoCompObj; 
    function onCreate(args) { 
        elem = document.createElement('input'); 
        return elem; 
    function onRead(e) {  
        return autoCompObj.value; 
    function onDestroy() { 
    function onWrite(args) {            
        autoCompObj = new ej.dropdowns.AutoComplete({ 
            value: args.rowData['ShipCity'], 
            dataSource: new ej.data.DataManager({ 
                url: '/Index?handler=ChildDataSource', 
                adaptor: new ej.data.UrlAdaptor(), 
                crossDomain: true, 
                headers: [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }] 
            fields: { value: 'ShipCity', text: 'FirstName' }, 

In below Documentation to know about the ForeignKey column details 

Please get back to us, if you need further assistance. 


Live Chat Icon For mobile
Up arrow icon