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

Set cell to editable based on a value during edit


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
 


3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 15, 2019 10:55 AM UTC

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. 



SA Sanjay July 17, 2019 06:40 AM UTC

Hi Seeni,

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

Thanks again

Kind regards
Sanjay


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 17, 2019 06:59 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon