Pre-selecting dropdown from page parameter


I'm self-taught, and do software QA, so not greatly experienced in development, but one of our development managers is trying to get me some development work to do. We will apparently be using Radzen in some upcoming work, so he wants me to take a look, as he thinks he can use me for this project.

In the meantime, I'm tinkering with Microsoft's WideWorldImporters database, and Radzen on Angular. While I have the basic premise of what I want to do working, I'd like to take it to the next level.

I have a page with a dropdown and a datagrid, and I've populated the datagrid with data from a view that I created in the database, based on the changed event of the dropdown.

Dropdown selects StockGroupID, gets data from the view, and populates the datagrid filtering on the StockGroupID (which the view joins to the StockItems, StockGroup, and StockGroupStockItem tables). That works well.

What I'd like to add is the ability to send a selectedGroupID parameter to the page, and have the dropdown get preselected, which I believe should invoke the changed method and populate the datagrid as it does now if I select from that dropdown. I can't figure out how to get the dropdown to be selected from the parameter, though. Here's what it looks like:

Home page with dropdown
Products page with dropdown and datagrid
Home page sends parameter SelectedGroupID to products page
Products.dropdown.value is set to ${parameters.SelectedGroupID}
URL looks like http://localhost:8000/products/2

Home.dropdown.changed event:

Products.dropdown properties:

I also tried this:

Because I found another discussion that described the selection maybe occurring before the dropdown is populated, I tried the suggestion there, and set Visible to ${getStockGroupsResult}, but that didn't seem to change anything.

How do I get a parameter passed to the page to cause the dropdown on the second page to be selected to the right item?

Here is an example:

Main page will open the other page with parameter:

The other page will get the parameter in page Load:

DropDown Value will be bound to the property with parameter value:

On DropDown Change we will reload the DataGrid:

We will use query builder for the DataGrid LoadData invoke to set the filter:

Final result:

The problem is that, by default, the DropDown only has results for the first page of data. This paging is performed by the page load event handler method for the DropDown data (e.g., Invoke getSelectedGroups) by passing a $top and $skip parameter. If your default value is not on the first page of data, then the DropDown can't recognize which record your ID belongs to. The solution I found is to simply remove the $top and $skip parameters from the corresponding method call, so it returns all the results. If you are using a DropDownDataGrid, it will still page as usual.

DropDown will get all data actually, DropDownDataGrid will page the data.

Yes, the DropDown will get all the data that the page load event returns, but if the page load event pages data, then the DropDown will only have the first page of data. This could happen, for instance, with a DropDown on a generated CRUD edit page that expands a foreign key.

I realize upon re-reading the initial post that I may be misunderstanding the problem, and this may not be relevant. Sorry for any confusion.

In your screenshot for the change handler, is that a typo in the Code field? Shouldn't it be just this.grid0.load() without the curly braces?

@enchev, I have looked at and tried your example, and it works if I am doing a modal with the second page, but not if I navigate to the second page. My aim is not to have it open as a modal, but to actually navigate to it. I cannot get the dropdown on the second page to bind to the page property holding the parameter sent from the first page. Here is what I have:

Page 1 dropdown changed event navigates to second page, sending parameter:

Page 2 loads the contents of the dropdown on that page, and assigns the parameter to the GroupID page property:

The dropdown on page 2 has the Value bound to the page's GroupID property:

Upon navigation to page 2, I can see that the SelectedGroupID parameter has been sent in the URL, and I can see it was assigned to the GroupID property (which is bound to the textbox), but it has not caused a selection to occur on the dropdown. If that would occur, then my original code on the dropdown.changed event would work to populate the grid. Here is that code:

The dropdown.changed event does work to populate the grid, which is bound to the ItemsList page property:

I just can't get the dropdown to pre-select based on the parameter sent from page 1.