# Dropdown Filter

**URL:** <https://forum.radzen.com/t/dropdown-filter/1478>\
**Category:** Angular\
**Created:** [August 16, 2019, 1:31am UTC](https://forum.radzen.com/t/dropdown-filter/1478 "2019-08-16T01:31:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 16, 2019, 1:31am UTC](https://forum.radzen.com/t/dropdown-filter/1478/1 "2019-08-16T01:31:13Z")

</div>

I'm trying to filter a Radzen Generated Table that has an Active-Inactive column (Foreign key column )from a Dropdown, I've followed all the tutorials, and isn't working. is there any other resources.

Thanks

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 16, 2019, 4:53am UTC](https://forum.radzen.com/t/dropdown-filter/1478/2 "2019-08-16T04:53:25Z")

</div>

What property is used for this column FilterProperrty? Here is how it looks usually:

 ![image](https://forum.radzen.com/uploads/default/original/2X/e/ef56cb9c40448caf7987580f77e3e57390daf1e6.png)

To display also related data you will need $expand parameter

 ![image](https://forum.radzen.com/uploads/default/original/2X/0/03d17d5156b8812ab1db03c8eff4118526302fd7.png)

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 16, 2019, 5:08am UTC](https://forum.radzen.com/t/dropdown-filter/1478/3 "2019-08-16T05:08:21Z")

</div>

I'm trying to filter the table to the active Status, hide the status column, then toggle from active to inactive from the dropdown.

 ![active](https://forum.radzen.com/uploads/default/original/2X/1/121d46592f797c8a23bb7655e3541a2b2519d3ea.jpeg)

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 16, 2019, 5:31am UTC](https://forum.radzen.com/t/dropdown-filter/1478/4 "2019-08-16T05:31:20Z")

</div>

What's the Status column definition?

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 16, 2019, 5:43am UTC](https://forum.radzen.com/t/dropdown-filter/1478/5 "2019-08-16T05:43:26Z")

</div>

Which one is the definition?

 ![active4](https://forum.radzen.com/uploads/default/original/2X/c/c0d86d018feafbda53843ba39ea169c1c7e4e598.jpeg)  
(upload://fxXVVDHycizZk15F1CC339uCMtw.jpeg) ![active2](https://forum.radzen.com/uploads/default/original/2X/a/ac4bb04e5a45be05ee1b7a1fc244cfa260b76f72.jpeg)

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 16, 2019, 5:57am UTC](https://forum.radzen.com/t/dropdown-filter/1478/6 "2019-08-16T05:57:12Z")

</div>

The first screenshot is the column definition/properties. I'm not sure about the second screenshot - where is the DropDown?

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 16, 2019, 6:03am UTC](https://forum.radzen.com/t/dropdown-filter/1478/7 "2019-08-16T06:03:22Z")

</div>

here is the dropdown

 ![active5](https://forum.radzen.com/uploads/default/original/2X/5/5baa8f7ea9c3efbfaadf3e596d8f137a736eb8a5.jpeg)

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 16, 2019, 6:33am UTC](https://forum.radzen.com/t/dropdown-filter/1478/8 "2019-08-16T06:33:59Z")

</div>

Instead Data Source Method Invoke on DropDown Change event you can just set a Page property (for example Status) with the changed value and execute `load()` method for the DataGrid. You can use the DataGrid LoadData event to retrieve the data and include Status page property in $filter using Query Builder:

DropDown Change will set Page property

 ![image](https://forum.radzen.com/uploads/default/original/2X/b/b242514795c752d891b6bab8f9ed285f999c96c1.png)

DataGrid bound to Orders with related entities included

 ![image](https://forum.radzen.com/uploads/default/original/2X/3/3230c1a80a817db0d94c64744f0fe95d825baa36.png)  
 ![image](https://forum.radzen.com/uploads/default/original/2X/5/51cefa96a9ee7868d95fe104d9d308d99e53280c.png)

Create query for DataGrid LoadData

 ![image](https://forum.radzen.com/uploads/default/original/2X/c/c5ad32f2ccb2583b90d8d2bb62e1077e7f1620c9.png)

Add CustomerID Page property to $filter

 ![image](https://forum.radzen.com/uploads/default/original/2X/7/7d43d5218299482cd8e1d2294b383f92d008b5d0.png)

Reload DataGrid on DropDown Change

 ![image](https://forum.radzen.com/uploads/default/original/2X/f/f7c129a7118cc351cf588243149326bfe7d5e036.png)

Now you can remove Customer column and filter Employee column by LastName

 ![image](https://forum.radzen.com/uploads/default/original/2X/1/1ce6f2f8697a887d1a1cd42997bfc75e895551f4.png)

 ![image](https://forum.radzen.com/uploads/default/original/2X/1/16e659909a89c5422e09991cf76f0934455b64d6.png)

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 17, 2019, 8:07am UTC](https://forum.radzen.com/t/dropdown-filter/1478/9 "2019-08-17T08:07:34Z")

</div>

Got it Working though the datagrid doesn't load data until the dropdown is toggled

Thanks

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 17, 2019, 8:20am UTC](https://forum.radzen.com/t/dropdown-filter/1478/10 "2019-08-17T08:20:04Z")

</div>

If you have Placeholder for the DropDown there will be no item selected initially and when you choose something the DataGrid will be reloaded.

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 17, 2019, 11:14pm UTC](https://forum.radzen.com/t/dropdown-filter/1478/11 "2019-08-17T23:14:29Z")

</div>

Still not getting the Data to load. I think it is the filter, as everything else seems to work but this. also, I removed the '-' brackets off from your example, it wouldn't work otherwise.

 ![active6](https://forum.radzen.com/uploads/default/original/2X/7/796add18aa4c187486382848cc9b94ca5194c727.jpeg)  
 ![active7](https://forum.radzen.com/uploads/default/original/2X/7/79cd3067305b955c973de3db724e005d2a5b3fd6.jpeg)

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 18, 2019, 3:22pm UTC](https://forum.radzen.com/t/dropdown-filter/1478/12 "2019-08-18T15:22:20Z")

</div>

According to the URL ActiveStatusID is not defined - you need to define it before executing load() for the grid. Not sure about the brackets, in my example I’ve used single quotes since in my case the type of the property is was string. I’ve noticed also that you removed the grid filter part from the query builder and the column filtering will not work. Please check my example - both filters are combined with AND.

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 18, 2019, 10:17pm UTC](https://forum.radzen.com/t/dropdown-filter/1478/13 "2019-08-18T22:17:44Z")

</div>

I started over

I set the property ActiveStatusId (FK in Facility Table int) and Value ${event.Id} (PK in ActiveStatus Table int). Ive also tried using ${ActiveStatusId} for the value

 ![active8](https://forum.radzen.com/uploads/default/original/2X/4/46f4086516cdfe7b46adf54c18ea8a3fe38b530d.jpeg)

 ![active9](https://forum.radzen.com/uploads/default/original/2X/8/8a0313b8ab8529f42cfc6868c89d5a9e659272a3.jpeg)

 ![active10](https://forum.radzen.com/uploads/default/original/2X/a/a0be50bd816d31739d861540d7f6f2d99667f4f9.jpeg)

then set the Filter to ActiveStatusId equals ${ActiveStatusId}

 ![active11](https://forum.radzen.com/uploads/default/original/2X/f/f41d9a5270c61aa09b7a7539cab5dd4a00e5ddd0.jpeg)

I aslo tried ActiveStatus.Status for the Property or the Status Column

 ![active12](https://forum.radzen.com/uploads/default/original/2X/9/9f130b4ca49c640ac0f501c742bf0c9fe768f0e7.jpeg)

 ![active13](https://forum.radzen.com/uploads/default/original/2X/b/ba50132d335064be7f52ab1928cdccdb8cac8739.jpeg)

 ![active14](https://forum.radzen.com/uploads/default/original/2X/e/edec2574e94a33fc23448a683f6f5ffed8699c03.jpeg)

Still wont load data into the table. Still getting ActiveStatusId undefined, how do you define it.

Thanks

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 19, 2019, 6:19am UTC](https://forum.radzen.com/t/dropdown-filter/1478/14 "2019-08-19T06:19:29Z")

</div>

Hi Rob,

Please define Placeholder for the DropDown or you will need to set initial value for the ActiveStatusId on Page Load before everything else.

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 19, 2019, 6:34am UTC](https://forum.radzen.com/t/dropdown-filter/1478/15 "2019-08-19T06:34:19Z")

</div>

What should that be, I've tried Active, 'Active', blank, Status, ActiveStatus.Status, ${ActiveStatusID}

Thanks

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 19, 2019, 6:45am UTC](https://forum.radzen.com/t/dropdown-filter/1478/16 "2019-08-19T06:45:11Z")

</div>

ActiveStatusId most probably is a number (integer probably) How many status types you have? Active and Inactive?

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 19, 2019, 6:46am UTC](https://forum.radzen.com/t/dropdown-filter/1478/17 "2019-08-19T06:46:50Z")

</div>

There are 2 statuses Active, Inactive. Id is an int

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 19, 2019, 6:51am UTC](https://forum.radzen.com/t/dropdown-filter/1478/18 "2019-08-19T06:51:36Z")

</div>

In this case since you want to have initial value selected in the DropDown and the DataGrid should be filtered according to the selection you can set on Page Load ActiveStatusId to the first Id - please check the value in your table with status types. Other possible approach will be to set Placeholder for the DropDown. In this case you will not have initial value selected and the grid will be loaded on DropDown Change. Please make sure also you do not call load() for the grid on Page Load.

---

<div class="post-metadata">

**Author:** ![Hivoltech](https://forum.radzen.com/user_avatar/forum.radzen.com/hivoltech/32/1308_2.png) [@Hivoltech](https://forum.radzen.com/u/Hivoltech)\
**Post date:** [August 19, 2019, 7:25am UTC](https://forum.radzen.com/t/dropdown-filter/1478/19 "2019-08-19T07:25:50Z")

</div>

In this case since you want to have initial value selected in the DropDown and the DataGrid should be filtered according to the selection you can set on Page Load ActiveStatusId to the first Id - please check the value in your table with status types.

set on Page Load ActiveStatusId to the first Id.. Whats the Code look like,

and do these settings look right.

 ![Untitled15](https://forum.radzen.com/uploads/default/original/2X/e/e27d64070720f5564a02b5a9cfb93f82380bc459.jpeg) ![Untitled16](https://forum.radzen.com/uploads/default/original/2X/d/d4677f10653b2117ec0a4fca17b5ddb97ed46c70.jpeg)

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 19, 2019, 4:37pm UTC](https://forum.radzen.com/t/dropdown-filter/1478/20 "2019-08-19T16:37:03Z")

</div>

I've made an [example app](https://drive.google.com/open?id=1hT_-RiFymRdFyVtgblZbkogSLBbXM0xc) to illustrate you how to have initial DropDown value and filter DataGrid based on this value.

 ![image](https://forum.radzen.com/uploads/default/original/2X/5/587b85475d2dbf36f4c3c71499d1a3456416439b.png)

[Next page](https://forum.radzen.com/t/dropdown-filter/1478.md?page=2)