detailTemplate destroy on close build on open.

[Peter Vledder]

Hello!

I am using a grid with a detailTemplate on a row. I would like to build the detailTemplate on open (this works) but I would like to destroy it on close. If it is opened again it should rebuild again.

By default it is created on open and then it is cached so if I close and open again I look at cached information.

Thanks!

Peter

[Rajapandiyan Settu]

Hi Peter, 

Greetings from Syncfusion support. 

Query : I am using a grid with a detailTemplate on a row. I would like to build the detailTemplate on open (this works) but I would like to destroy it on close. If it is opened again it should rebuild again. 

 

We have analyzed your query at our end. You can achieve your requirement by using detailDataBound and detail-state-change events of Grid. 

The detailDataBound event will be triggered only at initial expanding of each detail-Row. The detail-state-change event will be triggered all the time when we collapse/expand the detail-Row. This event is not triggered at initial expand. Since the detail-state-change is an internal event, we need to ON it in dataBound event of Grid 

 

detaildataBound: https://ej2.syncfusion.com/vue/documentation/api/grid#detaildatabound 

dataBound: https://ej2.syncfusion.com/vue/documentation/api/grid#databound 

 

We have prepared a simple sample for your reference. In that sample, initially we rendered an empty “div” in the detailtemplate. At initial expanding of detail row, the detailDataBound event will be triggered. In that event, we created the detailElements and appended it to the detail cell. 

 

After collapsing/expanding the detail row triggers the detail-state-change event. In that event we destroyed/ re-rendered the detailElement based on the isExpanded value. 

 

Find the below sample and code example for more information. 

 

Sample: https://codesandbox.io/s/vue-template-forked-dw6pd 

 

[vue.js] 

<template> 

  <div id="app"> 

    <ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :detailTemplate="detailTemplate" 

      :dataBound="dataBound" 

      :detailDataBound="detailDataBound" 

      height="273px" 

    > 

      ---- 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  DetailRow, 

  Page, 

  Toolbar, 

  Edit, 

} from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

 

Vue.use(GridPlugin); 

export default { 

  data() { 

    return { 

      data: data, 

      detailTemplate: function () { 

        return { 

          template: Vue.component("detailTemplate", { 

// define the empty div 

            template: ` 

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

    </div>`, 

            data: function () { 

              return { 

                data: {}, 

              }; 

            }, 

            methods: {}, 

            computed: {}, 

          }), 

        }; 

      }, 

    }; 

  }, 

  methods: { 

    dataBound(args) { 

      // ON the internal event detail-state-change which triggered every time while expanding/collapsing the detail row after initial expand. 

      this.$refs.grid.$el.ej2_instances[0].on("detail-state-change", function (args) { 

     // executed when expand/collapse a detail row  

        var row = args.detailElement.closest("tr").nextElementSibling.querySelector(".detailtable"); 

        if (args.isExpanded) { 

// executed when expand a detail row 

          var detaildata = document.createElement("div"); 

          detaildata.classList.add("detaildata"); 

          detaildata.innerText = "Customer Name: " + args.data.CustomerID + ", Country: " + args.data.ShipCountry; 

          row.appendChild(detaildata); // append the detail element 

        } else { 

// executed when collapse a detail row 

          row.querySelector(".detaildata").remove();  // remove the detail element 

        } 

      }); 

    }, 

    detailDataBound: function (args) { // executed at initial expand of detail row 

      var detaildata = document.createElement("div"); 

      detaildata.classList.add("detaildata"); 

      detaildata.innerText = "Customer Name: " + args.data.CustomerID +  ", Country: " +  args.data.ShipCountry; 

      args.detailElement.querySelector(".detailtable").appendChild(detaildata);  // append the detail element 

    }, 

  }, 

  provide: { 

    grid: [Page, Edit, DetailRow, Toolbar], 

  }, 

}; 

</script> 

 

 

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

 

Regards, 

Rajapandiyan S 

[Peter Vledder]

Really happy with your help! This is indeed working. 

When the grid data is refreshed and you open the details again the detail-state-change is fired twice... how can I prevent this?

[Peter Vledder]

Really happy with your help! This is indeed working. 

When the grid data is refreshed and you open the details again the detail-state-change is fired twice... how can I prevent this?

Oh :-) not hard: this.$refs.grid.$el.ej2_instances[0].off("detail-state-change");

[Rajapandiyan Settu]

Hi Peter, 

We are glad that you have resolved the reported problem at your end. 

 

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

 

Regards, 

Rajapandiyan S