This is a migrated thread and some comments may be shown as answers.

[Solved] Show and hide button in grid using vue js

1 Answer 577 Views

Grid

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 29 Aug 2019, 01:15 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items