BuyLog In
Ticket T822587
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

DataGrid - How to disable master detail expand button for some rows

DataGrid Master/Detail - Only on some rows

created 5 years ago

Hi devExpress!

I'm currently working with an Angular application, where we have a DataGrid. In this DataGrid, we've found the necessity to have expandable rows on come of our rows, or as you guys call it: Master/Detail.

But after looking further into your demo's and examples I found online, I haven't been able to find an example of how I can implement Master/Detail for only some rows, depending on condition.

To give an example, let's say we have a Grid called Cars.

In each row, we have Name, price and color.

For some cars, there are multiple colors, and we want to display this in the Master/Detail view.

How would I go about doing that?

Kind regards,

Jesper

Sign in to comment on this post

Answers approved by DevExpress Support

created 5 years ago (modified 5 years ago)

After much testing back and forth, looking at different examples, I found a way to make this work.

First, I ended up giving my datagrid component an input of a number array, that holds all the indexes of the rows, where I want to display a details view.

I then use this index to determine if masterDetail should be enabled for the dataGrid, in my onInit method:

JavaScript
ngOnInit(): void {  
    this.enableMasterDetail = this.showMasterDetailOnIndex ? true : false;  
  }

Then in my "onRowPrepared" event catcher, I use this variable, the rowType and the index to determine if the row should be expandable:

JavaScript
onRowPrepared(input: any): void {  
  if (input.rowType === 'data' && this.enableMasterDetail) {  
    if (this.showMasterDetailOnIndex.indexOf(input.rowIndex) === -1) {  
      input.cells[0].cellElement.classList.remove('dx-datagrid-expand');  
      input.cells[0].cellElement.childNodes[0].classList.remove('dx-datagrid-group-closed');  
    }  
  }  
}

2 important notes here:
* To disable the functionality of expandable row, I remove the "dx-datagrid-expand" class on the input cellElement.
* To remove the little triangle button, I disable "dx-datagrid-group-closed" on the first childNode of the cellElement

Again, I would like to iterate that I think this solution is far from elegant, and most likely very inefficient - But at least it works for now.

My hope is that DevExpress at some point in the future, will make a more flexible solution to apply master/Detail on some rows, rather than just disabling CSS classes. It feels like you need to do some CSS hacking, to accomplish what I can only assume to be a very common scenario.

    Sign in to comment on this post
    created 5 years ago (modified 5 years ago)

    Hello,

    Follow the recommendations from the T312298 thread to accomplish this task.

    Regards,
    Anton

      Show previous comments (4)
      DevExpress Support Team 5 years ago

        Hi,

        So there's no built in functionality that allows me to only use master/detail on some rows?

        You are right, DataGrid doesn't provide this functionality out of the box. At the moment, I suggest you implement the above workaround. Could you please clarify if you tried it? Keep me informed of your progress and don't hesitate to contact us if you face any issues with it. We will be happy to assist you.

        To use Master/Detail on 1 of the instances of my data-grids, I have to enable it on all my data grids, and use Javascript/CSS to hide it visually?

        It is not clear what you mean. Are you talking about a situation when only one of the rows has a detailed view? If so, you are right, you need to keep all other detailed views manually as described above.

        I look forward to your reply.

        J J
        Jesper 5 years ago

          Hi DevExpress,

          I tried following the example on: https://www.devexpress.com/Support/Center/Question/Details/T204532/how-to-show-expand-button-only-on-items-which-have-children

          I added onRowPrepared to my template:

          HTML
          <dx-data-grid id="gridContainer"  
  [dataSource]="data"  
  [masterDetail]="{enabled: true, template: 'rowDetail'}"  
  [remoteOperations]="remoteOperations"  
  [allowColumnReordering]="true"  
  [allowColumnResizing]="true"  
  [rowAlternationEnabled]="true"  
  (onContentReady)="onGridContentReady()"  
  (onRowPrepared)="onRowPrepared($event)">

          And I added a method for handling onRowPrepared Event:

          JavaScript
          onRowPrepared(input: any): void {  
  if(input.rowType === 'data' && this.showMasterDetailOnIndex.indexOf(input.rowIndex) !== -1) {  
    console.log('index found, should keep class');  
  } else {  
    console.log('index not found, should remove class');  
    input.rowElement.find('td:nth-child(1)').removeClass("dx-datagrid-group-closed");  
  }  
}

          the "showMasterDetailOnIndex" variable, holds all indexes of rows that should show the "expand" arrow.

          However, when I try to trigger this event, I get an error in my console: "ERROR TypeError: input.rowElement.find is not a function"

          the input object does have the "rowElement" property, but it's a standard HTML element object (see attached image), not an array, which is why I think the "find()" operation fails.

          Any idea why this fails?

          DevExpress Support Team 5 years ago

            Hello,

            The issue is caused by find() - it is a jQuery method. In your Angular application, you need to either include the jQuery or use pure JS. I recommend you choose the second option and use the querySelector() method instead.

            Note that removeClass() is also a jQuery method, so you need to get a class list of the required element and delete extra classes.

            I look forward to your results.

            Sign in to comment on this post

            Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

            Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.