How to "disable" or put in "read-only" a DataGrid?

[ava_pmi]

hello, I have a data grid, that has one column which is a Dropdown (create in the column's template)

Now above this DataGrid, I created a button that allows the user to enter "edit mode".

I want to disable or put in read-only the grid, until that button is clicked.

I see that the DataGrid has only a "visible" property, which is too much, because it hides the grid, and I want to keep showing it, just the user cannot change the Dropdown values until he clicks the button.

What I tried to do, is to call the dropdown from the column, but I noticed that Radzen, in the generated Angular code, doesn't create a @ViewChild for the components created inside a Grid's template!!!

This means I cannot do : "this.DropdownName.disabled = true" like I usually do with Dropdowns that are components in the main page.

What would be the best solution here?

[korchev]

You could data-bind the Disabled property of the DropDown to a page property and toggle that page property when the button is clicked.

[ava_pmi]

thank you for the quick answer! could you just give me a quick example, not sure I understood!

[ava_pmi]

@korchev ok nevermind, I figured it out!! Great that is exactly what I needed!

Can I also ask you which kind of component's events work from a DataGrid Column's template and which do not?

Because I saw that for a DropDown inside a Column's Template, the event "Change" is fired correctly,
but for example, if inside a Column's Template I put another DataGrid, its events, like loadData and so on, won't be fired!

Is there a definition or rule about this?

[enchev]

All events of all components will be fired no matter if the component is inside template or not.

[ava_pmi]

@enchev then did I do something wrong?

because as asked here:

DataGrid inside the template of another DataGrid

Ok thank you, so basically saving the result to ${event}, and then calling ${data} from the Template Grid, will contain only the expanded row data, that is clear now. One last thing that is not still clear, how can I fire the LoadData event of the Template Grid? I would like to put some console.logs to see the actual ${data} objet and do some tests, but I cannot manage to make any event of the Template grid fire

I have a grid, with another grid as template of that grid (so I can have an expand row) but I tried almost everything, and the console.log() inside the events of the Grid inside the template of the main Grid never fired

[enchev]

Not sure what you did wrong however the child grid in our CRUD pages template is using events to work normally: