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. 

[Michael]

This line does not work anymore, is there an updated solution to this?

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

[Aishwarya Rameshbabu]

Hi Michael,

In the latest version of the Syncfusion package, you can define the edit parameters by following the below code lines. Kindly refer to the code example and the updated sample provided below for more comprehensive details.

Index.cshtml

 

@{

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

}

 

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

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

    <e-grid-columns>

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>        

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" edit ="new {@params = editParams  }" editType="dropdownedit"></e-grid-column>

   </e-grid-columns>

</ejs-grid>

 

Sample: Please find in the attachment.

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: 145923Sample_dfe3e66a.zip