In the DropDownDataGrid component, is there a way to automatically select the first item within the component? I have a DropDownDataGrid which, when a selection is made, loads a second DropDownDataGrid using the selected item in the first DropDownDataGrid to filter the avilable values. This works perfectly but, the DropDownDataGrid always loads and displays the PlaceHolder and I don't seem to be able to force it to select the first item.
I've tried setting the page property which the Value is bound to to be ${result.value[0].ACCOUNTNUM} in the THEN branch of the LoadData handler (after invoking the data source method that is used for the load) but, the selection doesn't seem to work.
It was originally a form but has been converted. I load the dropdowndatagrid in the Page Load handler and the control is setup like this:
As a test, I've put 2 buttons on the page which set the CustomerAccountValue to:
Just a value of a valid ACCOUNTNUM,
Just a value of a valid COMBINEDDETAILS.
Irrespective of which button I use, the selection in the DropDownDataGrid does not change and there are no errors logged in Chrome Debugger or the Radzen Output window.
the selection in the DropDownDataGrid does not change
What does this mean? Is the value you are trying to select included in the first page of the data? If it isn't you will have to use the SelectedValue property as well. Check how Radzen generates such a page.
It should be an object with the TextProperty and ValueProperty both available e.g. { ACCOUNTNUM: 1, COMBINEDDETAILS: "Details" }. This is needed when the value isn't available in the current page of data fetched from the server.
the selection in the DropDownDataGrid does not change
What does this mean?
I mean that the selection shown within the component continues to display the placeholder and not the value selected.
I've tested and now bound the SelectedValue also.
If I use a button to try and select the first item from the first page, that works fine.
If I use a button trying to select (for example) the first item on the second page (using the property which is now bound to the SelectedValue propertty) it doesn't seem to work - I am setting this property to the string like { ACCOUNTNUM: 1, COMBINEDDETAILS: "Details" } so I know it has the correct values.
Unfortuntely, the data in the component comes from a SQL view so, I don't have a getXXXById to invoke. I have previously tried using the getXXXX method with a filter on it to give me the single record I want to select and setting the SelectedValue property to ${result.value} but, equally no joy.
The component is loaded on Page Load and has a little over 300 pages.
If I have a button with this handler:
When I click the button it, the DropDownDataGrid component's text correctly changes from the placeholder to the record with the account number "00081". This is the first record on page one within the component so, all good.
I have a second button which has this handler:
The invoke has a filter on it to only return where ACCOUNTNUM = '000411' and the record for this is the first record on page two within the DropDownDataGrid component. If I re-open the page and click on this button, I can see the invokation execute in Chrome dev tools and return the record expected but, the DropDownDataGrid component remains unchanged showing just the placeholder. I'm not 100% sure if I need to execute the load after setting the SelectedValue property but, the outcome is the same with or without this code in the handler.
You need to set both Value and SelectedValue. And Value should match the Value property of the (000411). So try to set the CustomerAccountValue property to ${result.value[0].ACCOUNTNUM} in the Then event of the Invoke data source method.
I added the setting of CustomerAccountValue so, my handler now looks like this:
The DropDownDataGrid component remained unchanged showing just the placeholder when I click on the button. I was scratching my head and then I remembered a change I made recently. I had checked the ResetFilterOnHide property on the DropDownDataGrid component. A bit more testing and I've found this...
If the ResetFilterOnHide property is ticked, the component doesn't update when I click on my button with the handler above. If the ResetFilterOnHide property is unticked, the component updates correctly so, looks like an oddity when you have the ResetFilterOnHide enabled?
Thanks for that. Just one query - when you are opening your demo, do the dropdowndatagrids have multiple pages and is the form opening and selecting a record from a page after page 1? My event handler works if I try and select a record from the 1st page but, not for records from any other pages when ResetFilterOnHide is set. If I unset ResetFilterOnHide my code works selecting record(s) from any of the pages of data.
In my example loading of selected value works no matter if ResetFilterOnHide is set to true or false. The SelectedValue property is populated with independent call and that’s why works no matter if it’s part of the DataGrid paged data or not.
