Vue in Kendo Native Grid at a time only open row expand

[Rahul]

Hello All,

In vue js how to achieve at a time only one row expanding in Kendo Native Grid.

Please give the needful demo example

[Rahul]

how to set active class in master row ?

[Petar]

Hi Rahul,

The targeted functionality can be implemented using the approach demonstrated in this StackBlitz project.

We have the marked in the yellow configuration in the Grid's definition. With it, what we have to do is to set the value of the "expanded" property to true/false in the array that defines the categories in the Grid.

 <Grid
    ref="grid"
    :style="{height: '550px'}"
    :data-items="categories"
    :detail="cellTemplate"
    @expandchange="expandChange"
    :expand-field="'expanded'">
    <template v-slot:myTemplate="{props}">
        <custom :data-item="props.dataItem" />
    </template>
 </Grid>

To expand/collapse the first row in the Grid, the following functions are used.

openFirstRow: function(){
  this.categories[0].expanded = true;
},        
collapseFirstRow: function(){
  this.categories[0].expanded = false;
}

I hope the provided example will help you implement the targeted functionality in your application. 

Regards,
Petar
Progress Telerik

[Rahul]

Thank you Petar 

[Rahul]

Hello Petar

how to add active class in master row ?

[Petar]

Hi Rahul,

If the targeted functionality is to add/remove "active" class to the master row, based on the status of the row(extended/collapsed), this can be implemented using an approach similar to the one demonstrated in this demo. 

The logic that adds/removes the CSS class is implemented in the below function.

expandChange: function (event) {
    event.dataItem[event.target.$props.expandField] = event.value;
    let masrRows = document.querySelectorAll(".k-master-row");
    for (var i = 0; i < masrRows.length; ++i) {
      if(masrRows[i].children[1].innerHTML == event.dataItem.CategoryID && !masrRows[i].classList.contains('active')) {
        masrRows[i].classList.add("active")
      }
      else {
        masrRows[i].classList.remove("active")
      }
    }
},

Check the provided example and let me know if it demonstrates what you want to implement. 

Regards,
Petar
Progress Telerik