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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

145358 Jun 18,2019 11:59 PM UTC Jun 20,2019 08:50 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
Beau Button
Asked On June 18, 2019 11:59 PM UTC

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 [Syncfusion]
Replied On 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. 

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

Regards, 
Hariharan 


Beau Button
Replied On 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?

Hariharan J V [Syncfusion]
Replied On 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. 
[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> 


In below Documentation to know about the ForeignKey column details 


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

Regards, 
Hariharan 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon