Set cell to editable based on a value during edit

[Sanjay]

Hi

Have a data grid with dropdown list.  The dropdown list has change function "saleItemCodechanged". In edit mode list is populated using remote data source. Based on the value I want one of the cells to either be editable or not. Edit mode is normal

I can not use action begin as the values are only available once a selection is made from the drop down list

Code 

function saleItemCodeChanged(args) {

    // var data =  document.getElementById('saleItemCode');

    if (typeof args != 'undefined') {

        var  data = args.itemData;

        if (typeof data != 'undefined' ) {

            var itemDescription = data.ItemDescription;

            

            var rrp = data.Rrp;

            var saleGrid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

            if (typeof saleGrid != 'undefined') {

                saleGrid.element.querySelector("#" + saleGrid.element.id + "ItemDescription").value = itemDescription;

                saleGrid.element.querySelector("#" + saleGrid.element.id + "Rrp").value = rrp;

                saleGrid.element.querySelector("#" + saleGrid.element.id + "QuantityOrdered").value = 0;

                saleGrid.element.querySelector("#" + saleGrid.element.id + "DiscountRate").value = 0;

                var columns = saleGrid.getColumns()[5]

                if (rrp == 0) {

                   

                    columns.allowEditing = true;

                    console.log("column updated")

                } else {

                    columns.allowEditing = false;

                }

            }

        }

    }

}

Although I am setting the cell to false it is still editable. How do I make it read only based on value.

Thanks

Sanjay

 

[Seeni Sakthi Kumar Seeni Raj]

Hi Sanjay,  

Thanks for contacting Syncfusion Support.  

We could see you would like to disable/enable the input of a field based on the dropdown field’s change. We have handled this case in the actionBegin event of the Grid using the Grid’s columns.allowEditing property as well as in the Select event of the DropDownList. Refer to the following code example.  

 

@{ 

    var editParams = new { @params = new Syncfusion.EJ2.DropDowns.DropDownList(){ Select = "onChange" } }; 

} 

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" actionBegin="onactionBegin"> 

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

    <e-grid-columns> 

                . . . 

                      . . . 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" edit=editParams editType="dropdownedit"> 

        </e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    function onactionBegin(args) { 

        if (args.requestType === 'beginEdit') { 

            // while the double click the row or clicking the toolbar edit icon 

            this.getColumnByIndex(1).allowEditing = args.rowData.ShipCountry === 'Denmark' ? false : true; 

        } 

    } 

    function onChange(args) { 

        // disable or enable 

        // while changing the dropdown 

        var enable = args.itemData.ShipCountry === 'Denmark' ? false : true; 

        document.getElementById('GridCustomerID')[enable ? 'removeAttribute' : 'setAttribute']('disabled', 'disabled'); 

        ej.base[enable ? "removeClass" : "addClass"](document.querySelectorAll('#GridCustomerID'), 'e-disabled'); 

        ej.base[enable ? "removeClass" : "addClass"]([document.querySelector('#GridCustomerID').closest('span')], ['e-disabled']) 

    } 

</script> 

Regards,  

Seeni Sakthi Kumar S. 

[Sanjay]

Hi Seeni,

Thank you very much. This is now working as expected.

Thanks again

Kind regards

Sanjay

[Seeni Sakthi Kumar Seeni Raj]

Hi Sanjay,  

Thank for your update. We are happy to hear that your requirement has been achieved and you are good to go.  

Regards,  

Seeni Sakthi Kumar S.