BuyLog In
Ticket T831577
Visible to All Users

DataGrid Master/Detail - Only show details on some rows

created 5 years ago

Hi DevExpress!

A couple of weeks ago, I had a very similar question:

https://www.devexpress.com/Support/Center/Question/Details/T822587/datagrid-master-detail-only-on-some-rows

I thought I had found a working solution, but I've come to learn that it isn't working correctly.

The issue is, that if multiple rows is expanded, it is not possible to collapse them again.

I found that it's actually illustrated in the suggested solution from another thread:

https://www.devexpress.com/Support/Center/Question/Details/t312298/dxdatagrid-how-to-disable-master-detail-expand-button-for-some-rows

In this thread, your supporter, Marion, gives a suggested solution via a jsfiddle:

http://jsfiddle.net/uw9m74c8/73/

If you go to this example, and expand the bottom expandable row available, everything is fine.

But, if you then go and expand the top expandable row, the small icon for expanding row on the bottom expandable row, disappears.

I've tried investigating, and it seems like the functionality is built so that the "details" is injected as an extra row into the original datagrid, which causes any subsequent master/detail row index to be shifted 1 higher, thus making the logic that determines which rows should be expandable obsolete.

I would really like if you guys could suggest a solution where I can have some rows be expandable, and not loose the expandable functionality on any subsequent expandable rows.

I've attached an image that illustrates the issue I'm having, but please let me know if you need any further demonstration.

Kind regards,

Jesper

I would really like a solution, where I can have some rows be expandable.

Sign in to comment on this post

Answers approved by DevExpress Support

created 5 years ago

Hello Jesper,

To achieve your goal, I suggest that you manually render cells of the Group expand column. Render cells only for those rows where you wish to show the expand/collapse buttons. Here is a code snippet demonstrating my idea:

HTML
app.component.html
<dx-data-grid #grid id="gridContainer"
    ...>
    <dxi-column [width]="40" type="detailExpand" cellTemplate="detailCellTemplate"></dxi-column>

        <div *dxTemplate="let data of 'detailCellTemplate'">
        <div *ngIf="data.rowType === 'data' && data.data.Prefix === 'Mr.'">
            <div [className]="data.row.isExpanded ? 'dx-datagrid-group-opened' : 'dx-datagrid-group-closed'" (click)="onExpandClick($event, data)">

            </div>
        </div>
    </div>
 </dx-data-grid>
JavaScript
app.component.ts:
    onExpandClick(e, data){
        this.dataGrid.instance.expandRow(data.data.ID);
    }

Check the Command Columns documentation article for more information on customizing command columns.

    Show previous comments (1)
    Alisher (DevExpress Support) 5 years ago

      Hi,

      I do not have a complete example, however, you can copy and paste the code snippet I shared to the https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/Angular/Light/ demo and check how it works. The main idea is to render expand/collapse buttons only in particular rows depending on a row's data. In the example above, expand/collapse buttons will be rendered only for those rows which have the "Mr." value in the Prefix column.

      J J
      Jesper 5 years ago

        Thanks for your tips and guidance, very helpful! Everything works like a charm now!

        If possible, I would suggest that you link your response here, to some of the other threads regarding the same issue, as this seems like the proper way to do it, whereas some of the other approaches felt a lot more "hacky".

        Kind regards,

        Jesper

        Alisher (DevExpress Support) 5 years ago

          Hi Jesper,

          I am happy to hear that my assistance was helpful. I will add a link to this ticket in other our tickets where a similar issue was discussed.

          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.