Show or hide Delete icon in a datagrid depending on each record

1

Hi Radzen,

I would like to show or hide the Delete icon on a data grid, not globally on or off for the entire grid, but for each individual record in the grid… I tried to play with the AllowDelete property without success…

Is it possible?

Thanks

2

Hi @semafox,

This is possible but not with the built-in delete button (which is global). The following should work though:

  1. Add a new column and add a Button component to its Template.
  2. Set the Visible property of that Button according to your business logic. Use ${data} to access the current data item. For example something like this ${data.CanDelete == false}
  3. Handle the Click event of that Button to invoke the deleteXXX data source method. Again use ${data} to pass the current data item ID. For example ${data.ID}
3

This works great, thanks!

In another data grid I was also trying to have a button that sets a foreign key of a record to null when I click it.

In the click event of the button i do the following:

  1. Execute JavaScript code: ${data.PersonID} = null; (this is probably wrong… sorry :slight_smile:)
  2. Invoke updateDevice with the parameters ${data.DeviceID} and ${data}

What am I doing wrong? On the Server side the PatchDevice method gets called with key parameter which has the correct value, but the patch parameter is null…

4

This sounds correct. Can you check with the browser’s developer tools what’s getting posted when you invoke the updateDevice method? Check the Network tab - the HTTP request should contain the current data item serialized as JSON.

5

Just tested similar scenario but things seem to work fine. I suspect that at server-side OData fails for some reason to construct a valid Device class instance. You can try something a bit different - invoke updateDevice with ${data.DeviceID} and {PersonID: null} as parameters. Setting PersonID via Execute JavaScript code isn’t necessary. And one more thing - you should always define a Then event handler of an Invoke - otherwise the HTTP request won’t execute (this is a quirk of the way Angular deals with HTTP requests).

6

Hi Korshev,

I tried to replace {data} by {PersonID: null} as the second parameter of the updateDevice data source method, but I get the following error:
https://www.screencast.com/t/R988x2wwm.

Using {data} as the 2nd parameter, this is what I did:
https://www.screencast.com/t/Kn2chWZmGG

And this is the result I get (notice that the patch object is null)
https://www.screencast.com/t/EEZGEHcFI2

if that helps:
https://www.screencast.com/t/dEKKO3y0rjV

Thanks!

7

Did you try with {PersonID:null} or ${PersonID: null}? You should try the former.

I investigated why ${data} doesn’t work and the item is null server-side. I think it is because the payload contains expanded entities which OData chockes on for some reason. If sending only {PersonID: null} does not work you can try something like this:

  1. Change the Code of the Execute JavaScript action to the following:
let device = Object.assign({}, ${data});
device.PersonID = null;
delete device.Person;

If there are other expanded entities you should delete them too e.g. delete device.Type

  1. When invoking updateDevice use ${device} as the second parameter value.

What this code does is to clone the original data item and delete the expanded entities and set the PersonID to null.

8

You are right, I was probably using ${PersonID: null}, but using {PersonID:null} did not work either. I got the following error message in the output window:

ng-cli:
ERROR in src/app/edit-person/edit-person-generated.component.ts(152,45): error TS2345: Argument of type ‘{ PersonID: null; }’ is not assignable to parameter of type ‘Device’.
Property ‘DeviceID’ is missing in type ‘{ PersonID: null; }’.

Trying to provide the missing properties did not work either…

On the other hand, your second solution works when I delete all expanded entities! So thank you! It would be nice though to be able to operate directly from ${data} in such a scenario, just more intuitive & user-friendly…

On the cosmetic side, it would be nice to make the Code field multi lines in the Execute JavaScript handler type.

Kind regards

9

Hi @semadox,

Indeed having to delete the expanded properties is not very convenient. We will try to handle it internally.

Having the ability for multiline code editing is on the TODO list! Will try to handle that soon.

Best,
Atanas