Disable expansion of Mvc.GridModel ColumnLayout if child data rows would be blank

Bryan Lanning posted over 4 years ago

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.

Is there a way to disable or entirely remove the + icon for a particular row in the main grid if a field on that row is null/blank?
Is there a way to detect that no rows have been returned from the DataSourceUrl and display a custom message instead of the column headers for the sub-grid? (e.g., "If there's no batch number, no batch information can be shown.")

Top Replies

29417

Offline Maya Kirova posted over 4 years ago +1 verified
Hello Bryan, 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...view reply »
29417

Offline Maya Kirova posted over 4 years ago in reply to Bryan Lanning +1 verified
Hello Bryan, 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...view reply »

Parents

29417

Verified Answer
Offline Maya Kirova posted over 4 years ago
Hello Bryan,

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.

You could manually iterate trough the records on the client using the rowsRendered event, find the ones that don’t have batch numbers and manually hide their expansion indicators. Here is an example where for the first row the expansion indicator for the first row is hidden runtime:

http://jsfiddle.net/n1fokzpa/2/

Out of the box there is no option to show empty data message for the grid, however you could handle the child layout’s rowsRendered event, check if there has been any data populated for the grid and if not then append your own div with a custom message over the grid and hide the header ( via setting the showHeader option to false). There a similar example with custom message in a normal igGrid which you can refer to here:

https://www.infragistics.com/community/forums/f/ignite-ui-for-javascript/93487/display-message-for-empty-grid

Same can be implemented by handling the rowsRendering event for the child grids.

Let me know if you have any additional questions or concerns.

Regards,

Maya Kirova
Cancel
Reply

Reject Answer

Cancel
15

Offline Bryan Lanning posted over 4 years ago in reply to Maya Kirova

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?
Cancel
Reply

Cancel

Reply

29417

Verified Answer
Offline Maya Kirova posted over 4 years ago in reply to Bryan Lanning

Hello Bryan,

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:

$(row).find('.ui-iggrid-expandbuttoncontainer').hide();

Here’s a fiddle for your reference:

http://jsfiddle.net/31j590qh/

Let me know if you have any additional questions or concerns.

Regards,

Maya Kirova
Cancel
Reply

Reject Answer

Cancel

Children

15

Offline Bryan Lanning posted over 4 years ago in reply to Maya Kirova

Thanks, that works perfectly!
Cancel
Reply

Cancel