Disable cell when Value in Inline Editing Dropdown Changed

[Khar Hui Chok]

Hi Syncfusion,

I have 2 enquiries regarding the grid edit mode.

1. I am trying to disable Row A , Cell A in a grid edit mode, when value in Row A , Cell B (a dropdown control) is changed. Refer to the screenshot, I would like to disable Name column when Category A is being selected. Disable the Name column at the same row when Category is changed to A or enable the Name column at the same row when Category is changed to B. How should I do it?
2. I would like to enter the grid in edit mode when the page is loaded, rather than having to double click on it or click the Edit button in the toolbars. Is there any way to achieve this? 

Attachment: Disable_field_when_drop_down_changed_fbe0d669.zip

[Manivel Sellamuthu]

Hi Khar, 

Greetings from Syncfusion support. 

Query: I am trying to disable Row A , Cell A in a grid edit mode, when value in Row A , Cell B (a dropdown control) is changed. Refer to the screenshot, I would like to disable Name column when Category A is being selected. Disable the Name column at the same row when Category is changed to A or enable the Name column at the same row when Category is changed to B. How should I do it? 

By default in inline editing we are unable to disable the column editing while grid is in edit mode. Could you please ensure that after selecting A value from dropdown and saved the row you want to disable the Name column editing or want to remove the A value from the  dropdown after saving the row. 

Query: I would like to enter the grid in edit mode when the page is loaded, rather than having to double click on it or click the Edit button in the toolbars. Is there any way to achieve this? 

Based on your query you want the grid in edit mode while the grid is re-rendered. You can achieve this requirement by using the dataBound event of the Grid. In that event we can select the row using selectRow method and edit the row by using the startEdit method of the Grid. Please refer the below code example for more  information. 

    <div> 

 

        @Html.EJS().Grid("Grid").DataBound("DataBound").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

   { 

         . . . 

   }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Render() 

    </div>  

</div>  

 

<script> 

    function DataBound() { 

        if (this.currentViewData.length) { 

            this.selectRow(0); 

            this.startEdit(); 

        } 

    } 

</script> 

Regards, 

Manivel 

[Khar Hui Chok]

HI Syncfusion,

Thank you for your reply. Here is an update for the query.

Query 1:

We followed this guide to render a dropdown template and a textbox template in the grid, and we would like to add the onchange event to the dropdown component in order to disable the textbox next to it, but unable to add add the onchange event to the dropdown. Could you advice a solution for this?

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/how-to/render-other-components-in-column/

Query 2:

No longer applicable due to we are able to render input in the grid using template.

Thank you

Regards,

Khar Hui Chok

[Rajapandiyan Settu]

Hi Khar,  

Thanks for your update. 

 

Before proceeding with your query, kindly share the below details to provide a better solution. 

 

1. Share the full Grid code files (index.cshtml).
2. Which type of data-binding (local data/ remote data) you have used? If you are using remote data, share the adaptor details.
3. Are you want to perform the edit operation using columnTemplate feature?
4. Are you want to save the edited value in server?

 

Regards,  

Rajapandiyan S