Several quick questions while playing with IDE. I’ve got a page with three tabs, Customers, Locations, Items. Each tab has a data-grid bound to appropriate table. I’m filtering grids based on row selection of prior tab grid. How would I select row 1 of the Customer grid and row 1 of the Location grid by default on initial page load? And last how would one have PageSize as screen variable so user can change number of lines based on monitor size they are using?
TIA David
Hi David,
How would I select row 1 of the Customer grid and row 1 of the Location grid by default on initial page load?
You can select a row of the DataGrid component via its Value property e.g. ${getOrdersResult[0]} (select the first data item). There is a caveat though - setting the Value property will not fire the RowSelect event (in case you are using it).
The Value property is also two-way data-bound which means the DataGrid will update it if the user selects a different row. In this case a dedicated property should be created to store the value.
- In the Page Load event add an action with Type Set property, Name = selectedOrder and Value null
- In the Then handler of the invoke operation which gets the data for the data grid set that property to the first value:
- Set the Value property of the DataGrid to
${selectedOrder}
Now the selectedOrder property will update if the user changes the selection.
And last how would one have PageSize as screen variable so user can change number of lines based on monitor size they are using?
Do you mean a dropdown outside of the DataGrid which changes the page size? Or something inside the DataGrid pager itself? The PrimeNG DataTable component which Radzen is using has a similar feature.
1 Like
Since the RowSelected event doesn’t fire what would be the best way to accomplish the desired results of having the Locations grid filtered on Customer[0] and then the Items grid filtered on Locations[0] during initial page load? On Page Load the Customers load first and the new selectedCustomer gets set, but when I tried to filter the load of Locations using $filter Location_Customer eq selectedCustomer.Id it doesn’t product desired results. Also if I wanted all grids to have the page size next to paging controls where would I set? Or would I need to go into component.ts of each page with a grid and set? Thanks again for the help.
You still have to use the filter on load however you have to invoke that after selectedCustomer is set - in the Then handler of the getCustomers method.
BTW we plan to introduce wizard-like configuration which should allow scenarios to be implemented a lot easier.
I am also attaching a sample application which uses the Northwind public OData service and displays the Categories and Products entities in tabs. To try it unzip the file and then import the application from Radzen.
Forgot to reply about the page sizes dropdown. At the moment this capability isn’t exposed but we can do that easily. Will update this thread once this is implemented.
Thank you! I’ll take a look at sample, sorry for all questions. I’m trying to replicate the look and feel somewhat of LS app. Is there currently a way to set font, line and component size? My LS grid shows about twice as many lines as the RadZen theme. Appreciate all the work.
You can edit the client\src\styles.css file in order to customize that. For example the following CSS would set the base font size to 13 px and reduce the padding of table cells:
body {
font-size: 13px;
}
.ui-datatable tr td,
.ui-datatable tr th {
padding: 4px !important;
}
Exactly what I was looking for, thank you. I’ve noticed that the paging navigation sometimes doesn’t refresh properly when I’m reloading data on master detail grids. If data row count is only 1 screen worth of data with the pager having a “1” and the navigation arrows grayed out and I reload data that generates multiple pages that the pager still has the “1” with navigation arrows grayed out. If I click on the “1” then the pager instantly changes to the expected format and I can navigate. Has anyone reported similar issue? Thanks
This would happen in case the Count property of the DataGrid is not updated when you make the request. Make sure you set the $count parameter to true and then update the property to which the Count is bound. This should be done in the sample project that I've sent (the Products DataGrid's Count property is set to ${getProductsCount}):
