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

Show and hide button in grid using vue js

1 Answer 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Binu
Top achievements
Rank 1
Binu asked on 28 Aug 2019, 04:21 AM

Hi All,

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

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
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
Tags
Grid
Asked by
Binu
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or