Native Grid - Expand Detail template on some other button

2 Answers 292 Views
General Discussions Grid
Jagdish
Top achievements
Rank 1
Iron
Jagdish asked on 23 Jun 2021, 02:40 PM

I need to open the Master-detail template not only on the "+" or "arrow" icon but on another button on the screen.

In other words, How can we invoke the "expandChange" method from other element instead of <Grid @expandchange="expandChange" > to expand/collapse the detail template?

 

Template: I want to expand the detail template with the click of the Edit button.

<Grid
      :data-items="sampleData"
      :columns="columns"
      :detail="cellTemplate"
      :expand-field="'expanded'"
      @expandchange="expandChange"
    >
      <template v-slot:actionColumn>
        <td>
          <div class="d-flex align-items-center tbl-actions">
            <button
              type="button"
              title="Edit"
              @click="expandChange"
              class="btn btn-icon d-flex align-items-center"
            >
              <span class="icon icon-edit"></span>
            </button>
            <button
              type="button"
              title="Add to Cart"
              class="btn btn-icon d-flex align-items-center"
            >
              <span class="icon icon-cart"></span>
            </button>
          </div>
        </td>
      </template>

      <template v-slot:expandTemplate> Detail template goes here.... <template>

 

Method: 

 expandChange: function (event: any) {
      event.dataItem[event.target.$props.expandField] = event.value;

      if (event.value) {
        event.event.target.parentNode.parentNode.classList.add("expanded-row");
      } else {
        event.event.target.parentNode.parentNode.classList.remove(
          "expanded-row"
        );
      }
    },

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Jagdish
Top achievements
Rank 1
Iron
answered on 24 Jun 2021, 11:09 AM | edited on 24 Jun 2021, 11:58 AM

Thanks, Plamen for your response. 

I just figured out the solution and working as expected based on my use case.

Here is an example: https://stackblitz.com/edit/2wv1ft-y2g9nt?file=src/main.vue

 

0
Plamen
Telerik team
answered on 24 Jun 2021, 08:32 AM

Hello,

In general whether a detailed template is expanded or not depends on the value of the property that is defined by the 'expand-field' prop. Having this in mind, in order to expand or collapse an item we only need to change the value of this field for the corresponding item as for example it is done in this example for the item at position 1- https://stackblitz.com/edit/2wv1ft?file=src/main.vue

Regards,
Plamen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions Grid
Asked by
Jagdish
Top achievements
Rank 1
Iron
Answers by
Jagdish
Top achievements
Rank 1
Iron
Plamen
Telerik team
Share this question
or