I'm using the Mvc.GridModel and showing sales order line item information (including a batch number if it has one) in the main grid and then using a GridColumnLayoutModel added to the main grid's ColumnLayouts to show another grid of batch information related to the line item. This works great when the line item has a batch number that is passed to the DataSourceUrl. The + icons expand the sub-row, gets the data, and displays it. However, some sales order line items won't have a batch number. Clicking on the + icon expands the sub-row and tries to get the data which returns 0 rows and subsequently just shows the column headers. It is a wasted effort for the end user to click on something that shows essentially nothing - not even a message explaining why no data was returned.
Thank you for posting in our forum.
I assume you’re using the Load On Demand feature, which allows retrieving the remote data on demand when the parent row is expanded for the first time. When using this feature the grid on the client-side has no information beforehand which parent records will have child data as the data is populated on demand when the user expands a row.
If the whole data is populated initially (Load On Demand is not used, whole hierarchical data is set to the main GridModel DataSource ) then only the parent rows that have child data will have an expansion icon.
Same can be implemented by handling the rowsRendering event for the child grids.
Let me know if you have any additional questions or concerns.
Thanks for the examples! For option 1, I can successfully hide the expand button, but the expanding action is still triggered by clicking where the button was. The same behavior is shown in the jsfiddle example that you gave. Is there a way to both hide the button and disable the behavior/action?
It seems that the event handler is attached to the parent element so if you hide it instead it will also disable the behavior, for example:
Here’s a fiddle for your reference:
Thanks, that works perfectly!