Expand row, close previously selected row

[Mahesh Machina]

Hi Team,

We have detail template configured. our requirement is below

1. expand row and show details on selecting the row
2. expand only one row at a time i.e. close previously expanded rows
3. set dropdown selected value in detail template
4. grid refresh API is not working, we are using List data source
5. Change expand collapse icons to right arrow, down arrow from bullets

[Pavithra Subramaniyam]

Hi Mahesh,

Thanks for contacting Syncfusion support.

Query#1 &Query#2: expand row and show details on selecting the row & expand only one row at a time i.e. close previously expanded rows

By default, while clicking on the expand/collapse all icon, Grid will show the predefined details template of the selected row. And you can have only one expanded row at a time by collapsing the previous expanded row inside the “recordClick” event with “collapseAll” method. Please refer to the below code example and API link for more information.

function recordClick(args) {

  if (

    args.target &&

    args.target.closest('td').classList.contains('e-detailrowcollapse')

  ) {

    var grid=  document.getElementById('Grid').ej2_instances[0];

    grid.detailCollapseAll(); // collapse all the detailrow

  }

}

 

API        : https://ej2.syncfusion.com/javascript/documentation/api/grid/#recordclick

                https://ej2.syncfusion.com/javascript/documentation/api/grid/#detailcollapseall

Query#3: set dropdown selected value in detail template

You can set any values other than the default row data value using the custom template handler method. Please refer to the below code example for more information.

<script id="detailtemplate">

  <table class="detailtable" width="100%" >           

            <tbody>

                <tr>

                    <td rowspan="4" style="text-align: center;">

                        ${getSelectedValue()} 

                    </td>

                </tr>

            </tbody>

        </table>

</script>

 

 

function getSelectedValue() {

  return ddSelectedValue; // here you can return the required value

}

 

Query#4: grid refresh API is not working, we are using List data source

For validating further, could you please share the below details that will be helpful for us to provide a better solution as early as possible?

1. Share the full Grid code
2. How have you tried to refresh the Grid?
3. Share the screenshot of your issue

Query#5: Change expand collapse icons to right arrow, down arrow from bullets

You can customize the default expand/collapse icon by using the below selector. In the below code example we have used the EJ2 material arrow icon. Please refer to the below code example and documentation link for the available icon.

// applying the css for changing the expand collapse icons

.e-grid .e-icons.e-dtdiagonalright.e-icon-grightarrow::before {

  content: '\e913';

}

 

.e-grid .e-icons.e-dtdiagonaldown.e-icon-gdownarrow::before {

  content: '\e916';

}

 

 

Documentation: https://ej2.syncfusion.com/documentation/appearance/icons/#material

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Mahesh Machina]

Thank you very much Pavitra for quick response

we are able to refresh the grid using below api

  var shareTasksGrid = document.getElementById("shareTasksGrid").ej2_instances[0];

 shareTasksGrid.dataSource = result;

 shareTasksGrid.refresh();

After CRUD operation on grid, we are fetching data from database again via ajax call and refreshing Grid.

can we increase vertical space between grid rows and apply border colors to each row

[Pavithra Subramaniyam]

Hi Mahesh,

Query: can we increase vertical space between grid rows and apply border colors to each row

You can increase the row space by using the “rowHeight” property and apply the border using the “gridLines” property. If you want to customize the Grid border color, then you can override the default style using the below selector. Please refer to the below code example and demo links for more information.

.e-grid .e-rowcell,

.e-grid .e-detailrowcollapse {

  border-color: red;

}

RowHeight : https://ej2.syncfusion.com/aspnetcore/Grid/RowHeight#/fluent

GridLines   : https://ej2.syncfusion.com/aspnetcore/Grid/GridLines#/fluent

Please get back to us if you need further assistance on this.

Regards,

Pavithra S