How to show expand button only on items which have children

Tanveer Ahmed

created 10 years ago

How to show expand button only on items which have children? Using css or jquery to hide them messes up the UI padding and all. Is there a way to do it from the API.

Answers approved by DevExpress Support

DevExpress Support Team

created 10 years ago (modified 10 years ago)

Hello Tanveer,

Please handle the onRowPrepared event to hide an expand button for required rows. For example:

JavaScript
onRowPrepared: function (info) {  
    if (condition)  
        info.rowElement.find('td:nth-child(1)').removeClass("dx-datagrid-group-closed");  
}

Show previous comments (3)

Tanveer Ahmed 10 years ago

That gets me there half the way. The rows which don't have any details when expanded add an empty row below them.
The exact behavior that i want is a Master Detail grid autoexpanded with details and expand collapse button showing up only at rows which have them.
Currently i can achieve this by some css trickery of hiding elements
#teststeps td.dx-master-detail-cell:empty{
display:none;
}
.dx-datagrid-group-opened, .dx-datagrid-group-closed {
cursor:default;
background:none;
}
this works but i have to disable the grid too which means the rows with details cannot be collapsed.
my JS
     var stepBody = $('<div/>').attr("id", 'step_grid_' + step.name);;
     stepBody.dxDataGrid({
        dataSource: step.statements,
        showColumnLines: false,
        showRowLines: true,
        rowAlternationEnabled: true,
        disabled: true,
        columns: [
             {
                dataField: 'type',
                caption: 'Type',
                width: 65,
                allowSorting: false,
                cellTemplate: function (container, options) {
                   $('<i />')
                       .addClass('glyphicon')
                      .addClass(statementTypeClass(options.value))
                       .appendTo(container);
                }
             },
             {
                dataField: 'name',
                caption: 'Name',
                allowSorting: false,
                width: 200
             },
             {
                dataField: 'details',
                caption: 'Details',
                allowSorting: false,
             },
             {
                dataField: 'execution',
                caption: 'Execution',
                width: 70,
                allowSorting: false,
                cellTemplate: function (container, options) {
                   $('<i />')
                       .addClass('glyphicon')
                      .addClass(statementExecTypeClass(options.value))
                       .appendTo(container);
                }
             }
        ],
        masterDetail: {
           enabled: true,
           autoExpandAll: true,
           template: function (container, options) {
              if (options.key.statements != undefined && options.key.statements.length > 0) {
                 container.addClass("internal-grid-container");
                 $('<div>')
                     .addClass("internal-grid")
                     .dxDataGrid({
                        columnAutoWidth: true,
                        columns: [
                         {
                            dataField: 'type',
                            caption: 'Type',
                            width: 65,
                            allowSorting: false,
                            cellTemplate: function (container, options) {
                               $('<i />')
                                   .addClass('glyphicon')
                                  .addClass(statementTypeClass(options.value))
                                   .appendTo(container);
                            }
                         },
                         {
                            dataField: 'name',
                            caption: 'Name',
                            allowSorting: false,
                            width: 200
                         },
                         {
                            dataField: 'details',
                            caption: 'Details',
                            allowSorting: false,
                         },
                         {
                            dataField: 'execution',
                            caption: 'Execution',
                            width: 70,
                            allowSorting: false,
                            cellTemplate: function (container, options) {
                               $('<i />')
                                   .addClass('glyphicon')
                                  .addClass(statementExecTypeClass(options.value))
                                   .appendTo(container);
                            }
                         }
                        ],
                        dataSource: options.key.statements
                     }).appendTo(container);
              }
           }
        }
     });

DevExpress Support Team 10 years ago

Tanveer,
Would you please clarify what you mean by "is a Master Detail grid autoexpanded"? Do you want to render all master and detail grids when a page has been loaded? If so, why do you need this? This may lead to slow page rendering. Isn't it better to allow a user to decide what detail grid should be shown?

Tanveer Ahmed 10 years ago

Its a user requirement that the grid be auto expanded when the page loads. I am not too concerned about the load time as the main grid is always <15 rows with a maximum of 5 details per row.

DevExpress Support Team 10 years ago

Tanveer,
In this case, I suggest you expand each row manually using the expandRow(key) method in the dxDataGrid.onContentReady event handler as shown below:

JavaScript
onContentReady: function (e) {  
    // if (condition)  
    var count = e.component.pageSize();  
    for (var i = 0; i < count; i++)  
        // if (condition)  
            e.component.expandRow(i);  
}

Note that the onContentReady event fires each time a user performs a grid action. So, you need to add a condition for cases when you do not want to expand all non-empty rows. I've also attached a sample project that illustrates the issue in action.

dxSample_T204532.zip

Tanveer Ahmed 10 years ago

Thank you that helps.

DevExpress Support Team 10 years ago

You're always welcome, Tanveer!

Created: February 3, 2015 8:29 PM

Modified: February 6, 2015 4:07 PM

Platform: HTML JS

Product: DevExtreme Data Grid

Build: 14.2.4

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.

How to show expand button only on items which have children

Answers approved by DevExpress Support

Recently viewed tickets