I have an in-cell editable grid grid in which the values available in a grid foreign key column should be filtered by an input a user has previously selected. In our case a user picks a location from a kendo dropdown (outside of the grid) and that value filters what products should appear in the product foreign key column.
The general idea is that location 1 might have products A, B, and C. But Location 2 might only have products C and D. If the user picks location 1 then the multiselect bound to the foreign key column should only show A, B, and C, and if the user picks location two then they only see C and D when the dropdown is rendered.
I've seen examples where you change the editor template for Foreign Key to bind the dropdown to a remote datasource. In that case the read passes in whatever data the server needs for filtering (location id in our case) as data to the controller read call (https://www.telerik.com/forums/filtered-foreign-key-drop-down-list-based-on-another-key). The server then returns the filtered list of select list items which are bound to the dropdown.
We'd really like to avoid the case where every time a user opens the dropdown we hit the server. Is there any way to do this filtering on the client side?
I'm envinsioning a case where we:
- Send down all of the associations of locationId to productId and bind this to a javascript object
- Bind the column to a list of all possible products (so the dropdown template on the column object has all possible options)
- When the user clicks on the cell and the grid renders the dropdown we (in a javascript function) remove the values that aren't valid for the existing location
Is there an event we could bind to, or a way we could customize the editor template to achieve our desired result, specifically to filter the items in the dropdown without binding to a remote datasource?
Thanks!