How to use DataGrid with Cascading Drop Down List when using Batch Update

[Titus]

Hello, I want to use Data-Grid with Cascading-Drop-Down-List using Batch-Update. However, the drop-down-list columns are not rendered correctly. I want to have 4 Cascading-Drop-Down-List columns which are Province, City, Subdistrict, and Village. However, only Province is currently working. I have provided the steps to reproduce the problem inside the zip file.

Attachment: CRUDCustomer_14fa4319.zip

[Joseph Christ Nithin Issack]

Currently we are validating your query, we will provide further details on or before April 12^th 2022. We appreciate your patience until then.

[Rajapandi Ravi]

Hi Titus,

Thanks for your patience

We are not able to run your shared application at our end. However, in your update, we could see that you like to implement the cascading dropdown in Batch edit mode.

Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300">

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>

    <e-grid-columns>

        <e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column>

        <e-grid-column field="CustomerID" headerText="CustomerID" width="110"></e-grid-column>

        <e-grid-column field="ShipCountry" headerText="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column>

        <e-grid-column field="ShipCity" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column>

    </e-grid-columns>

</ejs-grid>

 

<script>

    var countryElem;

    var countryObj;

    var stateElem;

    var stateObj;

 

    var country = [

        { countryName: 'United States', countryId: '1' },

        { countryName: 'Australia', countryId: '2' }

    ];

    var state = [

        { stateName: 'New York', countryId: '1', stateId: '101' },

        { stateName: 'Virginia ', countryId: '1', stateId: '102' },

        { stateName: 'Washington', countryId: '1', stateId: '103' },

        { stateName: 'Queensland', countryId: '2', stateId: '104' },

        { stateName: 'Tasmania ', countryId: '2', stateId: '105' },

        { stateName: 'Victoria', countryId: '2', stateId: '106' }

    ];

 

    function create() {

        countryElem = document.createElement('input');

        return countryElem;

    };

    function read() {

        return countryObj.text;

    };

    function destroy() {

        countryObj.destroy();

    };

    function write(args) {

        countryObj = new ej.dropdowns.DropDownList({

            dataSource: country,

            fields: { value: 'countryId', text: 'countryName' },

            text: args.rowData[args.column.field],

            change: function (args) {

                let cell = new ej.grids.parentsUntil(args.element, 'e-rowcell', false);

                let grid = document.getElementById('Grid').ej2_instances[0];

                let rowInfo;

                if (cell) {

                    rowInfo = grid.getRowInfo(cell);

                    grid.updateCell(rowInfo.rowIndex, rowInfo.column.field, args.itemData.countryName);

                    grid.editModule.editCell(rowInfo.rowIndex, grid.getColumnByIndex(rowInfo.column.index + 1).field);

                }

            },

            placeholder: 'Select a country',

            floatLabelType: 'Never'

        });

        countryObj.appendTo(countryElem);

    };

    function createcity() {

        stateElem = document.createElement('input');

        return stateElem;

    };

    function readcity() {

        return stateObj.text;

    };

    function destroycity() {

        stateObj.destroy();

    };

    function writecity(args) {

        var tempQuery = new ej.data.Query().where(

            'countryId',

            'equal',

            countryObj.value

        );

        stateObj = new ej.dropdowns.DropDownList({

            dataSource: state,

            query: tempQuery,

            change: function (args) {

                let cell = new ej.grids.parentsUntil(args.element, 'e-rowcell', false);

                let grid = document.getElementById('Grid').ej2_instances[0];

                if (cell) {

                    let rowInfo = grid.getRowInfo(cell);

                    grid.updateCell(rowInfo.rowIndex, rowInfo.column.field, args.itemData.stateName);

                    grid.editModule.editCell(rowInfo.rowIndex, grid.getColumnByIndex(rowInfo.column.index + 1).field);

                }

            },

            fields: { value: 'stateId', text: 'stateName' },

            enabled: true,

            text: args.rowData[args.column.field],

            placeholder: 'Select a state',

            floatLabelType: 'Never'

        });

        stateObj.appendTo(stateElem);

    }

 

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/cascading1163098709.zip

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing

If you still face any issue, please try to reproduce the issue our above attached sample.

Regards,

Rajapandi R

[Ahmed]

Hello,

I am having this error :

Uncaught TypeError: can't access property "parentElement", i.cell is null

 when executing this line :

grid.editModule.editCell(rowInfo.rowIndex, grid.getColumnByIndex(rowInfo.column.index + 1).field);

Knowing that rowInfo.rowIndex and  rowInfo.column.index​​ are correct.

[Vinitha Balasubramanian]

Hi Customer,

Thanks for your update.

Based on your update, we have modified the pervious sample to resolve your query.

Kindly refer the below code for your reference.

 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300">

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>

    <e-grid-columns>

        <e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column>

        <e-grid-column field="CustomerID" headerText="CustomerID" width="110"></e-grid-column>

        <e-grid-column field="ShipCountry" headerText="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column>

        <e-grid-column field="ShipCity" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column>

    </e-grid-columns>

</ejs-grid>

 

<script>

    var countryElem;

    var countryObj;

    var stateElem;

    var stateObj;

 

    var country = [

        { countryName: 'United States', countryId: '1' },

        { countryName: 'Australia', countryId: '2' }

    ];

    var state = [

        { stateName: 'New York', countryId: '1', stateId: '101' },

        { stateName: 'Virginia ', countryId: '1', stateId: '102' },

        { stateName: 'Washington', countryId: '1', stateId: '103' },

        { stateName: 'Queensland', countryId: '2', stateId: '104' },

        { stateName: 'Tasmania ', countryId: '2', stateId: '105' },

        { stateName: 'Victoria', countryId: '2', stateId: '106' }

    ];

 

    function create() {

        countryElem = document.createElement('input');

        return countryElem;

    };

    function read() {

        return countryObj.text;

    };

    function destroy() {

        countryObj.destroy();

    };

    function write(args) {

        countryObj = new ej.dropdowns.DropDownList({

            dataSource: country,

            fields: { value: 'countryId', text: 'countryName' },

            text: args.rowData[args.column.field],

            change: function (args) {

                debugger

                let cell = new ej.grids.parentsUntil(args.element, 'e-rowcell', false);

                let grid = document.getElementById('Grid').ej2_instances[0];

                let rowInfo;

                if (cell) {

                    rowInfo = grid.getRowInfo(cell);

                    grid.updateCell(rowInfo.rowIndex, rowInfo.column.field, args.itemData.countryName);

                    grid.editModule.editCell(rowInfo.rowIndex, grid.getColumns()[rowInfo.column.index + 1].field);

                }

            },

            placeholder: 'Select a country',

            floatLabelType: 'Never'

        });

        countryObj.appendTo(countryElem);

    };

    function createcity() {

        stateElem = document.createElement('input');

        return stateElem;

    };

    function readcity() {

        return stateObj.text;

    };

    function destroycity() {

        stateObj.destroy();

    };

    function writecity(args) {

        var tempQuery = new ej.data.Query().where(

            'countryId',

            'equal',

            countryObj.value

        );

       stateObj = new ej.dropdowns.DropDownList({

            dataSource: state,

            query: tempQuery,

            change: function (args) {

                let cell = new ej.grids.parentsUntil(args.element, 'e-rowcell', false);

                let grid = document.getElementById('Grid').ej2_instances[0];

                if (cell) {

                    let rowInfo = grid.getRowInfo(cell);

                    grid.updateCell(rowInfo.rowIndex, rowInfo.column.field, args.itemData.stateName);

                    grid.editModule.editCell(rowInfo.rowIndex, grid.getColumns()[rowInfo.column.index + 1].field);

                }

            },

            fields: { value: 'stateId', text: 'stateName' },

            enabled: true,

            text: args.rowData[args.column.field],

            placeholder: 'Select a state',

            floatLabelType: 'Never'

        });

        stateObj.appendTo(stateElem);

    }

 

</script>

Still, if you face the same issue, kindly share the below details with us to validate your query at our end.

• Please share the layout_cshtml file to ensure the CDN link of your project.
• If possible share video demo of your reported problem with replication procedure.
• Please share the replicated sample or try to reproduce the issue in our sample which was shared in our previous update that will be more helpful to validate further

Regards,

Vinitha Balasubramanian

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Andrei Badescu]

 Hi there,

I'm facing the same situation here. Your provided code works well as long as i'm not trying do add "allowFiltering:true" to the write function. Otherwise i get the same error: 'ej2.min.js:10 Uncaught TypeError: Cannot read properties of null (reading 'parentElement')' 

It seems like the cell is null so it cannot read the parentElement of null. The question is.. why? Is there any solution to fix this?  My code and the error below:

        function productWrite(args) {
        productObj = new ej.dropdowns.DropDownList({
            dataSource: produse,
            fields: { value: 'ID', text: 'Text' },
            allowFiltering: true,
            text: args.rowData[args.column.field],
            change: function (args) {
                let cell = new ej.grids.parentsUntil(args.element, 'e-rowcell', false);
                let grid = document.getElementById('GridDetalii').ej2_instances[0];
                let rowInfo;
                if (cell) {
                    rowInfo = grid.getRowInfo(cell);
                    grid.updateCell(rowInfo.rowIndex, rowInfo.column.field, args.itemData.Text);
                    grid.editModule.editCell(rowInfo.rowIndex, grid.getColumns()[rowInfo.column.index + 1].field);
                }
            },
        });
        productObj.appendTo(productElem);
        };

[Rajapandi Ravi]

Andrei,

We have confirmed and logged this as a bug in the component. So, we have considered ”Cell is automatically focused out and saved when we open the dropdown in Batch edit mode” as a defect and logged a report for the same. We will include the defect fix in the upcoming release, which is expected to be rolled out on Mar 20^th, 2024. Until then we appreciate your patience.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback link : https://www.syncfusion.com/feedback/51479/cell-is-automatically-focused-out-and-saved-when-we-open-the-dropdown-in-batch

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

[Aishwarya Rameshbabu]

Hi Andrei,

We are glad to announce that we have included the fix for the “Cell is automatically focused out and saved when we open the dropdown in Batch edit mode” in our 25.1.37 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue. Also, we have done some modifications in the sample. Please refer to the below code example and the sample attached.

function write(args) {
    countryObj = new ej.dropdowns.DropDownList({
        dataSource: country,
        allowFiltering: true,
        fields: { value: 'countryId', text: 'countryName' },
        text: args.rowData[args.column.field],
        change: function (args) {
            let cell = new ej.grids.parentsUntil(args.element, 'e-rowcell', false);
            let grid = document.getElementById('Grid').ej2_instances[0];
            let rowInfo;
if (cell) {
                rowInfo = grid.getRowInfo(cell);
                grid.editModule.editCell(rowInfo.rowIndex, grid.getColumns()[rowInfo.column.index + 1].field);
            }
        },
        placeholder: 'Select a country',
        floatLabelType: 'Never'
    });
    countryObj.appendTo(countryElem);
};

 

function writecity(args) {
    var tempQuery = new ej.data.Query().where(
        'countryId',
        'equal',
        countryObj.value
    );
    stateObj = new ej.dropdowns.DropDownList({
        dataSource: state,
        query: tempQuery,
        allowFiltering: true,
        change: function (args) {
            let cell = new ej.grids.parentsUntil(args.element, 'e-rowcell', false);
            let grid = document.getElementById('Grid').ej2_instances[0];
           if (cell) {
                grid.saveCell();
            }
        },
        fields: { value: 'stateId', text: 'stateName' },
        enabled: true,
        text: args.rowData[args.column.field],
        placeholder: 'Select a state',
        floatLabelType: 'Never'
    });
    stateObj.appendTo(stateElem);
}

Root cause:

The problem arises due to not checking whether the related target is present outside or inside the grid in the focusout handler.

Solution:

Fixed the issue by checking the related target whether it is present outside or inside the grid in the focusout handler.

Feedback: https://www.syncfusion.com/feedback/51479/cell-is-automatically-focused-out-and-saved-when-we-open-the-dropdown-in-batch

We appreciate your support and thank you for your patience in awaiting this release. Please feel free to contact us if you require any further assistance.

Regards,

Aishwarya R