Show and hide button in grid using vue js

[Binu]

Hi All,

         How can we create , show , hide button in grid using vue js

[Veselin Tsvetanov]

Hello Binu,

In the Toolbar of the native Kendo Vue Grid, you could use the v-if directive to render or not an element:

    <Grid ref="grid"
          ...
        <grid-toolbar>
            <div @click="closeEdit">
                <button v-if="buttonVisible" title="Add new" class="k-button k-primary" @click='addRecord' >
                    Add new
                </button>
            </div>
        </grid-toolbar>
    </Grid>

You could easily change the state of that button by changing the value of the buttonVisible data field:

        toggleButton: function(e) {
          this.buttonVisible = !this.buttonVisible;
        },

Here you will find a small StackBlitz sample implementing the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik