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

[Beau Button]

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.

            autoComplete.destroy();

        }

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

            });

            autoComplete.appendTo(args.element);

        }

        ej.base.L10n.load({

            'en-US': {

                'grid': {

                    'EmptyRecord': 'Please add a new Item to this quote request to begin.'

                }

            }

        });

        function grdProducts_OnBeforeBatchSave(e) {

            jQuery.ajax({

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

            instance.editModule.batchSave();

            return true;

        }

        function grdProducts_OnKeyDown(e) {

            if (e.keyCode === 13) {

                var instance = grdProducts.ej2_instances[0];

                instance.addRecord();

            }

        }

    </script>

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

                    <e-grid-columns>

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

                    </e-grid-columns>

                </ejs-grid>

Attachment: 20190618_185738_8189c3a8.7z

[Hariharan J V]

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. 

Help Documentation:  https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#set-primary-key-column-for-auto-generated-columns-when-editing-is-enabled  

                                           https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/?no-cache=1#troubleshoot-editing-works-only-for-first-row 

Regards, 

Hariharan 

[Beau Button]

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?

[Hariharan J V]

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. 

[index.cshtml] 

@{  

    var datamng = ViewData["FNDataSource"]; 

} 

@Html.AntiForgeryToken() 

 

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

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

         

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    var elem; 

    var autoCompObj; 

 

    function onCreate(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

    function onRead(e) {  

        return autoCompObj.value; 

    } 

    function onDestroy() { 

        autoCompObj.destroy(); 

    } 

    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' }, 

                 

            }); 

            autoCompObj.appendTo(elem); 

 

        } 

} 

 

</script> 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/FK-autocomplete-200620191170444947.zip 

In below Documentation to know about the ForeignKey column details 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/?no-cache=1#foreign-key-column 

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

Regards, 

Hariharan