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

Set cell to editable based on a value during edit

Thread ID:

Created:

Updated:

Platform:

Replies:

145923 Jul 14,2019 05:42 AM UTC Jul 17,2019 06:59 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
Sanjay
Asked On July 14, 2019 05:42 AM UTC


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


Sanjay
Replied On July 17, 2019 06:40 AM UTC

Hi Seeni,

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

Thanks again

Kind regards
Sanjay

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


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