Grid ToolBar for Vuejs

[David]

Is it possible to bind buttons created in a ToolbarTemplate for a grid in vuejs ?

The purpose is to enable/disable button if a row is selected or not

[Dimitar]

Hello David,

There is an existing demo that demonstrates a similar scenario to the one described - binding a button click event from ToolBar template. The example is available here:

• Grid Toolbar Template Demo.

Based on the above example, you could try subscribing to the Grid's change event and retrieve the currently selected item through the select() method. Then, based on a condition, query the grid.wrapper element for the respective button and disable it.

Regards,
Dimitar
Progress Telerik

[Rudy]

Did you ever figure out how to do this? I have been using this example for reference and still cannot get it to work properly. 

[Dimitar]

Hello Rudy,

Could you elaborate a bit more on what is the exact issue with the implementation so that I can investigate it further?

Regards,
Dimitar
Progress Telerik

[Rudy]

I need to add a button in the toolbar that acts the same way as a "Create" button would. The reason I am doing this is because I want to send the user to a form that I have created in a different component, and not use the built in popup or inline edit mode. The example uses a refresh button which should be the same for any other type of button. However I simply cannot get the click event. I have set up my project the exact same way as the example and used the code from the example and still cannot get the click event for the button.

[Dimitar]

Hello Rudy,

On the following StackBlitz example, you can find a simple Grid implementation that has a custom button integrated inside the toolbar component. This is achieved as follows:

// View
<kendo-grid-toolbar class="k-grid-toolbar">
  <button type="button" class="k-button" v-on:click="createRecord">Create Custom</button>
</kendo-grid-toolbar>

// Handler
methods: {
  createRecord: function() {
    alert("custom button clicked");
  },
}

Regards,
Dimitar
Progress Telerik

[Michael]

Hello Dimitar,

thanks for example.

I'm missing the new empty record in the grid. Can I use a command inside the method?

Regards,

Michael

[Petar]

Hello Michael,

If the targeted functionality is to have the "Add new record" button added to the custom Toolbar of the Grid, here is a Stackblitz example demonstrating how we can achieve this functionality. 

To implement the custom Toolbar, the following code is used:

customToolbarTemplate: function() {
  var templateHtml =
    '<a role="button" class="k-button k-button-icontext k-grid-add" href="\\#">' +
    '<span class="k-icon k-i-plus"></span>Add new record' +
    "</a>" +
    "<span>" 

  return kendo.template(templateHtml);
}

The code in yellow adds the "Add new record" button. 

The customToolbarTemplate is assigned to the Grid, with the following configuration.

:toolbar="customToolbarTemplate"

I hope the above answers your question. 

Regards,
Petar
Progress Telerik